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?
