A importância de organizar seu CSS!

Renan Girotto — Mon, 09 Nov 2020 12:56:00 +0000

Desde que eu comecei a trabalhar como desenvolvedor front-end em 2017 uma coisa nunca mudou, sempre escrevi muito CSS.

E nos primeiros projetos, sendo bem mais simples, saber organizar o CSS que eu escrevia não era algo que me impactava em tempo e progressão de desenvolvimento, mas isso mudou muito quando comecei a pegar projetos mais parrudos e complexos, que tinham um escalonamento de componentes que sem uma organização complicam muito a minha vida (e de qualquer um que desse manutenção ao código).

E entender na prática que organização de código é algo que tem que ser feito me trouxe a vontade (bem recente aliás) de escrever este artigo para quem está começando a escrever CSS e para pessoas que olham para o CSS e dizem que nunca vão querer pôr a mão (um abraço pro meu amigo Rafael).

Então antes de falar sobre como organizar, acho que é importante falar de porque organizar!

Porque organizar seu CSS?

Folhas de estilos são bem propícios a crescerem muito e sem que nós percebamos. Varias vezes me peguei escrevendo meu CSS de boas e quando vou ver já estou nas 1000 linhas de código (juntando componentes ou tudo num doc só), e esse escalonamento pode se tornar uma dor de cabeça num documento sem organização.

Um exemplo (e infelizmente bem real) é quando você começa a dar manutenção em um código legado aonde o CSS foi escrito por desenvolvedores diferentes e sem uma documentação de padronização, e ai você se pega numa situação onde um componente está assim:

.component-1 {
   width: 300px;
   height: 200px;
   color: purple;
   display: flex;   
   flex-wrap: wrap;
   font-family: Arial, sans-serif;
}

E outro componente no mesmo documento que está assim:

.component-2 {
   display: flex;
   flex-wrap: nowrap;
   color: red;
   width: 200px;
   height: 600px;
   font-family: Helvetica, sans-serif;
}

Se nós percebermos, os componentes têm as mesmas propriedades, mas com divergência no "valor" delas e na ordem disposta dentro de cada componente.

E porque isso é ruim?

Neste exemplo eu criei dois componentes com 6 propriedades, mas eles poderiam ter muito mais do que isso. Em um deles as propriedades de tamanho (width e height) estão no começo, em outro estão no final, talvez num terceiro estejam no meio.

Essa procura de propriedades dentro dos componentes pode, a primeira vista, não parecer que influencia tanto na administração e manutenção do seu CSS, mas quando se trabalha com diversos componentes, em diversas folhas de estilo isso se torna um "esconde-esconde" cansativo.

E como organizar o seu CSS?

Organizar o CSS é algo que não tem "definição milagrosa", tudo é relativo a metodologia escolhida para o projeto, a organização do time e as boas práticas.

Mas ainda sim podemos destacar algumas formas de organizar as propriedades de seus componentes e acho interessante destacar duas delas.

1 - Por ordem alfabética

Conversando com um ex colega de faculdade, ele me disse que estava usando essa metodologia e estava gostando.

Ela tende a organizar as propriedades, assim como o nome diz, por ordem alfabética, e aqui tem um exemplo (com uma porrada de propriedade) pra você ter uma noção:

.component {
   background: purple;
   color: white;
   font-size: 1.6rem;
   font-weight: 500;
   height: 200px;
   left: 0;
   margin: 16px;
   padding: 0 20px;
   position: absolute;
   top: 0;
   width: 300px;
   z-index: 1;
}

Essa estratégia se tornou comum entre desenvolvedores principalmente pelo fato de uma ordem alfabética ser universal, ou seja, independente do time/projeto você sempre conseguirá seguir a mesma regra.

E tem algum ponto negativo?

Não existem pontos negativos a ponto de tornar essa metodologia ruim, mesmo sem ter usado ela para desenvolvimento, acredito que a única parte que pode causar uma estranheza é o fato de propriedades que logicamente fariam sentido estarem juntas (como no exemplo anterior com left e top) estão mais distantes.

Uma observação rápida!

E como eu lido com prefixos como o -webkit-?
Neste caso o correto seria "ignorar" o prefixo na hora de pensarmos na ordem alfabética, o que nos deixaria com exemplos como este:

.component {
   padding: 16px;
   -webkit-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;
   z-index: 1;
}

2 - Por agrupamento lógico

Este método já é meu favorito (e que venho usando em meus projetos a um tempo).

Diferente do método por ordem alfabética este tende a criar agrupamentos de propriedades de acordo com sua função lógica.

Nós sabemos que existe uma porrada de propriedades CSS por aí, e organizar elas por tipo (para quem está pegando CSS agora) pode ser um pouco confuso(?).

Aqui tem um belo exemplo retirado do post How do you order your CSS properties? pelo css-tricks

.component {
   /* Positioning */
   position: absolute;
   z-index: 10;
   top: 0;
   right: 0;

   /* Display & Box Model */
   display: inline-block;
   overflow: hidden;
   box-sizing: border-box;
   width: 100px;
   height: 100px;
   padding: 10px;
   border: 10px solid #333;
   margin: 10px;

   /* Color */
   background: #000;
   color: #fff

   /* Text */
   font-family: sans-serif;
   font-size: 16px;
   line-height: 1.4;
   text-align: right;

   /* Other */
   cursor: pointer;
}

Mas, também existem outros exemplos de agrupamentos como no caso deste guia feito pela 9elements.

E tem algum ponto negativo?

Se nós repararmos nos exemplos de agrupamentos tanto da css-tricks quanto na 9elements poderemos ver que existem divergências de agrupamentos, como por exemplo a propriedade color, que em um está agrupada como COLORS e no outro como TYPOGRAPHY

Ou seja, quem for dar a manutenção teria que ver qual foi a forma de agrupamento que foi escolhida pelo time (ou dev anterior) e seguir ela (ou meter o louco e reescrever tudo).

Uma observação rápida!

Dentro dos agrupamentos, não existe uma ordem para você organizar as propriedades, você pode fazer tanto:

.component {
   font-family: Arial, sans-serif
   font-weight: 500;
   font-size: 16px;
}

Ou se preferir:

.component {
   font-size: 16px;
   font-family: Arial, sans-serif
   font-weight: 500;
}

Mas o correto, e que deve ser seguido, seria que a ordem escolhida seja utilizada em todos os componentes, assim não voltamos a desorganização que comentei no começo do texto.

Conclusão

No final das contas, não existe método perfeito, não existe método correto, não existe solução milagrosa.

Você como um ótimo e organizado desenvolvedor (mesmo que sua área de trabalho seja uma zona eu sei que você é organizado) vai querer sempre procurar boas práticas e alinhamento com seu time para deixar o escalonamento do seu CSS o mais prático e organizado, independente se for fazer por ordem alfabética ou agrupamento.

E se você pegar um código legado muito, mas muito bagunçado mesmo, não se desespere e saia correndo (mesmo que de vontade). Pense na melhor forma de começar a organizar novos componentes e vá corrigindo os anteriores conforme for dando manutenção, melhorando a escalabilidade do projeto e facilitando a sua vida.

DEV Community: Renan Girotto

A importância de organizar seu CSS!

Porque organizar seu CSS?

E porque isso é ruim?

E como organizar o seu CSS?

1 - Por ordem alfabética

E tem algum ponto negativo?

Uma observação rápida!

2 - Por agrupamento lógico

E tem algum ponto negativo?

Uma observação rápida!

Conclusão