Organizando seu código CSS parte 02
Continuando a série sobre os padrões de escrita da linguagem CSS, esse post é o segundo da série, caso você perdeu e queira ver o primeiro:
Onde é mencionado e descrito o padrão OOCSS.
Qual padrão devo seguir para escrever e organizar meu código CSS ?
Entre os padrões mencionados no primeiro post, iremos abordar os seguintes: SMACSS, OOCSS, BEM e DRY CSS, nesse post, irei falar sobre o SMACSS.
SMACSS
Criado pelo desenvolvedor canadense Jonathan Snook, que percebeu que a maneira como o CSS era escrito e gerenciado poderia ser melhorado, com tamanha indignação e com intuito de auxiliar seus colegas desenvolvedores e também a si mesmo, decidiu normatizar determinadas regras para que a melhoria fosse possível. Em 2011, dois anos depois do surgimento do OOCSS surgiu o SMACSS (pronuncia-se “smacks).
SMACSS(Scalable and Modular Architecture for CSS ou Arquitetura Escalável e Modular para CSS) esta mais para uma normatização do que para invenção, nas palavras do próprio Jonathan:
Está mais para um guia do que para um framework.
Não trata-se de nenhum arquivo que precisa ser baixado ou instalado, não precisa ser seguido à risca, pode ser mesclado com outros padrões, assim você consegue criar e definir a melhor forma que você irá escrever e organizar seu código CSS.
Conhecendo o SMACSS
Um dos primeiros conhecimentos que se adquire em SMACSS é a respeito da estrutura e organização de seus arquivos que, basicamente, divide-se em cinco categorias, sendo elas:
- Base
- Layout
- Module (Módulo)
- State (Estado)
- Theme (Tema)
Base
Regras padrões.
Layout
Regras que definem a forma visual de um elemento, sem impactar em sua semântica ou estrutura.
Módulo
Regras que são as principais de um projeto, as que dão o “volume” de CSS.
Estado
Regras que descrevem como determinado layout ou módulo comporta-se em determinada condição ou estado, por exemplo: ativo ou inativo, oculto ou visível.
Tema
Regras similares ao Estado, porém, descrevem como os layouts ou módulos devem ser visualmente em determinadas situações.
Organização
Neste momento, com a divisão das cinco categorias informadas e descritas, devemos separar nosso código CSS em vários arquivos, cada um em suas respectivas categorias. Com essa organização conseguimos diminuir a repetição de códigos e regras CSS já utilizadas, sendo assim, consequentemente nosso código irá ficar mais fácil para ser mantido(manutenção) e atualizado(criação).
Nomenclaturas
Ao utilizar SMACSS devemos respeitar a nomenclatura e certas regras, baseado nas cinco categorias já mencionadas, facilitando a identificação de qual categoria pertence determinada regra (seletor) CSS.
Convencionalmente foi definido a ideia de utilizar prefixos para realizar a separação entre: Layout, Módulo e Estado, sendo eles:
- Usar
l-oulayout-para Layouts - Usar
is-para Estados - Não usar
m-oumodule-para Módulos, pois como são as maiores folhas de estilo e sendo assim os mais utilizados, torna-se desnecessário a repetição de escrita dos prefixos.
Exemplos
Base
São regras aplicadas utilizando os seguintes seletores: elemento, descendente, filho ou pseudoclasses. Logo podemos ver que não esta incluso utilizar os seletores de id ou classe.
Servem para definir como será a aparência padrão de determinados elementos que aparecem na página, em outras palavras, podemos dizer que aqui se encaixa o Reset CSS:
Layout
Como já mencionado, os layouts são escritos baseando-se em seu prefixo, sendo ele o l- seguido pelo layout que deseja-se aplicar ao elemento:
Modulo
Os módulos são escritos apenas pelo nome do elemento que esta sendo aplicado a regra css:
Estados
Como já mencionado, os estados são escritos baseando-se em seu prefixo, sendo ele o is- seguido pelo estado que deseja-se aplicar ao elemento:
Temas
O significado de tema em SMACSS é o mesmo que em qualquer outro site: Um conjunto de cores, imagens e elementos que compõem uma determinada página.
A ideia dos temas é que um arquivo realize a sobrescrita das regras de outro tema, vamos imaginar que em uma determinada pasta temos:
Veja que temos um .css para cada tema, dentro deles os seletores devem ser os mesmos:
Assim podemos importar determinado arquivo para utilizar determinado tema, onde não será necessário realizar mudanças na estrutura do HTML ou CSS.
Conclusão
SMACSS é um padrão flexível, elaborado com base em anos de observação e experiência em projetos de alto nível. Se esse foi seu primeiro contato com o mesmo, aconselho realizar experiências e práticas em seus projetos para verificar os resultados, certamente terá um ganho na organização e produtividade.
Referências:
Publicado em blog.matheuscastiglioni.com.br.
