Hierarquia do efeito em cascata

A hierarquia do efeito em cascata define a ordem de prioridade entre diferentes seletores de CSS. Estilos declarados mais próximos do elemento, como inline, têm maior prioridade que os declarados em folhas de estilo externas.

Especificidade

A especificidade é o cálculo usado para determinar qual regra CSS será aplicada quando mais de uma regra corresponder ao mesmo elemento. Regras com maior especificidade têm prioridade.

!important

O uso da palavra-chave !important em uma regra CSS faz com que ela tenha a maior prioridade, sobrepondo-se a qualquer outra regra, exceto outra com !important.

Herança

No CSS, algumas propriedades são herdadas dos elementos pais, como cor e fonte. Isso permite que o estilo seja aplicado de forma consistente sem a necessidade de repetição.

Motores de Renderização

Os motores de renderização interpretam e exibem o código CSS em cada navegador, podendo haver variações na exibição entre diferentes navegadores.

Como exemplo, temos os motores de renderização:

• Blink - para Google Chrome, Opera
• Gecko - para Firefox
• Webkit - para iOS, Safari
• Trident - para Internet Explorer

Navegadores que não suportam recursos modernos

Alguns navegadores mais antigos não suportam certas propriedades CSS modernas. Para contornar esse problema, utilizam-se fallback styles ou recursos como @supports.

Site para pesquisa de recursos disponíveis nos navegadores - Can I Use

Prefixos no CSS

Prefixos específicos de navegadores, como -webkit- e -moz-, são usados para garantir que estilos CSS funcionem em diferentes motores de renderização.

Exemplos de prefixos:

• -moz: Firefox
• -webkit: Chrome/Edge/Opera/Safari
• -ms: IE(versões antigas)
• -o-: Opera (versões antigas)

Quando os recursos CSS apresentam comportamento estável, os prefixos não são mais necessários para as novas versões dos navegadores.

Definindo variáveis

As variáveis no CSS, definidas usando --nome-da-variavel, permitem reutilizar valores em várias partes do código, tornando o CSS mais limpo e fácil de manter.

Exemplo:

Esse recurso é muito usado para alternar entre tema claro e escuro nos sites.

BEM (Block, Element, Modifier)

BEM é uma metodologia que visa organizar o CSS de forma modular, dividindo os componentes em blocos, elementos e modificadores, facilitando a manutenção e a escalabilidade.

1. block: Representa um componente independente da interface (por exemplo, um botão, card, formulário). Ele é a "base" do componente e geralmente é o nome de uma classe de nível superior (pai).
2. block_element: Um bloco pode ter "elementos", que são partes constituintes do bloco (filhos). Um elemento está sempre relacionado ao bloco e não deve ser usado sozinho.
3. block--modifier ou block__element--modifier Serve para alterar a aparência, estado ou comportamento do bloco ou elemento.

SMACSS (Scalable and Modular Architecture for CSS)

SMACSS é uma abordagem para estruturar CSS de forma escalável, separando estilos em cinco categorias principais: base, layout, módulo, estado e tema.

OOCSS (Object Oriented CSS)

OOCSS é uma metodologia que visa separar a estrutura visual dos componentes, promovendo a reutilização de estilos e a modularidade no código CSS.