Herança

The CSS Podcast - 005: Inheritance (em inglês)

Digamos que você acabou de escrever um CSS para fazer com que os elementos pareçam um botão.

<a href="http://example.com" class="my-button">I am a button link</a> 
.my-button {   display: inline-block;   padding: 1rem 2rem;   text-decoration: none;   background: pink;   font: inherit;   text-align: center; }

Em seguida, adicione um elemento de link a um artigo de conteúdo, com um valor class de .my-button. No entanto, há um problema: o texto não está na cor esperada. Como isso aconteceu?

Algumas propriedades de CSS são herdadas se você não especificar um valor para elas. No caso desse botão, ele herdou o color deste CSS:

article a {   color: maroon; }

Nesta lição, você vai aprender por que isso acontece e como a herança é um recurso eficiente para ajudar você a escrever menos CSS.

Fluxo de herança

Confira como a herança funciona usando este snippet de HTML:

<html>   <body>     <article>       <p>Lorem ipsum dolor sit amet.</p>     </article>   </body> </html>

O elemento raiz (<html>) não herda nada porque é o primeiro elemento do documento. Adicione um pouco de CSS ao elemento HTML, e ele começa a entrar em cascata no documento.

html {   color: lightslategray; }

A propriedade color é herdada por padrão por outros elementos. O elemento html tem color: lightslategray. Portanto, todos os elementos que podem herdar cor agora terão a cor lightslategray.

body {   font-size: 1.2em; } 
p {   font-style: italic; }

Somente o <p> terá texto em itálico porque é o elemento aninhado mais profundo. A herança só flui para baixo, não de volta para os elementos pai.

Quais propriedades são herdadas por padrão?

Nem todas as propriedades do CSS são herdadas por padrão, mas muitas são. Para referência, aqui está a lista completa de propriedades herdadas por padrão, retirada da referência W3 de todas as propriedades CSS:

Como a herança funciona

Todo elemento HTML tem todas as propriedades CSS definidas por padrão com um valor inicial. Um valor inicial é uma propriedade que não é herdada e aparece como padrão se a cascata não conseguir calcular um valor para esse elemento.

As propriedades que podem ser herdadas são transmitidas para baixo, e os elementos filhos recebem um valor calculado que representa o valor do elemento pai. Isso significa que, se um elemento pai tiver font-weight definido como bold, todos os elementos filhos ficarão em negrito, a menos que o font-weight deles esteja definido como um valor diferente ou que a folha de estilo do user agent tenha um valor para font-weight para esse elemento.

Como herdar e controlar a herança de forma explícita

A herança pode afetar elementos de maneiras inesperadas, então o CSS tem ferramentas para ajudar com isso.

A palavra-chave inherit

É possível fazer com que qualquer propriedade herde o valor calculado do elemento pai com a palavra-chave inherit. Uma maneira útil de usar essa palavra-chave é criar exceções.

strong {   font-weight: 900; }

Esse snippet de CSS define que todos os elementos <strong> tenham um font-weight de 900, em vez do valor padrão bold, que seria o equivalente a font-weight: 700.

.my-component {   font-weight: 500; }

A classe .my-component define font-weight como 500. Para tornar os elementos <strong> dentro de .my-component também font-weight: 500, adicione:

.my-component strong {   font-weight: inherit; }

Agora, os elementos <strong> dentro de .my-component terão um font-weight de 500.

Você pode definir esse valor explicitamente, mas se usar inherit e o CSS de .my-component mudar no futuro, poderá garantir que seu <strong> será atualizado automaticamente.

A palavra-chave initial

A herança pode causar problemas com seus elementos, e o initial oferece uma opção de redefinição eficiente.

Você aprendeu antes que cada propriedade tem um valor padrão em CSS. A palavra-chave initial define uma propriedade de volta ao valor inicial padrão.

aside strong {   font-weight: initial; }

Esse snippet remove o peso negrito de todos os elementos <strong> dentro de um elemento <aside> e, em vez disso, os torna de peso normal, que é o valor inicial.

A palavra-chave unset

O comportamento da propriedade unset muda dependendo se uma propriedade é herdada por padrão ou não. Se uma propriedade for herdada por padrão, a palavra-chave unset será igual a inherit. Se a propriedade não for herdada por padrão, a palavra-chave unset será igual a initial.

Lembrar quais propriedades do CSS são herdadas por padrão pode ser difícil, e unset pode ajudar nesse contexto. Por exemplo, color é herdado por padrão, mas margin não é. Portanto, você pode escrever:

/* Global color styles for paragraph in authored CSS */ p {   margin-top: 2em;   color: goldenrod; }  /* The p needs to be reset in asides, so you can use unset */ aside p {   margin: unset;   color: unset; }

Agora, o margin é removido e o color volta a ser o valor calculado herdado.

Você também pode usar o valor unset com a propriedade all. Voltando ao exemplo anterior, o que acontece se os estilos globais p receberem mais algumas propriedades? Apenas a regra definida para margin e color será aplicada.

/* Global color styles for paragraph in authored CSS */ p {     margin-top: 2em;     color: goldenrod;     padding: 2em;     border: 1px solid; }  /* Not all properties are accounted for anymore */ aside p {     margin: unset;     color: unset; }

Se você mudar a regra aside p para all: unset, não importa quais estilos globais sejam aplicados a p no futuro, eles sempre serão desdefinidos.

aside p {     margin: unset;     color: unset;     all: unset; }

A palavra-chave revert

Como você aprendeu na lição sobre a cascata, os estilos vêm de origens diferentes: estilos básicos do user agent, estilos de preferência do usuário e estilos criados por você. A palavra-chave revert desfaz os estilos definidos na mesma origem em que a palavra-chave revert é usada.

Isso é útil quando você define um estilo, mas não quer que ele seja aplicado em algumas instâncias. Enquanto inherit, initial e unset especificam como calcular o valor de um estilo, revert apenas especifica que outros estilos escritos não se aplicam.

p {   padding: 2em; }  aside p {   padding: revert; }

Esse snippet dá um padding aos elementos <p>, mas quando o elemento <p> está dentro de um <aside>, ele não especifica um padding. Em vez disso, ele volta a um estilo de preferência do usuário (se houver um definido) ou aos estilos básicos do user agent.

A palavra-chave revert-layer

As camadas em cascata são uma maneira útil de organizar e priorizar seus estilos na origem do autor da cascata. A palavra-chave revert-layer é semelhante a revert, mas, em vez de especificar que nenhum dos estilos de autor deve ser aplicado a uma propriedade, ela apenas desfaz os estilos na camada atual.

Se você estiver usando uma biblioteca de UI de terceiros, um padrão útil é importá-la para uma camada e adicionar substituições a uma camada de prioridade mais alta. Em seguida, você pode remover uma substituição usando revert-layer, e ela usará os padrões da biblioteca de UI.

Se nenhuma outra camada especificar um valor para a propriedade, ela vai se comportar como revert e usar um valor de uma origem anterior.

Teste seu conhecimento

Teste seus conhecimentos sobre herança

Quais das seguintes propriedades são herdadas por padrão?

animation
As animações não são transmitidas para crianças.
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

Qual valor se comporta como inherit, a menos que não haja nada para herdar e, nesse caso, se comporta como initial?

reset
não é um valor válido, tente de novo!
unset
🎉
superset
não é um valor válido, tente de novo!

Recursos