Autosomal Recesive Inheritance — Google Images (Illustration purpose)
Lucas Henrique
Jun 30, 2017 · 2 min read

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade