Skip to content

Instantly share code, notes, and snippets.

@jean-cap
Last active July 5, 2018 18:18
Show Gist options
  • Save jean-cap/bff76e866d3f114b92a949c900ec42cd to your computer and use it in GitHub Desktop.
Save jean-cap/bff76e866d3f114b92a949c900ec42cd to your computer and use it in GitHub Desktop.
Como criar um projeto CSS organizado.

Modelo a seguir ao iniciar um novo projeto CSS do zero

Ao iniciar um projeto CSS, seguir alguns padrões para manter a organização.

Início do projeto

  • reset (zerar os estilos para iniciar um novo projeto);
  • base (criar a base do projeto,geralmente composto por header, main, footer e demais estruturas base);
  • components (define o estilo para cada componente de forma isolada, assim como seus estados de interação);
  • form (define o estilo pra todos os objetos de formulário, assim como seus estados de interação);
  • tipografia (define o estilo para todos os objetos textuais, assim como fontes externas e icon fonts).

Nomenclatura

Utilizar prefixos para os componentes. Exemplo:

<!-- botão -->
<a class="btn"></a>

A classe btn conterá as regras comuns a qualquer botão.

<!-- botão primário -->
<a class="btn btn-primary"></a>

A classe btn-primary conterá regras mais específicas.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment