SMACSS

Scalable and Modular Architecture for CSS, ou SMACSS para os mais íntimos é uma arquitetura CSS, ou seja, ela serve para estruturar e organizar seu código.

As regras do smacss irão dividir seus estilos em 5 tipos, que são:

1. Base

É onde você vai utilizar seletores de atributos, de classes e outros seletores mais genéricos para definir estilos globais para sua aplicação. Ex: reset.css.

2. Layout

São as áreas mais abrangentes da sua página, como por exemplo o header, aside e footer.
Nas suas regras de layout você deve utilizar o prefixo "layout" ou o namespace "l".
Ex: l-header{}, layout-header{}.

2. Modules.

Também conhecidos como components, é a categoria em que a maior parte do seu código vai se encaixar, por exemplo, um card ou um botão fará parte dessa regra.
Nos seus modules você deve utilizar o prefixo "module" ou o namespace "c", ou até mesmo não utilizar nada.
Ex: module-card{}, c-card{}, card{}.

4. State

Os states têm como regra a utilização do prefixo “is” seguido do estado do componente ou layout. Ex: is-active{}.
Caso seja um state exclusivo de um único componente ou layout, pode ser utilizado do seguinte modo: is-menu-open{}.

5. Theme

As regras de tema servem para sobrescrever regras base da página, como por exemplo temas dark e light. Seguindo a regra de cascata do CSS os temas devem ser importados depois das outras regras de CSS, para assim substituir os estilos.

Ao adicionar o SMACSS nos seu projetos você vai elevar o nível do seu código, deixando-o muito mais profissional. Busque separar seu código em pastas correspondentes a cada regra, uma para layout, outra para modules(components), etc.

Quer se aprofundar no tema? Vou deixar algumas das referências que eu tive para escrever este post:

SMACSS: A Arquitetura CSS Mais Conhecida, Site oficial do SMACSS