CSS Avançado

Nos últimos posts sobre CSS aprendemos como utilizá-lo, quais as regras e seletores, e dentre outros, algumas propriedades e seus valores. Neste post serão abordados alguns aspectos avançados do CSS, como: o efeito cascata, herança e especificidade das regras, e, a diferença de utilização do link e @import para importar uma folha de estilo.

Efeito Cascata

Para uma boa compreensão desse tópico, precisamos saber o que são e como utilizar as regras CSS, leia este post para mais detalhes.

Suponhamos que estamos fazendo um site e de repente percebemos que ocorre o seguinte conflito com determinado elemento: mais de uma regra está declarada para esse elemento. Como saber qual das regras será aplicada? É aí que entra o conceito de efeito cascata, que especifica uma ordem de prioridade das folhas de estilo, cuja regra que tiver maior prioridade será declarada nos casos de conflito. Eis a ordem de prioridade, extraída do site do Maujor:

1. Folha de estilo padrão do navegador do usuário;
2. Folha de estilo do usuário;
3. Folha de estilo do desenvolvedor;
• - Estilo externo (importado ou linkado);
• - Estilo incorporado (definido na seção head do documento);
• - Estilo inline (dentro de um elemento HTML);
4. Declarações do desenvolvedor com !important;
5. Declarações do usuário com !important;

Assim, uma declaração de estilo com !important definido pelo usuário prevalece sobre todas as demais, é a de mais alta prioridade. Entre as folhas de estilo definidas pelo desenvolvedor do site, os estilos inline (dentro de um elemento HTML) tem a prioridade mais elevada, isto é, prevalecerá sobre a folha de estilo definida na seção head, e, esta prevalecerá sobre uma folha de estilo externa. A prioridade mais baixa é para estilos padrão do navegador.

Herança e Especificidade

Herança

O conceito de herança CSS está ligado à árvore do documento, melhor entendida se associada a uma árvore genealógica familiar, em que cada membro terá maior importância de acordo com o grau de parentesco que ocupar. Vejamos esse conceito aplicado em HTML:

A partir desse código, podemos deduzir que a árvore do documento é a seguinte:

Logo, podemos definir alguns "graus de parentesco":

1. -html é pai de head e body;
2. -head é pai de meta e title;
3. -body é pai de ol, que é pai de 3 li.

Assim como na família os filhos herdam características dos pais e avós, no CSS isso também ocorre, ou seja, elementos filhos (dentro de outros elementos) receberão as regras que tiverem sido declaradas aos elementos ancestrais.

Para entender melhor, vamos utilizar o seguinte exemplo:

Nesse exemplo temos um elemento <em> dentro de um <p>, logo podemos deduzir que em é filho de p e herdará a regra aplicada, ou seja, também será de cor azul. Abaixo a renderização:

Parágrafo com ênfase.

Mas a minha intenção de usar um <em> é que ele esteja destacado do texto, e agora como fazer com que ele tenha uma cor diferente? Simples, basta aplicar uma regra específica ao <em>, a qual fará com que o efeito de herança seja anulado. Exemplo e renderização disso:

Parágrafo com ênfase.

Além desse tipo de herança pai-filho, também podemos ter o tipo avô-pai-filho, em que o elemento pai herdará as regras do elemento avô, e por consequência, o elemento filho receberá as regras do pai. Por exemplo, acrescentando um elemento <section> e dentro dele os elementos <p> e <em> do exemplo anterior:

Parágrafo com ênfase.

Entendemos então que podemos tornar nossas folhas de estilo mais simples e menos conflituosas se utilizarmos bem o conceito de herança, mas isso serve para todas propriedades? Não, segue as que não são herdadas: background, border (exceto: border-collapse e border-spacing), clip, content, counter, clue, display, float, height, left, margin, outline, overflow, padding, page-break, pause, play-during, position, right, table-layout, text-decoration, top, unicode-bidi, vertical-align, width, z-index.

Mas por que não são herdadas? Pelo fato de causarem transtornos na renderização da página caso fossem aplicadas à todos elementos. Imagine ter uma section com 15 parágrafos, além de imagens e tabelas, e aplicar uma borda sólida, de 4px e amarela, para desfazermos isso teríamos que criar outras regras, e isso não seria nada interessante.

Especificidade

Significa o quanto nossos seletores são específicos ao elemento que queremos estilizar, ou seja, quais e quantos seletores utilizaremos para especificar um elemento que queremos formatar. Para isso podemos atribuir um valor numérico de acordo com a especificidade, vejamos abaixo uma lista de exemplos.

1. p {propriedade:valor} - (valor 1, pois apenas um seletor está especificado);
2. p em {propriedade:valor} - (valor 2, dois seletores especificados);
3. a [target="_blank"] {propriedade:valor} - (valor 11, nesse caso o seletor html vale 1 e o atributo especificado vale 10);
4. .nome_classe {propriedade:valor} - (valor 10, pois estamos especificando uma classe);
5. #nome_id {propriedade:valor} - (valor 100, ID especificado);

Além desse cálculo, podemos utilizar o valor !impotant: determina a propriedade como principal, ou seja, não será substituída mesmo que o seletor seja mais complexo.

Ela deve ser escrita logo após o valor da propriedade na declaração CSS antes do ponto e vírgula, como o exemplo a seguir:

Obs.: Esse valor deve ser usado com muita cautela, senão perderá sua utilidade se for muito utilizado

link ou @import?

Existem 2 formas de carregar folhas de estilo no HTML. Ambas funcionam de formas diferentes, mas têm o mesmo objetivo: carregar um arquivo CSS e dar cor e forma ao nosso conteúdo.

link: deve ser utilizada entre as tags <head></head>, seus atributos são o rel (relação entre nossa página e o conteúdo externo), o href (caminho do arquivo externo) e o media (indica a que dispositivo é destinado o arquivo).Sintaxe:

<link rel="stylesheet" href="estilo.css" media="screen" />

@import: diferente do link, deve estar entre as tags <style></style>, já vistas antes nesse post para utilizar o CSS de forma embutida. Sua sintaxe é a seguinte:

@import url(estilo.css);

Qual das duas utilizar? Segundo alguns testes realizados por Steve Souders nesse artigo, é recomendado que utilize-se o link.