Escrever CSS é um processo bastante simples e direto; por que isso exige mais alguns princípios e práticas recomendadas?
À medida que a escala do projeto e o número de pessoas trabalhando nele aumentam, mais e mais claramente começam a surgir novas dificuldades que podem causar sérios problemas no futuro. Duplicação de código, propriedade complexa substituindo cadeias, usando! Importante, propriedades CSS restantes e não utilizadas de elementos HTML remotos, etc. Esse código é mais difícil de ler e corrigir.
Escrever CSS de maneira profissional tornará o código mais sustentável, extensível, compreensível e limpo. Vejamos 5 princípios simples e muito eficazes que levam seu CSS ao próximo nível.
Princípio de nomeação
“Na ciência da computação, existem apenas duas coisas complexas: invalidação e nomeação de cache” - Phil Carleton
Nomear e estruturar adequadamente seus seletores de CSS é o primeiro passo para tornar seu CSS mais legível, estruturado e limpo. Definir regras e restrições em uma convenção de nomenclatura torna seu código padronizado, confiável e fácil de entender.
É por isso que conceitos como
BEM (Modificador de elemento de bloco) ,
SMACSS (Arquitetura escalável e modular para CSS) e
OOCSS (CSS orientado a objetos) são populares entre muitos desenvolvedores de front-end.
Princípio de baixa especificidade
Substituir propriedades CSS é muito útil, mas em projetos mais complexos, as coisas podem sair de controle rapidamente. Substituir cadeias pode se tornar muito longa e complexa, o que forçará você a usar
!important para resolver problemas de especificidade, que podem ser facilmente perdidos ao depurar código ou adicionar novas funções
.card {} .card .title {} .blog-list .card img {} .blog-list .card.featured .title {} #js-blog-list .blog-list .card img {}
Navegador e especificidade
Um dos benefícios de seguir o princípio da baixa especificidade é o desempenho. Os navegadores analisam o CSS
da direita para a esquerda .
Vamos dar uma olhada no seguinte exemplo:
.blog-list .card img {}
Os navegadores “lerão” o seletor da seguinte maneira:
- Encontre todas as tags <img> em uma página
- Neles, selecione os elementos descendentes da classe .card
- Neles, selecione os elementos descendentes da classe .blog-list
Você pode ver como os seletores com alta especificidade afetam o desempenho, especialmente quando precisamos selecionar globalmente um elemento comum como
div ,
img ,
li , etc.
Usando o mesmo nível de especificidade
Usando seletores CSS com baixa especificidade combinada com a metodologia BEM ou um dos outros princípios de nomeação mencionados na seção anterior, podemos criar código poderoso, flexível e fácil de entender.
Por que usar classes CSS? Queremos aderir ao mesmo nível de especificidade, mantendo a flexibilidade e a capacidade de selecionar vários elementos. Os seletores de elemento e de identificação não fornecem a flexibilidade de que precisamos.
Vamos reescrever o exemplo anterior usando o BEM e mantendo a baixa especificidade.
.card {} .card__title {} .blogList__image {} .blogList__title--featured {} .blogList__img--special {}
Você pode ver como esses seletores são mais simples, mais claros e podem ser facilmente redefinidos e estendidos, se necessário. E mantendo sua especificidade baixa (a única classe), garantimos desempenho e flexibilidade ideais.
Princípio DRY
O princípio DRY (não se repita, rus. Não repita) também pode ser aplicado ao CSS. A duplicação no CSS pode levar a inchaço do código, substituições desnecessárias, suporte inadequado etc. Esse problema pode ser corrigido com estrutura de código adequada e documentação de qualidade.
O Storybook é uma ótima ferramenta gratuita que permite criar uma visão geral dos componentes disponíveis da interface da web e escrever documentação de qualidade.
.warningStatus { padding: 0.5rem; font-weight: bold; color: #eba834; } .errorStatus { padding: 0.5rem; font-weight: bold; color: #eb3d34; } .form-errorStatus { padding: 0.5rem 0 0 0; font-weight: bold; color: #eb3d34; }
Vamos refatorar o código seguindo o princípio DRY
.status { padding: 0.5rem; font-weight: bold; } .status--warning { color: #eba834; } .status--error { color: #eb3d34; } .form__status { padding: 0.5rem 0 0 0; }
Princípio da responsabilidade exclusiva
Usando o princípio de responsabilidade exclusiva no CSS, você pode ter certeza de que as classes CSS são facilmente extensíveis e redefinidas. Vejamos o exemplo a seguir
.button { padding: 1rem 2rem; font-size: 2rem; border-radius: 0.2rem; background-color: #eb4934; color: #fff; font-weight: bold; } .button--secondary { border-radius: 0; font-size: 1rem; background-color: #888; }
Pode-se observar que, se você precisar expandir a classe
.button usando o modificador
.button - secundário , precisará executar várias substituições, embora desejemos apenas alterar a cor do plano de fundo, mantendo os estilos padrão.
O problema é que nossa classe .button tem várias funções:
- Define um modelo de bloco ( preenchimento )
- Define tipografia ( tamanho da fonte, peso da fonte )
- Determina a aparência ( cor , cor de fundo , raio da borda )
Isso complica a extensão da classe CSS e sua integração com outras classes. Com isso em mente, vamos melhorar nosso CSS com BEM e OOCSS.
.button { padding: 1rem 2rem; font-weight: bold; color: #fff; } .button--radialBorder { border-radius: 0.2rem; } .button--large { font-size: 2rem; } .button--primary { background-color: #eb4934; } .button--secondary { background-color: #888; }
Dividimos os estilos do nosso
botão em várias classes que podem ser usadas para estender a classe base. Se necessário, podemos aplicar modificadores e adicionar novos à medida que o design muda ou novos elementos são adicionados
O princípio da abertura / proximidade
As entidades de software (classes, módulos, funções etc.) devem estar abertas para extensão, mas fechadas para alteração ”Já usamos o princípio aberto / fechado nos exemplos anteriores. Todos os novos recursos e opções devem ser adicionados por extensão. Vamos olhar para este exemplo.
.card { padding: 1rem; } .blog-list .card { padding: 0.5em 1rem; }
O
seletor .card-list .list tem vários problemas em potencial:
- Alguns estilos podem ser aplicados apenas se o elemento .card for filho do elemento .blog-list
- Os estilos são aplicados no elemento .card se ele for colocado no elemento .blog-list , o que pode levar a resultados inesperados e substituições desnecessárias
Vamos reescrever o exemplo anterior:
.card { padding: 1rem; } .blogList__card { padding: 0.5em 1rem; }
Corrigimos o problema se usarmos um único seletor de classe. Com esse seletor, podemos evitar efeitos inesperados e não usar estilos aninhados condicionalmente.
Em conclusão
Examinamos exemplos de como a aplicação desses poucos princípios simples pode melhorar significativamente a abordagem para escrever CSS:
- Nomeação e estrutura padronizadas, melhor legibilidade usando BEM, OCSS, etc.
- Melhor desempenho e estrutura usando seletores de baixa especificidade
- Inchaço reduzido e qualidade de código aprimorada usando o princípio DRY
- Flexibilidade e manutenção usando o princípio aberto / fechado
Obrigado por ler este artigo. Se achar útil, você pode compartilhá-lo ou deixar um comentário.