CSS Avançado

1. Efeito cascata.

O uso das folhas de estilo para controlar o "visual" de um documento HTML, não raro resulta em regras CSS distintas, aplicáveis a um mesmo elemento no documento. Ou seja, está estabelecido um conflito entre regras. Qual das regras vai prevalecer?

Aqui entra o efeito cascata, que nada mais é, do que o estabelecimento de uma prioridade para aplicação da regra de estilo ao elemento.
Para determinar a prioridade são considerados diversos fatores, entre eles, o tipo de folha de estilo, o local físico da folha de estilo no seu todo, o local físico da regra de estilo na folha de estilo e a especificidade da regra de estilo.
A prioridade para o efeito cascata em ordem crescente é a seguinte:

1. folha de estilo padrão do navegador do usuário;
2. folha de estilo do usuário;
3. folha de estilo do desenvolvedor;
           a. estilo externo (importado ou linkado).
           b. estilo incorporado (definido na seção head do documento);
           c. 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.

2. Como herança e especificidade afetam as regras CSS.

Herança

Existem algumas propriedades do CSS que quando aplicadas aos “elementos pais”, os “elementos filhos” herdam a característica aplicada no pai. Um exemplo disso é a propriedade color. Quando aplicamos a propriedade color em um elemento div, o texto dos elementos contidos no div são coloridos de acordo com a propriedade.

div { color: green;}

O texto que há dentro deste div irá ter a cor verde, independente se este texto está “solto” dentro do div ou se ele está dentro de um parágrafo, por exemplo. Ou seja, os filhos herdaram o resultado desta propriedade. A mesma coisa acontece para, por exemplo, a propriedade font-size.
Há também as propriedades não herdadas pelos “filhos”. Estas propriedades geralmente são propriedades referentes a formatação da caixa, como por exemplo a propriedade width, height, margin, padding e assim por diante.
Essa herança é responsável por uma parte da cascata. É aí que está uma das primeiras vantagens de se utilizar o CSS no desenvolvimento com padrões. A vantagem da herança é exatamente podermos modificar poucas linhas do CSS para fazer alterações no site inteiro, sem ter que caçar elemento por elemento e modificando suas propriedades.
A herança é largamente utilizada em frameworks de CSS ou até mesmo em técnicas para que a customização de layouts seja explorada de forma automática ou manual pelo cliente, como homes de portais, e-commerce etc. Assim, o controle fica mais genérico, e é aí que entra a especificidade do CSS para controlar o detalhe.

Especificidade

A especificidade define os detalhes. Quando você define no body as propriedades font-family, font-size, essas propriedades são herdadas por toda árvore de elementos do documento. Isso trás uma uniformidade para o texto, mas nem todos os elementos terão esse valor genérico de font, logo você terá que ser mais específico e definir valores diferentes de font para estes elementos. 

Suponha que você tenha o seguinte código:

Definimos no código acima que os elementos em terão o background vermelho. Isso irá capturar os 4 elementos em que colocamos no HTML. Ele irá capturar todos os elementos em, não importa onde ele esteja. Vamos analisar outro código CSS:






Já mudamos toda a história com este seletor. Queremos dizer que apenas os em que estão dentro de p e que por sua vez estão dentro de um div terão o background verde. Deixamos a regra mais específica excluindo todos os elementos em que estão fora do div. Os em que estão fora do div continuam com o background vermelho.
No caso acima, a ordem não altera o resultado da renderização. O seletor mais específico sempre é o que vai funcionar.

3. Diferenças entre o uso de link e @ import

Existem 2 formas de carregar folhas de estilo no HTML. As duas funcionam de formas diferentes, mas ambas com o mesmo objetivo, carregar um arquivo CSS e dar cor e forma ao nosso conteúdo.

<link /> - Se trata da tag que os padrões web indicam que deve ser utilizada entre as tags <head> </head>, essa tag indica uma relação com um arquivo externo. Com ele indicamos os arquivos RSS, favicons e os arquivos CSS. Em conjunto com o atributo rel, e posteriormente o atributo href, indicamos o caminho do arquivo relacionado com o arquivo HTML. Vale lembrar também a utilização do atributo media que indica a que dispositivo é destinado o arquivo.
<link rel="stylesheet" href="a.css" media="screen" />


@import - Trata-se de uma funcionalidade no CSS que nos permite carregar um arquivo CSS a partir de um arquivo CSS. É igual ao anterior, onde podemos indicar a rota e que tipo de dispositivo irá utilizar esse arquivo CSS.
Essa funcionalidade omite o atributo rel, pois deve ser chamada a partir da tag <style> ou a partir de um arquivo CSS, entendendo que trata-se de um arquivo CSS.
style type="text/css"&gt;
@import url("a.css") screen;
&lt;/style&gt;

Qual opção utilizar?
Steve Souders publicou um interessante artigo, mostra através de testes todas as opções disponíveis e nos ensina a melhorar o rendimento de nossas páginas com a utilização de <link />
Sem dúvida é a melhor opção, pois em todos os browsers ocorre o carregamento de forma simultânea dos arquivos CSS.