Hoje em dia escrever CSS deveria ser uma tarefa simples, porém, ao longo do tempo foram surgindo muitas formas da mesma ser realizada, onde começaram surgir as dúvidas, logo em seguida, irei explicar algumas coisas sobre SMACSS, OOCSS, BEM e DRY, e também como funciona cada padrão e qual deveríamos seguir.
Qual padrão devo seguir para escrever e organizar meu código CSS ?
Entre os padrões existentes, iremos abordar os seguintes: SMACSS, OOCSS, BEM e DRY CSS, nesse post, irei abordar primeiramente o OOCSS, também conhecido como CSS Orientado a Objetos.
OOCSS
Com certeza você já deve ter ouvido falar em “Orientação a Objetos”, uma maneira de programar onde é possível criar um reaproveitamento de código muito eficiente. Com o grande sucesso desse paradigma no back-end em linguagens como o Java, em 2009 a desenvolvedora Nicole Sullivan teve a ideia de trazer o paradigma para o front-end, assim surgiu o OOCSS(Object Oriented CSS).
Princípios básicos
A proposta do OOCSS nos traz dois importantes princípios:
- Separar estrutura de skin
- Separar container e conteúdo
Separar estrutura de skin
Significa repetir características visuais como “skins” separadas, que podem ser combinadas em vários “objetos” para conseguir-se uma extensa gama de variações visuais sem muito código. Por exemplo: backgrounds e estilos de borda.
Por exemplo, um objeto de mídia com class="media" e seus componentes com class="img"(para componentes de imagem e vídeo) e class="bd" (para componentes de texto). Ao referenciar essas classes nas folhas de estilo, o HTML ganha uma maior visibilidade, ou seja, se um novo elemento de mídia surgir nos próximos anos (como <svg>), ele pode receber o estilo sem que seja necessário mexer em sequer uma linha de CSS.
Separar container e conteúdo
Essencialmente quer dizer: Raramente use estilos que dependam de localização. Idealmente, um objeto deve parecer-se igual, independentemente de onde estiver na página, ou mesmo se trocar de página.
Em vez de estilizar um título secundário específico com .myObject h2 { }, crie e aplique uma classe que descreva o elemento em questão, como <h2 class="category-title">. Isso garante que:
- Todos os
<h2>sem a classe não sejam afetados sem necessidade. - Todos os
<h2>com a classe tenham o mesmo estilo. - Não é preciso criar estilos extras para os casos em que seja preciso que um
.myObjectse pareça com um<h2>não estilizado.
O que é objeto em OOCSS ?
Continuando com a metáfora de Orientação a Objetos(OO), um objeto em CSS é análogo a uma instância de uma classe Java ou PHP, por exemplo.
Um objeto CSS é formado por elementos:
- HTML, que pode ser ou mais nós do DOM.
- Declarações CSS, que estilizam estes nós, começando com o nome da classe referente ao wrapper.
- Componentes como imagens de background e sprites, por exemplo.
- Comportamentos JavaScript, listeners ou métodos associados.
Performance do OOCSS
Além de organização e reaproveitamento de códigos, OOCSS também traz o benefício da performance, que é duplo:
- Intenso reuso de código: o que significa menos código CSS, arquivos menores e transferências mais rápidas;
- Menos repaints e reflows: Se não sabe o que isso significa, leia o artigo: O que todo desenvolvedor front-end deve saber sobre renderização de páginas web .
Exemplos de uso
Chega de mais delongas e vamos para os exemplos de código, imagine que você precisa fazer um card, onde o mesmo possuí: cabeçalho(com: título e imagem), corpo(com: descrição) e um rodapé(com: data e autor), com OOCSS poderíamos fazer:
Veja que possuímos várias classes que podem ser reutilizadas em outros cenários, por exemplo: negrito, alinhado-centro, texto-descreto, texto-justificado, img, data, etc...
Conclusão
A idéia do OOCSS é muito boa e nos proporciona grandes benefícios, porém exige que conhecemos muito nosso CSS, sabendo todas as classes, o que podemos ou não reaproveitar e devemos manter estruturas pré definidas, seria muito interessante caso existisse alguma maneira mais flexível e simples para organizar nosso CSS, certo ? Para isso, no próximo post sobre organização de CSS irei abordar o SMACSS.
Referências:
Publicado em blog.matheuscastiglioni.com.br.
