A importância de organizar seu CSS!
Tags: css, webdev, codenewbie, codequality
Published: 2020-11-09 12:56:00

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:

```css
.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:

```css
.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:

```css
.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:

```css
.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](https://www.w3schools.com/cssref/) 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?](https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/) pelo [css-tricks](https://css-tricks.com/)

```css
.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](https://9elements.com/css-rule-order/) feito pela [9elements](https://9elements.com/).

#### **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:

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

Ou se preferir:

```css
.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.