Problema
- Ao estilizar com CSS, às vezes ocorrem conflitos de CSS e acabam sendo aplicados estilos indesejados.
- Esses conflitos geralmente são causados por bibliotecas de UI, widgets de terceiros ou código CSS mantido por outra equipe, e nesses casos muitas vezes não é possível modificar o CSS livremente.
- Especialmente quando há conflito com CSS vindo de uma biblioteca de UI ou de terceiros, também pode ser difícil adicionar classes ou IDs extras ao HTML.
- Além disso, se o CSS que causa o conflito foi escrito de forma muito específica, pode ser impossível torná-lo ainda mais específico para aumentar a prioridade do seu CSS.
- Nessa hora, muitos desenvolvedores recorrem facilmente a
!important, mas essa não é uma abordagem recomendada.
Solução
- Basta repetir o seletor.
- Por exemplo,
.checkbox__icon.checkbox__icon tem prioridade maior do que um único .checkbox__icon.
- Isso pode parecer um hack de CSS, mas a especificação CSS Selectors Level 4 afirma: "Repeated occurrences of the same simple selector are allowed and do increase specificity. (Ocorrências repetidas do mesmo seletor simples são permitidas e aumentam a especificidade.)".
7 comentários
Agora que CSS Cascade Layers (
@layer) já é compatível com todos os principais navegadores, não precisamos mais depender desse tipo de hack.https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
https://caniuse.com/css-cascade-layers
Ah, então é assim que se sobrescreve estilos no styled-components usando
&&, né?Texto do estudante removido
Parece uma espécie de magia negra mesmo kkk
Agora vamos ver um código assim.
.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon
Nossa, eu não sabia disso...
Dependendo da situação, talvez desse para criar e usar um pré-processador que repita o seletor várias vezes.
Nossa, eu não conhecia esse jeito.