Dicas para padronizar seus códigos e arquivos CSS - #2

Destaque

Olá, essa é a 2º e última parte do post anterior. E nela irei abordar algumas dicas de nomenclatura, estrutura de seletores e formatação de seus códigos CSS.

Se ainda não leu o 1º post sobre esse assunto, recomendo que leia-o antes de continuar com a leitura deste.

Nomenclatura

A nomenclatura dos códigos css são muito importantes para evitar confusão e potenciais conflitos em seu projeto. Ela facilita a leitura do código e manêm o seu projeto bem organizado.

Baseado em várias metodologias, crieu o meu próprio padrão de nomenclatura no qual está me atendendo muito bem e está sendo muito produtivo. 

Nomeando IDs

Os ids como vocês já devem saber, são elementos únicos na aplicação e que não devem se repetir. Eu particularmente não gosto de usá-los para estilizar, mas sim para comportamentos.

Para nomear um id faço da seguinte forma:

<elemento>+<NomeElemento> onde: <elemento> pode ser uma section, component ou module, sendo que uso sempre os três primeiros dígitos de cada elemento para concatenar com o nome do elemento. Por exemplo:

<!-- Sessão onde renderiza o slideshow -->

<div id="secSlideshow">
      <!-- restante do conteúdo -->
</div>

<!-- Componente que renderiza artigos do site -->

<div id="comArticleSite">
      <!-- restante do conteúdo -->
</div>

<!-- Módulo que mostra número de visitantes do site -->

<div id="modNumVisitorSite">
      <!-- restante do conteúdo -->
</div>

Dessa forma consigo ter controle maior na hora de criar os comportamentos necessários em um arquivo JavaScript.

Utilizo ids para estilizar somente em casos raros que preciso usar a mesma nomenclatura de classe em duas sessões distintas.

<div id="secSlideshow">
      <div class="l-image-full">
            <!-- conteúdo -->
      </div>
</div>

<div id="secSubSlideshow">
      <div class="l-image-full">
            <!-- conteúdo -->
      </div>
</div>

 

#secSlideshow .l-image-full{
      width: 100%;
}

#secSubSlideshow .l-image-full{
      width: 80%;
}

É claro que existe outras formas de fazer isso, mas em alguns casos dependendo do projeto você pode ter que utilizar desta forma.

Nomeando Classes

Para as classes utilizo uma nomenclatura bem diferente dos ids. Para as divs que envolvem outras divs e outros elementos html escrevo da seguinte forma: <primeira_inicial_projeto>-<aparencia>:

<!-- menu do Projeto "Lojinha do Fulano" -->

<div class="l-menus">
      <div class="l-left-menu"></div>
      <div class="l-right-menu"></div>
</div>

O nome do elemento é sempre precedido de hifens e sempre deve ser um nome baseado na aparência. A questão de utilizar o caractere no início dos nomes é porque trabalho exclusivamente com CMSs. E esse padrão evita conflitos entre módulos e a base da aplicação.

Para elementos específicos onde há alguma característica utilizo da seguinte forma: <aparencia>-<caracteristica>. Caso o elemento não tenha características coloco somente <aparência>.

<div class="l-content-galery">
      <button class="button button-large"></button>
</div>

Para dar uma característica específica a um elemento utilizo um formato no qual utilizo <propriedade>-<valor>. Esse formato é muito útil para você utilizar em toda a aplicação como utilitários. Por exemplo, se em seu projeto em várias partes irá utilizar uma borda arredondada de 4px, então pode criar uma classe da seguinte forma:

.border-rounded-4{
      border-radius: 4px;
}

 

<button class="button button-large border-rounded-4"></button>

Caso queira saber mais sobre nomenclatura, de uma olhada no Suit CSS. É uma documentação bem detalhada no qual você pode pegar ideias e construir o seu próprio estilo.

Estrutura dos seletores

Esse padrão tem o objetivo de organizar as propriedades dentro do seletor. Melhora a estética do código e também influencia no desempenho.

Você pode escrever as propriedades de duas formas:

Ordem alfabética

body {
      background-color: #fff;
      color: #333;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 13px;
      line-height: 18px;
      margin: 0;
}

Ordem por tipo de propriedade

Esse é o padrão que eu utilizo em meus projetos. Coloco sempre as propriedades estruturais antes das propriedades de estilo.

.l-content{
      /*estrutura*/
      padding: 12px;
      margin: 0 10px;
      width: 80%;
      height: 150px;
      /*estilo*/
      font-size: 14px;
      color: #000;
      border-radius: 5px;
      border: 1px solid #ccc;
      background: #666;
}

Existem algumas ferramentas que podem te ajudar nesse processo de organização das propriedades:

 

Formatação

A formatação implica muito no desempenho da aplicação e evita de você escrever código desnecessário.

Esse padrão é bem simples. Em vez de você escrever todas as propriedades possível de um seletor, simplifique sua escrita.

/*em vez disso*/

.l-slider {
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 6px;
    padding-left: 10px;
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    font-family: Times, Arial, sans-serif;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    background-color: #FFF;
    background-image: url(imagens/fundo.jpeg);
    background-repeat:no-repeat;
    background-position:0 10px;
}

/*faça isso*/

.l-slider {
      padding: 2px 5px 6px 10px;
      font: bold 14px/18px Times, Arial, sans-serif;
      border: 1px solid #ccc;
      background: #FFF url(images/fundo.jpeg) 0 10px no-repeat;
}

Para uma melhor estética na formatação, coloque sempre um espaço depois dos ":", um espaço antes da chave de abertura e finalize também a última propriedade com ";".

Uma coisa que passei a fazer há algum tempo, foi escrever o código todo em inglês. Por dois motivos, um para me acostumar com a língua e o outro porque o código ficará internacionalizado. Isso traz benefícios, mas também traz problemas, pois se alguém da equipe não entende o inglês, ficará mais difícil de entender a lógica do código diminuindo a sua produtividade. Nestes casos todos os comentários são escritos em português.

Essas então são as dicas que tenho para passar há você. São dicas que eu uso e tem me ajudado muito na escrita do CSS, mas não necessariamente são uma regra para qualquer projeto. Pode ser que você não se adeque a essas dicas, então fique avontade para comentar o que você utiliza e dar sugestões também de como pode ser melhorada essas dicas. O importante é você implementar um padrão e não sair por ai se descabelando quando algum bug aparecer em seu projeto por causa de uma escrita ruim.


Viu algum erro, tem uma crítica ou sugestão, não hesite em deixar um comentário e compartilhar. Isso ajuda muito o blog ficar de pé.

Última modificação em Domingo, 15 Novembro 2015 14:44
(1 Voto)
Lido 4326 vezes
Tags :

Deixe um comentário

Certifique-se de preencher os campos indicados com (*). Não é permitido código HTML.

Receba conteúdos exclusivos

Please wait