“De Fora Para Dentro” — Ordenando Propriedades CSS por Importância

() translation by (you can also view the original English article)

Esse artigo é inteiramente sobre estruturação de código CSS - especificamente sobre um método que tenho usado pelos últimos anos, que traz uma certa lógica e consistência para a ordem que uso na criação do meu CSS. É um método que chamo de “De Fora Para Dentro”.

Ordem de Declaração?

No passado, vi várias abordagens em relação à escrita do CSS. Algumas pessoas não usam qualquer ordem em particular, outras colocam as propriedades em ordem alfabética e já vi até alguns casos de organização pela quantidade de caracteres que cada par propriedade:valor possui!

Uma antiga lá no CSS-Tricks trouxe uma pergunta em que a maioria das respostas me deixou bastante surpreso: 39%, de mais de 11.000 pessoas, responderam não usar qualquer método específico na hora de ordenar o CSS.

How do you order your CSS properties — Como você ordena suas propriedades CSS? Total de Votos: 11,093

Agrupamento por tipo coloca height bem próxima de width. Alfabeticamente, veríamos declarações listadas desde a background até a z-index, por exemplo.

Eu uso o método de agrupamento por tipo - embora eu use uma ordem bem específica para ordernar cada grupo!

Fora o “método aleatório”, há um certo nível de ordem em todas as abordagens. Mas essa ordenação não reflete algo necessariamente, ou particularmente, útil em relação à estilização de sites.

Se você buscasse coletar dados sobre a altura dos estudantes de uma determinada sala, ordená-los pelos comprimentos faz sentido. Se estiver categorizando uma coleção de DVDs, ordernar alfabeticamente também faz todos o sentido. Mas, ordernar as propriedades CSS dessa forma, tem algo a ver com a ordem de importância delas ao serem aplicadas pelo navegador?

Ao ordernar alfabeticamente, a propriedade color de um elemento é mais importante que sua propriedade width? A border-style de um elemento é mais importante que o elemento estar, ou não, no fluxo normal de um documento? Eu diria que não.

De Fora Para Dentro

O método que acabei adotei é através do impacto que as propriedades causam sobre o elemento em si e os ao redor dele. A essência da técnica é começar com as propriedades que causam mais impacto fora do elemento e seguir até chegar ao centro do mesmo, nos detalhes mais internos. E é por isso que chamo esse método de “De Fora Para Dentro”.

As propriedades position e float removem o elemento do seu fluxo normal e causam um grande impacto sobre outros elementos ao redor do elemento em foco. Isso é algo importante e acredito que devemos torná-lo bem visível, colocando-as logo no início do bloco de propriedades do elemento.

Controlar coisas como o cursor ou overflow de um elemento é, geralmente, menos importante e, por isso, tendo a deixá-las mais para o fim.

A ordem que uso é a seguinte:

Propriedades de Layout (position, float, clear, display)
Propriedades do Modelo de Caixa (width, height, margin, padding)
Propriedades Visuais (color, background, border, box-shadow)
Propriedades Tipográficas (font-size, font-family, text-align, text-transform)
Outros Propriedades (cursor, overflow, z-index)

Eu sei que a border se relaciona ao modelo de caixa, e que a propriedade z-index se relaciona ao posicionamento, mas essa ordem funciona muito bem para mim. Mesmo eu não gostando da ordenação alfabética, há algo que faz todo o sentido em manter o z-index lá no final...

Exemplo Prático

Vejamos como estilizar um módulo de botão.

Começaremos com uma nomenclatura de classe semântica e legal: .button. Particularmente, não curto contrações, como .btn, prefiro as versões longas e mais descritivas sempre que possível - é apenas minha preferência, logo, para você pode ser diferente :)

1	/* <a href="#" class="button">Peça agora →</a> */
2	.button { }

Queremos manipular o espaçamento vertical ao redor do botão e, para isso, teremos de alterar a propriedade display de inline (o padrão para âncoras) para inline-block.

Para permitir que o botão cresça em largura de acordo com o conteúdo textual, a propriedade inline-block é uma escolha mais flexível que float junto a uma width configurada.

1	.button {
2	display:inline-block;
3	}

Depois disso, precisaremos adicionar algumas características do modelo da caixa, como margens e espaçamento interno (padding). Como as margens estão do lado de fora da caixa e estamos indo “De Fora Para Dentro”, elas vem primeiro.

.button {
display:inline-block;
    margin:1em 0;
    padding:1em 4em;
}

A próxima coisa a adicionarmos são as cores. Para separar cada grupo de propriedades, gosto de deixar uma linha em branco entre eles, permitindo que cada grupo fique mais vísivel.

.button {
display:inline-block;
    margin:1em 0;
    padding:0.5em 3em;

    color:#fff;
    background:#196e76;
}

Agora, adicionaremos as bordas e sombras para dar profundidade. Então, adicionaremos as propriedades tipográficas, novamente, separando através do uso de uma linha em branco.

.button {
display:inline-block;
    margin:1em 0;
    padding:1em 4em;

    color:#fff;
    background:#196e76;
    border:0.25em solid #196e76;
    box-shadow:inset 0.25em 0.25em 0.5em rgba(0,0,0,0.3),
               0.5em 0.5em 0 #444;

    font-size:3em;
    font-family:Avenir, Helvetica, Arial, sans-serif;
    text-align:center;
    text-transform:uppercase;
    text-decoration:none;
}

Lendo o Código

Um dos benefícios em se aplicar um sistema como esses é que, uma vez implementado, remove a necessidade de pensar demais nas coisas. Se estou lendo meu código e quero alterar algo relacionado às propriedades mais impactantes do lado de fora do elemento, como a width ou position, sei exatamente onde procurar: logo no topo do conjunto de propriedades. Se eu quero ajustar algo como a text-transform ou list-style, já olharei mais do meio para baixo do bloco.

Ter o código estruturado dessa forma também vem a calhar quando outras pessoas estiverem lendo seu CSS. Se se depararem com código organizado dessa forma, é bem fácil ver todas as partes que compoem o módulo do botão. Ao criar códigos, é importante tornar o mais fácil possível para outros desenvolvedores lerem. Isso torna o código mais entendível e manutenível.

Preprocessadores

Usei CSS puro para explicar meus métodos aqui, mas você pode aplicar o método “De Fora Para Dentro” com Sass, LESS ou Stylus, também.

Conclusão

Condificar CSS pode ser algo bem pessoal. Se você usa algum método diferente para organizar seu CSS, seria bem interessante saber sobre ele! Deixe um comentário e continue a discussão.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!