Image for post
Image for post
Autosomal Recesive Inheritance — Google Images (Illustration purpose)

O que “raios” é Inherit? — Falando sobre CSS3

Provavelmente você já deve ter se deparado com um valor de propriedade no CSS3 chamado de “inherit”, mas até hoje pouco deve ter usado e entendido ele ali.

Antes de tudo, o que seria “Inherit”? Bem, em tradução livre, Herdar.
É nesse momento que você se pergunta: “Mas a herança já não vale mesmo sem usar o inherit?” — Sim, vale e podemos ir mais fundo que isso.

Em algum momento você, ao escrever CSS, já deve ter pensado: “Poxa, vou colocar o color: #FFF; na pai pra todo o texto mudar.” — E então é nesse momento que você descobre que existe uma classe cabrunca já mudando a cor da sua tag <p> para #000… E agora poderoso Odin, o que faremos?

Bem, é ai que sua salvação vem a cavalo: INHERIT.

Nesse caso, ao invés de você reescrever a mesma coisa milhões de vezes, você simplesmente coloca: color: inherit; — Pronto, seu problema foi resolvido e agora a sua tag estará com coloração que a classe pai estará definindo. Simples, não?

O Inherit evita também que o seu browser fique dando repaints desnecessários, já que ele executou uma task de paint pra classe pai. Isso também ajuda no desempenho :)

Veja um exemplo aqui:

Resumindo tudo: Inherit serve pra você sobrescrever uma classe sem ter que ficar replicando milhões de vezes o que já foi escrito.

Obs.: Se você é do tipo que fica colocando !important em todas as propriedades possíveis e imagináveis, então essa publicação talvez não sirva pra você, até porque, você simplesmente está quebrando todo o conceito de herança que existe no CSS.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store