Code Standard: Escrevendo CSS com estilo

A escrita de css vem ganhando inteligência com processadores como SASS e LESS e facilitando o desenvolvimento de projetos com frameworks como o bootstrap. utilizando estas ferramentas, em pouco tempo já temos uma view estruturada e responsiva. No entanto, é importante ressaltar que num futuro próximo, esta “facilidade” de escrever e alterar propriedades numa regra de estilo, poderá se tornar um pesadelo em seu projeto, com um arquivo de milhares de linhas, pouco aproveitamento de regras e regressão visual.

Pouco aproveitamento de estilos gera um arquivo extenso, que com algumas técnicas como cache e minify, você consegue driblar. Mas e a regressão visual? Isso mesmo, todo seu projeto desestruturado e um código CSS ilegível, onde você não sabe por onde começar as correções. Realmente, isso é um pesadelo para todo front-end e uma forma de evitar isso é adotar um code standard para seu projeto.

 

Por que adotar um code standard?

Adotar um padrão de escrita é mais do que evitar problemas em um projeto, agrega inteligência, agilidade e qualidade ao seu código. Além disso, podemos citar outras características bem interessantes, como:

1. Redução e reaproveitamento: criando classes com estilos globais para elementos, nos gerá um reaproveitamento considerável, o que reduzirá nosso código. Neste ponto, um plus seria a legibilidade das nossas regras, ou seja, sempre será esperado que botão com formatação x, será classe y.

2. Organização de blocos de estilo: organização é essencial para um código limpo e a utilização de processadores pode ser bastante útil, considerando que podemos gerar um arquivo com estilos globais e outros arquivos que compreendam somente o componente que estamos desenvolvendo. Esta arquitetura facilita a organização do código e também facilita a consulta aos estilos já existentes, evitando a criação desnecessária de novos elementos CSS.

3. Estruturação e informação: essa é uma das premissas mais fáceis de compreender, mas na prática é a mais complexa de controlar no projeto. basicamente, a nomenclatura do seletor deve informar o que ele é.

Conheça alguns dos principais padrões e comece hoje mesmo a escrever seu CSS com estilo!

 

OOCSS (Object Oriented CSS)

OOCSS é um paradigma de codificação bem próximo a escrita convencional de CSS. Ele é baseado em duas premissas:

Separação entre estrutura e visual: regras de estilo para estrutura são independentes às de visual (como backgrounds e fontes), tornando-os modulares.

Separação entre container e conteúdo: independência de regras entre um container com relação ao conteúdo.

 

EXEMPLO SMACSS

De acordo com estes exemplos, é possível ver a simplicidade desta abordagem. Porém, é importante avaliar a necessidade e viabilidade da criação de elementos para o visual, a fim de evitar estilos desnecessários.

Saiba mais sobre esta abordagem no repositório oficial do github em: https://github.com/stubbornella/oocss

 

SMACSS (Scalable and Modular Architecture for CSS)

SMACSS foi criado pelo Yahoo! e é uma das metodologias mais utilizadas e seu sistema de codificação é baseado em cinco camada:

Base: os estilos são aplicados nas tags, contemplando pseudo-classes e filho, sem a utilização de um seletor como class e id. Como exemplo desta camada, podemos citar o reset.css e o normalize.css.

Layout: nesta camada, escrevemos os estulos de estruturas que não se repetem ou que são estruturas reutilizáveis.

Module: estilos para os componentes reutilizáveis.

State: definição de estilo de acordo com o estado do componente.

Theme: esta camada é pouco utilizada, serve para definição de estilos para o design, como cores, backgrounds e fontes. Ela pode sobrescrever os estilos definidos nas camadas anteriores.

 

EXEMPLO OCSS

No site oficial do SMACSS, você encontra um documentação bem detalhada: https://smacss.com/

 

BEM (Block, Element, Modifier)

A abordagem de escrita do BEM, sugere a definição dos seletores em três grupos:

Block

Um bloco pode ser o container principal do componente que você está criando.

Element

O elemento, seria um objeto “filho”, que está encapsulado no bloco.

Modifier

Já o modifier, definimos uma variação de alguma característica do element. Essas variações, podem ser cores, fontes, bordas e etc.

 

EXEMPLO BEM

Site oficial: http://getbem.com

 

Como escolher…

Você pode criar seu próprio code standard ou utilizar um já existente, não existe um certo ou errado. É possível, inclusive, fazer uma combinação entre eles e o mais importante é utilizar a solução que melhor atende seu projeto com qualidade.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *


*