Bem, a abreviação do CSS já diz tudo sobre sua arquitetura. Ela funciona em cascata. Novidade para uns, obsoleto para outros, mas que quando aplicado da maneira correta, pode te ajudar em muito na leitura do CSS. Bem, o usuário final não vai ver o resultado, mas para desenvolvedores web que se prezem, não importa apenas o resultado final. Como ele foi atigindo também é relevante. Como já disse anteriormente, mesmo sendo uma linguagem de design, o CSS tem várias metodologias e truques por trás da manga.
Você vai entender melhor do que estou falando, irá diferenciar este post de uma weblosofia que não tem prática. Vamos supor que você quer estilizar um campo de formulário e assim você atribuiu uma classe para ele com o nome de campo. Como já mostrei no post hover em campos com o jQuery, você pode colocar outra classe que irá representar o estado hover do elemento, pois como já discuti antes, o IE6 suporta o hover apenas em links.
Assim, ele poderia ser estilizado da seguinte maneira:
.campo {
font-size: 18px;
color: gray;background-color: #DDDDDD;
border: 1px solid #A19A9A;
}
.campo_focus {
font-size: 18px;
color: gray;
border: 1px solid #E64D4D;
background-color: #DBCDCD;
}
No campo focus ele muda a cor de fundo e a borda, mas permanece com a fonte 18px. A fonte está especificada por que é diferente das demais, caso contrário ela seria especificada no body, no html ou com o símbolo asterisco que representa todos elementos. Olha o efeito em cascata evidente, pois a classe campo e campo_focus herdaria o tamanho da fonte de qualquer elemento ancestral a ele. Sim, pode considerar o documento como um pai cheio de filhos e que tem mais filhos, ou como uma árvore, pois uma família pode ser representada também por uma árvore. Não importa como você pensa, desde que você tenha isto em mente. Sendo assim, podemos reescrever este css desta maneira:
.campo, .campo_focus {
font-size: 18px;
color: gray;
background-color: #DDDDDD;
border: 1px solid #A19A9A;
}
.campo_focus {
border: 1px solid #E64D4D;
background-color: #DBCDCD;
}
Desta vez eu especifiquei o campo e no campo_focus suas propriedades em comum e as que irão ficar somente na classe campo estão declaradas. A segunda vai ter as propriedades diferentes e vai prevalecer no campo_focus as declarações que você colocou por último, obedecendo a herança. Assim, se você mudar o tamanho da fonte, basta apenas mudar em um local. Se não ficou evidente a diferença, vou ilustrar um exemplo mais complexo.
Imagina que você está colocando em um menu um fundo diferente para cada item e que este menu esteja como uma lista não ordenada. Pois bem, haverá várias declarações nos elementos li, mas neste li você terá que colocar um id para diferenciar dos demais para assim no css para cada id tem um background. Então você deve aplicar a frase anterior literalmente: “cada id tem um background”, ou seja, a única coisa que diferencia-os é o background, portanto, todos as outras propiedades comuns devem ser declaradas no li e somente o background deve ser declarado em cada id. Isto evita redundância e melhora a hierarquia do seu CSS.
