7 Regras Para Desenvolver Um CSS Inteligente e Robusto

Assim como nós estilizamos .myapp-Header > a, quando nós aninhamos componentes, talvez iremos precisar aplicar alguns estilos para componentes filhos, imagine o seguinte cenário:

+---------------------------------+
| Header           +------------+ |
|                  | LoginForm  | |
|                  |            | |
|                  | +--------+ | |
| +--------+       | | Button | | |
| | Button |       | +--------+ | |
| +--------+       +------------+ |
+---------------------------------+

De primeira, fica claro que estilizar .myapp-Header .myapp-Button é uma má ideia, na verdade nós queremos .myapp-Header > .myapp-Button. Mas, nesse caso, quais estilos nós queremos aplicar para nossos elementos filhos?

Note que, o LoginForm está encaixado do lado direito do Header. Intuitivamente, um dos estilos seria:

.myapp-LoginForm {
  float: right;
}

Nós não violamos nenhuma de nossas regras, mas também, deixamos o LoginForm bem mais difícil de se re-usar: Se uma página qualquer quiser usar o LoginForm, mas sem o float: right, estamos sem sorte!

A solução pragmática para isso (parcialmente), é modificar nossa declaração anterior para aplicar os estilos somente no escopo que ele precisa. Ficando assim:

.myapp-Header {
   > .myapp-LoginForm {
   float: right;
 }
}

De fato, isso até certo ponto está certo, só não podemos quebrar os estilos do componente em si:

// NÃO FAÇA ISSO
.myapp-Header {
   > .myapp-LoginForm {
     color: blue;
     padding: 20px;
   }
}

Nós não queremos permitir isso, com o código acima, LoginForm.scss não é mais o único lugar que você precisaria olhar para ver as modificações na aparência do componente LoginForm.

Fazer mudanças dessa maneira volta a ser frágil, aquela sensação de que algo pode sair errado. Então, onde é que nós traçamos a linha do que pode ou não pode ser modificado?

Nós queremos respeitar os limites internos de cada componente filho, já que não queremos saber sua implementação interna. É uma caixa preta que não precisamos saber.

Agora, o que está fora do componente filho, é a área do componente pai. A distinção entre dentro e fora vem de um dos conceitos mais fundamentais do CSS: o box-model.

Só significa que você está dentro de um país, quando você passa suas bordas.

Estabeleceremos aqui que, um elemento pai pode afetar os estilos dos seus elementos filhos diretos até a borda do seu país.

Isso quer dizer, ele deve se limitar as declarações de posicionamento e dimensão (tais como position, margin, display, width, float, z-index, etc) e propriedades que vão além da borda (tais como border, padding, color, font, etc) estão fora de questionamento.

Para deixar claro, aqui vai mais um exemplo do que não deve ser feito:

// NÃO FAÇA ISSO
.myapp-Header {
   > .myapp-LoginForm {
     > a {
      // precisa saber a implementação do LoginForm ;__;
      color: blue;
     }
   }
}

Claro que, existem alguns casos extremos como: