[CSS] Vamos organizar nosso CSS?

Um CSS mal arquitetado pode ser uma dor de cabeça. Como tudo nele é global, pequenas mudanças tornam-se complicadas. Claro que processadores como SASS facilitam muito, mas uma metodologia bem aplicada é o que realmente faz a diferença na escalabilidade e manutenibilidade do seu CSS.

Das diversas metodologias que existem, vamos falar sobre o BEM (Block, Element, Modifier), que tem como objetivo organizar as classes por funções:

  • Block: É um componente de UI (por exemplo, um formulário);
  • Element: É um componente de um Block (por exemplo, um input, botão ou label de um formulário);
  • Modifier: É uma mudança que ocorre na apresentação de um Block ou Element (por exemplo um botão ativo ou pressionado);
Por convenção temos a seguinte sintaxe:

.block /* -> Um Block. */
.block__element /* -> Um Element que pertence à um Block. */
.block--modifier /* -> Um Modifier de um Block. */
.block__element--modifier /* -> Um Modifier de um Element. */

A principal ideia por trás do BEM e de outras metodologias é basicamente evitar a “herança” nas classes, por exemplo:

.todoform .task .error { }

Então, bora ver um exemplo mais completo:

<form class="todoform todoform--errors">
  <label for="task" class="todoform__task todoform__task--error">
    Nova tarefa: <input type="text" name="task" />
  </label>


  <button type="submit" class="todoform__btn todoform__btn--disabled">
    Adicionar
  </button>
</form>

Temos um block “todoform” que pode conter modifiers “todoform--erros”. Só olhando para esse trecho, já sabemos que o formulário é para cadastro de um “to-do” e ele tem uma classe de erro que indica quando algo está errado no formulário.

Logo em seguida um label e seu input categorizam-se como um element do block “todoform” com seu modifier de erro e um botão do mesmo block com um modifier mostrando se o botão está desativado.

Como podemos reparar, o HTML e CSS ficam muito mais didáticos. É mais simples entender o que cada componente leva em sua estilização e também bem mais fácil de realizar modificações.

Agora quando falarem que o “hover” daquele botão X está com uma cor esquisita, você consegue ir diretamente no problema e alterá-lo sem nenhum efeito colateral. É isso ai, abraços!