<
Menu

Tableless



6 estratégias para melhorar a organização do seu CSS

Algumas estratégias simples podem ser utilizadas para deixar o seu CSS mais organizado, consistente e de fácil manutenção.

Durante a codificação do CSS para um site, é interessante que o designer/programador utilize algumas convenções para que o código fique organizado e bem documentado.

Nos casos em que um projeto é compartilhado entre vários designers e programadores, a definição destas convenções é especialmente necessária para manter o código consistente e inteligível a todos que necessitam trabalhar ou dar manutenção no CSS.

Neste artigo compartilho algumas estratégias simples que aprendi ao longo dos anos e que auxiliam a melhor organizar folhas de estilo.

1º Utilize a declaração abreviada das propriedades

A forma abreviada de propriedades CSS poupa linhas de código e resume as sequências de declarações, deixando o código mais limpo e fácil de entender.

Veja o exemplo de uma classe sem o uso de declarações abreviadas:

.box {
    margin-top: 2px;
    margin-right: 3px;
    margin-bottom: 5px;
    margin-left: 9px;
    font-weight:bold;
    font-size:12px;
    line-height:14px;
    font-family:Arial, Verdana, sans-serif;
    border-width: 1px;
    border-style: solid;
    border-color: #000;
    background-color:#FFF;
    background-image:url(imagens/background.gif);
    background-repeat:no-repeat;
    background-position:0 15px;
}

Utilizando as declarações abreviadas, teríamos a seguinte definição para a mesma classe:

.box {
    margin: 2px 3px 5px 9px;
    font: bold 12px/14px Arial, Verdana, sans-serif;
    border: 1px solid #000;
    background: #FFF url(images/background.gif) 0 15px no-repeat;
}

2º Utilize identação para elementos encadeados

Na utilização de seletores contextuais que fazem uso de herança, também chamados de seletores encadeados (saiba mais aqui), uma opção interessante é a identação dos níveis de encadeamento para melhor visualizar qual a relação entre determinadas classes e elementos.

Exemplo:

h3 {
    font: italic bold 12px/24px Arial, Helvetica, sans-serif;
}

    h3 a, h3 a:visited {
        color: #000;
    }

Neste exemplo, temos a definição de estilo para o elemento h3. Abaixo, o elemento a que estiver dentro da tag h3, receberá a cor preta. Note que, com a identação, é possível compreender melhor que o estilo dos seletores encadeados está relacionada com o seletor h3.

Entretanto, esta técnica pode se tornar contraproducente caso haja muitos níveis de encadeamento, por exemplo:

.content
{ … }

    .content p
    { … }

        .content p strong
        { … }

            .content p strong a
            { … }

Portanto, sugiro utilizar apenar o primeiro nível de identação para relacionar com o contexto do primeiro elemento, caso opte por esta técnica.

3º Faça uma divisão lógica do seu CSS

Organize o estilo em determinadas seções, para facilitar a criação e a manutenção dos estilos e marque estas divisões com comentários CSS.

Uma sugestão de seções para realizar esta divisão:

  • Global (reset, corpo da pagina, estilo padrão para parágrafos, listas, etc.)
  • Cabeçalho da página
  • Estrutura da página
  • Rodapé
  • Estilos de títulos
  • Estilos de texto
  • Navegação
  • Formulários
  • Extras ou Miscelâneas

Os estilos de título e estilos de texto diferem dos estilos globais pois contém também definições de classes, enquanto que os estilos globais tratam apenas de definição para os seletores de tags.
Exemplos de comentários CSS que você pode utilizar para marcar a divisão de seções:

/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/

/* GLOBAL > RESET
//////////////////////////////////////*/

/**
* Estilos Globais
*
* @section global reset
*/

O terceiro exemplo é do CSSDoc, um projeto que visa estabelecer um padrão para documentação de CSS utilizando comentários, mas isso é assunto para outro artigo.

4º Estabeleça padrões de nomenclaturas para classes e IDs

O nome de uma classe ou um ID deve possibilitar a identificação de sua finalidade, de seu uso e de sua semântica.

Deve-se evitar nomear classes e IDs indicando aspectos estéticos e de posicionamento. Imagine as seguintes situações:

  1. Você nomeia uma classe como conteudoEsquerda, e depois precisa mudar o posicionamento para a direita durante um redesign. Será mais custoso, pois terá que mudar o nome da classe e a intenção não é essa. Se a classe tivesse sido definida como conteudoRelacionado ou sidebar, a mudança ficaria a cargo apenas do CSS;
  2. Você nomeia uma classe como tituloVerde. Depois, precisa fazer uma manutenção rápida, pois o cliente quer o título em vermelho. Você muda apenas no CSS e a classe perde toda a semântica.

É importante definir também qual a forma de escrever as classes e IDs. Por exemplo: você utiliza camelCase, outro designer utiliza nome-com-hífen e outro utiliza nome_com_underline. Estabeleça um único padrão junto a equipe, para que as nomenclaturas permaneçam consistentes. Pode ser, por exemplo, com hífen para classe e camel case para ID.

5º Especialize classes ao invés de criar seletores semelhantes

No (X)HTML, podemos utilizar mais de uma classe para o mesmo elemento. Com isso podemos especializar os elementos de utilizam uma determinada classe. Esta técnica é útil quando precisa-se aplicar apenas alguma propriedade diferente a um elemento que já utiliza uma classe, evitando a duplicação de estilos ou utilização de estilo inline.

No exemplo abaixo, temos dois parágrafos com a mesma classe, verMais e o CSS correspondente.

HTML

<h2>Artigos Recentes</h2>
…
<p class="verMais"><a href=”artigos.php”>Ver Mais</a></p>

<h2>Artigos Mais Comentados</h2>
…
<p class="verMais"><a href=”artigos_comentarios.php”> Ver Mais</a></p>

CSS

.verMais {
    border-top: 1px solid #CCC;
    font-size: 11px;
    line-height: 24px;
    margin: 0 0 10px 0;
    text-align: right;
    text-transform: lowercase;
}

Porém, para o Segundo parágrafo, não queremos que ele tenha o border-top. Para isso, utilizamos uma segunda classe, chamada “semBorda”, ficando dessa forma:

HTML

<h2>Artigos Recentes</h2>
…
<p class="verMais"><a href=”artigos.php”>Ver Mais</a></p>

<h2>Artigos Mais Comentados</h2>
…
<p class="verMais semBorda"><a href=”artigos_comentarios.php”> Ver Mais</a></p>

CSS

.verMais {
    border-top: 1px solid #CCC;
    font-size: 11px;
    line-height: 24px;
    margin: 0 0 10px 0;
    text-align: right;
    text-transform: lowercase;
}

    .semBorda {
        border: none;
    }

Dessa forma, especializamos os elementos com a classe verMais, combinando mais uma classe que modifica apenas uma das propriedades, ao invés de criar uma classe verMais2 com as mesmas definições, retirando apenas a borda.

6º Ordene as propriedades dos seletores

Independente se você utiliza uma propriedade por linhas ou todas as propriedades CSS em uma única linha, escolher uma ordem para as propriedades é importante para facilitar a identificação, a adição de novas propriedades e também ajuda e encontrar mais rápido uma propriedade que você precisa alterar.

Longe de ser pragmática e indicar apenas 1 técnica com a qual tive contato (e que muitas pessoas às vezes têm dificuldade de se adaptar), sugiro duas formas de realizar essa ordenação:

Por ordem alfabética

No começo é um pouco mais complicado para conseguir localizar determinadas propriedades, pois acaba quebrando um pouco a organização lógica. Por exemplo, neste método propriedades como width e height ficarão amplamente distanciadas se o seletor contiver margin, padding, text-align, text-transform, entre outros. Porém, é um padrão mais conciso e que não gera ambiguidades de utilização.

Por agrupamento lógico

Este método pode ser mais produtivo, mas deve ser muito bem definido e documentado como será o agrupamento e qual será a ordem que estes agrupamentos aparecerão nos seletores. Além disso, deve-se ter certeza de que todas as propriedades foram devidamente mapeadas e agrupadas, para não se surpreender com uma propriedade “esquecida” e depois não conseguir saber onde irá colocá-la no seletor.

Um exemplo de agrupamento lógico:

.seletor {
    [fonte e propriedades de texto]
    [plano de fundo]
    [tamanho]
    [bordas]
    [espaçamentos]
    [posicionamento]
}

Com técnicas simples como esta é possível tornar o CSS mais funcional, semântico e compreensível, mantendo, principalmente, a flexibilidade do código.

Por Talita Pagani

Talita Pagani, 25 anos, mora em Bauru, interior de SP. Atualmente é Analista de Testes na MStech, atuando com projetos educacionais. Também trabalha como web designer desde 2005, mas começou a se interessar pela área em 2001. É graduada em Ciência da Computação e pós-graduanda em Gerenciamento de Projetos. Apaixonada por usabilidade, design de interface e padrões web.

http://www.twitter.com/talitapagani

Mais posts do autor

Comentários (43)

  • Pingback: Tweets that mention Organizando o código CSS | Boas práticas de Desenvolvimento com Padrões Web -- Topsy.com

  • http://marcos-paiva.deviantart.com/gallery/ Marcos Paiva

    Ótimo pra quem está começando…

    Uma ótima que eu destaco é a identação dos encadeamentos! isso facilita muito o trabalho!

  • Fred

    Simples e direto, como também muito útil.
    Maioria das técnicas eu já utilizava no meu dia-a-dia, fruto de várias horas/dias/anos de desenvolvimento web.
    Uma das técnicas que chamou minha atenção foi a questão da identação, que para mim é inovador.
    Belo artigo, parabéns. :)

  • Marcelo Moraes

    Muito bom o artigo. Já trabalho a alguns anos com CSS, e algumas dessas dicas vou começar a aplicar de acordo com a sua necessidade.

    Quem venham as próximas dicas.

  • http://www.twitter.com/fagnerbarboza Fagner

    Ótimo Artigo Talita, sucinto e prático, direto ao ponto,
    não só ótimo pra que está começando mas bom também pra dar uma revisada, que é o meu caso; fiquei algum tempo sem trabalhar com CSS.

    Grande Abraço!

  • Pingback: Estrategia para melhorar seu código CSS | Fhagner Duarte

  • http://vitorrubio.blogspot.com/ Vitor Rubio

    Muito legal o post. Tá nos favoritos com louvor ;)

  • http://behance.net/variant73 Adilson Porto

    Não ajuda tanto, a maioria é frescura, como organizar propriedades por órdem alfabética e a identação mais atrapalha do que ajuda. O principal não está aqui, q é a organização do site em varios css através da tag .

  • http://www.gabrielfam.com.br Gabriel FAM

    Ai que Delicious! kkk Já está nos favoritos.

    Adoro CSS e já aplico uma organização básica, agora vou melhorar mais com essas dicas.

    Valeu!!!

  • http://www.agemidia.com.br Fábio CS

    A organização por ordem alfabética foi algo que ajudou muito a diminuir o tempo de manutenção e reuso para projetos usando a mesma estrutura, reforço a dica ;)

  • http://profissionalinterativo.wordpress.com Emerson

    Belo artigo Talita, simples, prático e funcional!
    Já desenvolvi alguns projetos (pessoais) em que perdia um tempão para encontrar os elemento do CSS durante as manutencões do site. E quando pegava o CSS feito por outra pessoa? DAVA MEDO!rsrs

    Quando trabalhamos em projetos que envolvem diversas pessoas é muito importante estabelecermos padrões para desenvolvimento. Isso é muito útil em projetos web, já que um site nunca está 100% finalizado, pois sempre existe um upgrade daqui e outro dali!

    “Um dos princípios da web é ser coletiva, e para que o trabalho coletivo seja produtivo é preciso obedecer padrões” Minha autoria!hehe

  • Paulo Ries

    Ótimas dicas. Apenas um comentário pertinente aos desenvolvedores de grandes portais. A compactação do css otimiza bastante o carregamento da página, especialmente quando você muitos acessos simultâneos. A compactação pode reduzir em até 20% o tamanho do css. Existem sites e conversores que fazem esta compressão. É importante você ter o arquivo original todo organizado para fins de manutenção, mas criar uma versão e compactá-la antes de colocar em produção garante melhor performance e diminuirá a quantidade de tráfego mensal, uma vez que o css é carregado sempre que o site é aberto.

  • http://www.twitter.com/julianotheiss Juliano Theiss

    A técnica de utilizar duas classes para o mesmo elemento é interessante, apenas o nome ficou esquisito, semBorda é como chamar div pela cor.
    Outra coisa é utilizar maiusculas com minúsculas, normalmente para o código é recomendado usar sempre minúsculas, mas nesse caso seria a nomenclatura da classe, algo a se pensar.
    Concordando com alguns pontos, retrucando outros, é bom ver assuntos “práticos” novamente por aqui.

  • http://project47.viscountbox.com Carlos Eduardo

    Interessante compartilharmos métodos de organizar melhor nosso CSS.

    Não sou muito a favor de quebrar tanto o código, prefiro deixar uma regra por linha e nós, aqui na agência, estabelecemos um padrão de ordem das propriedades:

    http://www.webstandards.blog.br/checklist-para-desenvolvimento-css/#padroes-de-ordem-de-propriedades

    Há uma divisão lógica para esta ordem e com o passar do tempo fica memorizada…

    Além disso também não concordo em utilizar letras maiúsculas no nome das classes e id’s, além de atribuir algum nome relacionado a estilização visual.
    Faço de tudo, quebro a cabeça, até encontrar um nome semântico, até porque sempre deve haver um sentido para tal estilização :)

  • http://ricardomiranda.posterous.com/ Ricardo Miranda

    Talita,
    Parabéns pelo texto, super simples, prático e objetivo.
    Sempre procuro desenvolver o css num padrão que fique
    legível para as pessoas que estão envolvidas no projeto e
    as práticas que você citou já vinha aplicando, fico feliz
    por saber que estou indo por um bom caminho.

    Parábéns !!!

  • Pingback: Evitando Incompatibilidade entre Browsers | Boas práticas de Desenvolvimento com Padrões Web

  • Vivaldo Casimiro

    Parabéns pelo artigo, só vem reforçar a boa pratica na estruturação das folhas css.

  • http://www.theossi.com Felipe Theossi

    Thaiana parabéns pelo artigo…

    Tenho buscado referências para iniciar um trabalho de padronização na empresa onde trabalho, confesso que mesmo em ingles não achei nada tão completo e direto.
    Muito obrigado pelas dicas, e também gostaria de dar mais dois pitacos…

    1 – O Firebug tem diversos plugins (isso mesmo, plugin do pluguin rs) como o YSlow https://addons.mozilla.org/en-US/firefox/addon/5369/ que é bem util, qualquer coisa é só buscar no Google.

    2 – A adobe tem o BrowserLab https://browserlab.adobe.com/en-us/index.html que ajuda bastante nos teste de compatibilidade…

    É isso…
    Abraços

  • http://www.tarcisioestevam.com.br Tarcísio Estevam

    Muito bom o Post. Realmente ocódigo CSS pode se tornar um problema caso não seja pensada e planejada.

  • Pingback: Hystalo » Blog Archive » 6 dicas para evitar problemas de incompatibilidade entre browsers.

  • Pingback: www.andrebuzzo.com.br - André Buzzo - Webdesign - Salto/SP

  • Pingback: CSSDoc – padrão para documentação de folhas de estilo | Tableless - Desenvolvimento com Padrões Web

  • Fernando Couras

    Ótimo artigo!
    Meu comentário está meio atrasado mas ai vai algumas técnicas que gostaria de compartilhar.
    eu costumo utilizar classes fixas que auxiliam o desenvolvimento se parado por comentário
    /*CLASSES AXILIARES*/
    .Debug {border:red solid 1px}
    .Clear {clear: both;}
    /*/CLASSES AXILIARES*/
    etc…
    costumo diferenciar as formas de escrita de id e classes
    ids todos os caracteres minúsculos separados por hífen
    ex: #menu-global #formulario-contato etc…
    no caso de class uso iniciais maiúsculas sem separação
    ex: .BoxColor .Post etc…
    utilizo muito a class .Exception para diferenciar o estilo um único elemento do restante do grupo
    Ex: HTML

    texto
    texto
    texto
    texto

    CSS
    ul li {float:left; margin:10;}
    ul li.Exception {margin:0;}
    ul li.Exception2 {float:none;}

  • Pingback: Algumas dicas para evitar incompatibilidade entre os navegadores

  • Pingback: Fazendo seu blog WordPress abrir mais rápido » Difluir - www.difluir.com

  • http://gabrielpadilha.wordpress.com Gabriel Padilha

    Muito bom, eu como designer estou precisando a colocar a mão na massa, e esse comentário vai me ajudar muito.

    Parabéns Talita

  • newton negron

    very well… ótimo pra quem está a começar, “como o meu caso”. empregarei essas dicas step by step…

  • Adinan

    Para cada layout eu separo meus css em três arquivos:
    *tags,
    *ids,
    *classes

    acho que assim funciona bem.

    Costumo ordenara as propriedades assim:

    #meio {
    1°display, position, z-index, list-style
    2°width, height
    3°border, padding, margin
    4°font-size, font-family
    5°background
    }

  • Pingback: Quer ser bla bla bla? | Fabricio Sites

  • Pingback: Quero ser Desenvolvedor FrontEnd | Fabricio Sites

  • http://www.rafaelks.com Rafael Kellermann Streit

    Excelentes dicas! ;-)

    Valeu!

  • http://www.ligarone.com.br Eliane Garone

    ótimo post! já uso há um bom tempinho a maioria das dicas desse post, mas é sempre bom ler novamente. Quem sabe assim mais pessoas sigam essas dicas ;)

  • Edvaldo Szymonek

    Muito bom, sou iniciando e ajudou muito.

    Obrigado!

  • AdinanCenci

    eu organizo assim minhas propriedades:

    .classe-qualquer {
    position:
    top, left…:
    display:
    width, min-height…:
    border, margin, padding..:
    text, font-family….:
    background:
    }

  • Toninho

    Só não concordo com o agrupamento lógico, que na minha opnião tem de ser exatamente o contrario … rsrs …

    .seletor {
    [Posicionamento]
    [Espaçamento]
    [Bordas]
    [Dimensões]
    [Background]
    [Estilos de texto]
    }

    de resto muito bom post

  • Raphael Monte

    Parabéns pelo artigo Talita

  • Pingback: Mau cheiro em código css – Como sentir | Desenvolvedor FrontEnd - wbruno

  • Ricardo Nicz

    cara, foi um exemplo, o que ele quis dizer é que vc tem que seguir um padrão. Tem que ser 1,2,3,4,5, não as vezes 3,4,2,5,1 e depois 5,4,3,2,1

  • Pingback: Mau cheiro em código CSS – como sentir - iMasters

  • Pingback: HTML&CSS: Layout fixo de duas colunas « Tiago Sabadini