Mesmo sabendo que o Chris vai falar algumas coisa relacionada ao termo "orientado a objetos", achei o conceito de otimizar e "orientar" o CSS bem interessante.

Na semana passada estava conversando sobre CSS aqui no serviço, debatendo o que era melhor:

Opção 1 – Uma classe por elemento

Ao meu ver, este é o modo mais simples de "pensar" CSS. Você pensa na estrutura html do seu site a para cada elemento cria uma classe, quando o elemento se repete você usa a mesma classe.

Por exemplo, você tem um quadro (div) com o topo azul, bordas cinza e área para conteúdo com background branco.

Seu CSS seria:

.quadro_azul{
border: 1px solid #ccc;
background: #fff;
padding: 6px;
}

.quadro_azul h6{
display: block;
background: blue;
}

 

Para criar um quadro com o header vermelho você precisar duplicar o código do CSS, facilita a vida para atualizar um elemento específico porém dificulta para fazer alterações gerais, como mudar o layout.

Esse método também torna o código mais sujo (e o html levemente mais limpo).

 

 

Opção 2 – Classes comuns para diversos objetos

Para mim ainda é um pouco complicado pensar desta forma, uma coisa que temos que ter na cabeça antes de pensar nisso é: um elemento do html pode ter várias classes. Repitam isso.

No mesmo exemplo anterior, você teria um estilo para delimitar TODOS os quadros, por exemplo:

.quadro {
border: 1px solid #ccc;
background: #fff;
padding: 6px;
}
 

 E para setar as outras propriedades, como a cr do cabeçalho definiria classes para isso.

h6 .azul{
display:block;
background:blue;
}

Ou ainda mais amplo:

.azul{background:blue;}

.block{display:block;}

Claro que neste caso não faz muito sentido, porque estamos criando classe para setar uma única propriedade, um "desperdício" de classe por assim dizer.

Mas neste caso utilizamos na div a classe "quadro e no cabeçalho (h6) as classes azul e block.

<h6 class="azul block">Header do quadro</h6>

 

 

O que é melhor?

Eu ainda não tenho uma opinião formada sobre qual o melhor caminho a seguir, mas neste momento eu recomendaria o budismo: "siga o caminho do meio".

Ter centenas de classes definindo propriedades vai só complicar a vida do desenvovledor em possíveis manutenções. O CSS vai dicar extenso, montar o html também pois você terá que chamar diversas classes para cada objeto.

Ter uma classe para cada objeto também pode não ser benéfico, a cada nova página você provavelmente vai ter que criar uma nova classe, aumentnado seu CSS sem um bom reaproveitamento de código.

Em ambos, lá se vai a facilidade para alterar layout de um modo REALMENTE rápido.

 

Graças ao Twitter (saiba o que é o Twitter e como usá-lo) visitei um link que me chamou a atenção, com uma possível buzzword: CSS Orientado a Objetos.

Apesar do nome mimimi, a idéia é realmente interessante. A herança poderia ser bem útil no CSS, mas como o nome diz a "cascata" existe, pensando direito dá para aproveitá-la bem.

Bom, veja a apresentação em slides do conceito, abaixo continuo meus pitacos sobre essas práticas!

 

Uma coisa que não costumo fazer e tenho certeza que é muito útil é a separação no CSS da estrutura (posicionamento de colunas, menu, header, footer, ad, etc…) da visualização (backgrounds, fontes, bordas, etc.).

Isso facilita a alteração de layout (visual e estrutural) e somado com o reaproveitamento de classes para diversos elementos, a redução do número de classes para elementos bastante similares e outras boas técnicas pode reduzir bastante seu CSS e facilitar o trabalho em equipe!

O que vocês acham da idéia, do nome e da apresentação?