Blog

Acredito que se você é DEV pelo menos uma vez na vida você já passou por essa situação:

Você escreveu um monte de CSS foi testar no navegador e para sua surpresa, os estilos que você escreveu não foram aplicados ao elemento, e em vez disso, alguns outros estilos foram!

E se perguntou como isso aconteceu?

Pois bem! No CSS vários estilos podem afetar um único elemento.
Há quem diga que CSS é fácil! hahahhahaha.

Brincadeiras à parte, vamos ao que interessa.

Como o CSS é uma das bases do desenvolvimento de projetos web, aprender a utilizá-lo da forma correta é fundamental. O CSS (Cascading Style Sheets) ‘traduzindo’: folhas de Estilo em Cascata é composta por camadas, que permitem estilizar as páginas desenvolvidas com HTML. Isso significa que é possível definir a aparência de cada página, alterando seu layout, o posicionamento dos elementos, cores e outras opções visuais.

Para entender como isso tudo funciona precisamos aprender quais as condições estão atreladas a cascata, pois, é ela que irá determinar qual estilo será aplicado a um elemento. Temos dois fatores vinculados a ela:

A especificidade dos seletores de elemento e a regra dos estilos aplicados.

O que é um seletor de elementos?

Existem vários, mas vou exemplificar os mais comuns:

• Seletores de elemento/tipo: selecionamos diretamente as tags.

• Seletores de classe: selecionamos elementos baseados no valor de seu atributo classe, e podemos atribuir classes para diferentes elementos.

• Seletores de id: selecionamos um elemento pelo seu identificador único. Só pode existir um único elemento para cada id.

Estilos inline: são estilos aplicados diretamente ao elemento, através do atributo style.

Já temos uma noção dos seletores vamos para o próximo tópico.

Regras, é agora que a mágica acontece:

O CSS tem regras de especificidade, cada seletor tem um “peso”:

• Os seletores de elemento/tipo e pseudo-elementos tem peso mais baixo.

• Classe, atributo e pseudo-classes tem peso baixo.

• Os seletores de “id” tem peso médio.

• Estilos inline tem peso alto.

Vejamos alguns exemplos:

• Estilos de diferentes pesos são aplicados a um mesmo elemento, o estilo que tiver o maior peso será o aplicado.

• Estilos de mesmo peso, os estilos que vierem mais abaixo na cascata serão os aplicados.

• Estilos inline.

• Existe uma regra que sobrepõe qualquer outra regra, o !important, e que deve ser utilizado com cautela pois torna o código complexo dificultando a manutenção.

Esses foram alguns exemplos de regras existentes no CSS, espero que tenha sido uma leitura útil e agradável, qualquer dúvida, estou à disposição.

Texto: Larissa Mendes Ribeiro (Desenvolvedora)