Arquitetura CSS – Parte 1

Todo o aspecto visual de um site ou aplicação é de responsabilidade do CSS (Cacading Style Sheet), traduzindo para português Folha de Estilo em Cascata. Graças a essa tecnologia somos capazes de criar páginas na web com resultados impressionantes, é através dessa tecnologia que podemos incluir fundos, imagens, cores, tipos de fontes e muito mais. Seria impossível imaginar a web sem CSS, já imaginou um mundo sem cores?! Por isso a folha de estilo é tão importante na web.

Mas muitas pessoas ainda sentem aversão ou acham que CSS é um pesadelo, isso acontece quando não temos padrões bem definidos no projeto… e o resultado é um caminho árduo para o desenvolvedor.

Ainda existem aqueles que acham quem um bom CSS é ter um belo visual na página, mas um bom CSS vai muito além, não é só sair escrevendo código, é preciso definir o padrão CSS do projeto, isso vai ajudar a evitar conflitos futuros, um conflito de CSS é o resultado de código mal escrito que anula regras ou são aplicadas de forma errada no layout. Então, tendo em vista produtividade, facilitar a manutenção, reutilização e legibilidade do código, várias arquiteturas de projetos focados em Front-End surgiram, afim de ajudar nossa vida.

Mas porque isso não é tão difundido em nosso dia a dia?! Muitos ainda acham, que o estilo da página é algo sem importância, pois não tem regra de negócio atrelado ou não é lógico.

Você já deve ter visto por ai uma folha de estilo com umas 3.998 linhas, é difícil de dar manutenção, é ai que entra a Arquitetura de CSS, então nessa primeira parte vamos focar em alguns modelos de arquitetura de CSS.

  • OOCSS
  • SMACSS

1. OOCSS – Object Oriented CSS

A finalidade do OOCSS é incentivar a reutilização de código, um objeto CSS é todo padrão visual que poderá se repetir no site ou aplicação e é identificado como uma classe, ou seja, esse objeto CSS pode ser reutilizável em todo o site.

Existem dois princípios fundamentais

Primeiro sobre a separação da estrutura e do visual, propriedades como color, background e border, depois de definidas elas são consideradas a identidade visual do projeto ou skin, portanto devem ser agrupadas, misturando skins com outros objetos de estrutura, você terá uma grande variedade de objetos, sem muito código CSS.

Vamos utilizar botões para exemplificar este primeiro princípio, conforme a figura 01.

botoes-css

Figura 01 – Botões baseados em OOCSS
Como podem ver, temos botões de cores diferentes, certo, vamos lá para o estilo:

/* Essa vai ser a estrutura do botão */
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

/* Skin (visual), aqui são as cores definidas */
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}

.btn-success {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}

Listagem 2 – CSS dos botões
Agora vamos para a marcação :

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

Listagem 1 – Estrutura de marcação dos botões (HTML)
Podemos ver claramente que foi separado a estrutura que é a classe .btn e do visual que são as classes .btn-*, ou seja, podemos fazer diversas versões de um mesmo componente usando a mesma estrutura e base, mudando apenas o visual como cor no caso do exemplo, mas poderíamos ainda criar classes para definir caixa alta ou caixa baixa, ícone, tamanho.

Agora o segundo princípio diz respeito sobre separar o contexto do conteúdo, normalmente precisamos repetir estruturas em diferentes páginas, este principio nos ensina uma coisa muito importante, não criar dependências do objeto CSS de acordo com o contexto que ele está inserido, exemplo:

.sidebar h2 { ... }

O correto é definir o estilo base para o h2, para garantir a mesma aparência não importa onde ele esteja inserido, e criar uma classe que o diferencie quando seja necessário, ficando assim:

<h2 class="pt-sans-bold" ></h2>

Podemos utilizar o OOCSS para modularizar o código reaproveitando as estruturas em diversos casos, mantendo um padrão, porém diferenciando vários comportamentos.

2. SMACSS – Scalable and Modular Architecture for CSS

A documentação é muito completa e extensa, esse guia de estilo é um dos mais famosos e utilizados. Basicamente o sistema é divido em cinco categorias principais tais como: Base, Layout, Module, State e Theme.

2.1 Base

As regras de base são aplicadas a seletores de elementos sem o uso de classes ou IDS, também permite pseudo-classes usando seletores de elementos. Isso vai permitir configurar o estilo padrão da página.

Aqui vai normalmente o CSS reset ou normalize.css.

2.2 Layout

No layout utilizamos elementos fixos da aplicação, geralmente os seletores são únicos e não reutilizáveis, como header, footer, main, sidebar, podemos também adicionar grids, wrappers ou containers, e também tudo que não é um componente ou estrutura reutilizável.

O sistema propõe que classes possuam o prefixo l-, para identificar melhor as classes de layout, já que seletores de ID são nomeados com precisão.

#header {
	font-size: 2em;
	color: blue;
	width: 100%;
	height: 8em;
}

#sidebar {
	font-size: 1em;
	color: #fff;
	float: right;	
}

.l-reverse #sidebar {
	float: left;
}

2.3 Modules

No módulo vai o que será reutilizável na aplicação, ou seja, os componentes, como botões, icons, widgets, alertas e muitos outros. Ao ser definido o conjunto de regras para o módulo, é preciso evitar o uso de IDS e seletores de elementos.

.content h2 { … }

Preferindo

.content-title { … }

2.4 State

Como o próprio nome diz, estado em Português, determina o estado de um elemento, ou seja, caso um elemento seja modificado ou alterado durante a navegação do usuário, este elemento será alterado por um elemento, cujo nome da classe modificadora será precedido com o prefixo is-.

.is-active { … }
.is-selected { … }
.is-visible { … }
.is-hidden { … }
.is-collapsed { … }

2.5 Theme

O tema é a parte que não é frenquentemente usado na maioria do projetos, pois serve para separar a parte que dá novo design para página.

Define um conjunto de estilos, backgrounds, imagens e até fonte family, que dão a aparência para aplicação, pensando na possibilidade que seu site ou aplicação terá mais de uma versão de design.

Um exemplo de uso seria em e-Commerce, que poderia alterar o layout de acordo com a pessoa que acessa, alterando os elementos do site e dando a impressão de personalização.

O SMACSS é mais um conjunto de guidelines para nos ajudar a escrever um bom código CSS. SMACSS nos mostra uma forma de examinar nosso processo de design, para ter mais detalhes recomendo ler a documentação, que é muito completa.

No próximo post, abordarei o método BEM de organizar CSS, posso garantir que é no mínimo muito interessante! Até lá e muito Obrigada Galera 🙂

Referências

[1] https://github.com/stubbornella/oocss/wiki
[2] http://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
[3] https://smacss.com/

Por PATRÍCIA GOMES DOS SANTOS SILVA

Analista de Sistemas apaixonada por front-end e boas práticas em desenvolvimento web, acredita que HTML, CSS e Javascript são a base e podemos mudar o mundo através da web.

Postado em: 06 de outubro de 2015

Confira outros artigos do nosso blog

Variáveis nativas no CSS: elas existem?

14 de maio de 2018

Patrícia Gomes dos Santos Silva

How-to: Conhecendo o SASS

07 de maio de 2018

Bruno Carvalho

Introdução ao Webpack 2

10 de julho de 2017

Alan Cesar Elias

Começando com Angular 2

09 de fevereiro de 2017

Otávio Felipe do Prado

Deixe seu comentário