Hello, SMACSS!
Pensando em um cenário da qual o time não sabe como será o tamanho do projeto é notório que alguns dev’s comecem a escrever CSS sem avaliar a longo prazo como isso poderá ficar e com isso obviamente será necessário fazer uma nova re-escrita de CSS para facilitar o processo de manutenção das folhas de estilos do projeto.
Foi pensando nisso que Jonathan Snook criou o SMACSS da qual ele visa que você pode adota-lo independente do tamanho do seu projeto. Basicamente seu conceito é exclusivamente tratar da separação de diretórios para organizar melhor o CSS, a partir disso você ganha alguns pontos extras na vida do projeto como:
- Escalabilidade,
- Manutenibilidade
- Modularidade
- Otimização
- Especificidade
Sobre **escalabilidade**, seu projeto pode crescer de tamanho a qualquer momento que você conseguirá escalar ele sem problemas pois ele foi pensado para isso, desde o seu inicio, lembre-se dessa frase do Jonhn Resig — Write less, do more!.
Sobre **especificidade**, quando varremos alguns projetos de CSS por aí é notório encontrar **!important** perdidos pelas folhas de estilo, pois provavelmente você perdeu a regra de especificidade do elemento que estava tentando customizar.
Sobre **modularidade**, precisa ficar claro para o time que sua folha de estilo ofereça isso, pois assim pode reaproveitar o estilo do seu componente em outras páginas (reaproveitamento).
Sobre **manutenibilidade**, cogite que você esteja trabalhando com um único arquivo de 1500 linhas e a cada alteração essa classe deveria repercurtir por todo o projeto e aí você descobre que não ocorre! Aí, surge a sua pergunta, quais são as classes que manipula esse elemento que é idêntico a este que estou alterando?
Sobre **otimização**, se o seu CSS estiver organizado, possivelmente o render do browser será muito mais fácil, pois irá fazer a leitura adequadamente e garantindo assim um “cross-browser” mais assertivo, lembre-se **Normalize & RESET**, é apenas o primeiro passo para garantir cross-browser, os outros 99% do projeto está na sua forma de escrever o CSS.
Sobre tudo, o SMACSS não fornece um padrão de nomenclatura, o foco dele é **dividir para conquistar** e com isso ele deixa livre á sua escolha qual será a forma de escrita de seu CSS. Como estamos pensando em projetos de médio e grande porte vamos considerar adotar uma metodologia que seja usual e que qualquer pessoa do time que venha a escrever algo no CSS consiga perpetuar este padrão, certo!?
Sendo assim, recomendo fortemente que adote o padrão de nomenclatura BEM, em outra oportunidade falarei como ele funciona, mas basicamente seguindo a citação do próprio site:
A metodologia BEM foi inventada por Yandex para desenvolver sites que devem ser lançados rapidamente e suportados por um longo tempo. Ele ajuda a criar componentes de interface extensíveis e reutilizáveis.
Outro ponto importante para que o SMACSS funcione adequadamente e faça os **imports** dos diretórios do seu CSS adequadamente é que adote um pré-processador como Sass ou Stylus pois assim conseguirá fazer os importação do arquivos sem problema.
Regra geral para SMACSS: BEM + Pré-Processador = 100%
Voltando ao SMACSS, falamos que basicamente seu conceito é fazer separação de diretórios e quais são esses diretórios?
__base
__ layout
__ module
__ state
__ theme
**base**
Seria seus arquivos base da sua aplicação, o que é comum para todo o seu layout como Reset e Plugins.
**layout**
Seria a parte da estrutura do seu projeto, aqui entrará o CSSGrids, FlexBox, Position, Header, Footer e Section.
**module**
Essa é a parte mais importante onde fica seus componentes como formulários, botões, tipografia, cores e etc.
**state**
Aqui controlamos o estado do nosso componente, pense no hover, active, disabled é a parte do comportamento do componente sobre a ação do usuário, abaixo segue exemplo:
**theme**
Aqui é onde você pode criar temas pensando em:
theme-clean (pessoas que **preferem** layout mais claro)
theme-dark (pessoas que **preferem** layout mais escuro)
É válido avaliar que durante todo o seu projeto deve ser considerado acessibilidade e essa parte o theme é de suma importância. Aqui você altera as cores prevendo como deveria se comportar o layout para pessoas com deficiência visual ou luminosidade do ambiente. Por default esse diretório não é obrigatório para usar o SMACSS mas ele já prevê isso para você caso seja necessário! ;)
Antes de concluir devo reforçar que a hierarquia dos diretórios devem respeitar essa ordem caso contrário você irá perder a cascata (cascading) e a herança (inheritance) que o CSS prevê, geralmente é o que mais complica a vida dos desenvolvedores para organizar os elementos de forma eficaz.
E com isso concluímos o que precisamos saber sobre SMACSS!
That’s all folks!
