Das Problem
- Beim Styling mit CSS kommt es gelegentlich zu CSS-Konflikten, wodurch unerwünschte Styles angewendet werden.
- Solche Konflikte entstehen meist durch UI-Bibliotheken, Third-Party-Widgets oder CSS-Code, der von anderen Teams verwaltet wird. In solchen Fällen lässt sich das CSS oft nicht frei ändern.
- Besonders bei Konflikten mit CSS aus UI-Bibliotheken oder von Drittanbietern kann es auch schwierig sein, zusätzliche Klassen oder IDs zum HTML hinzuzufügen.
- Wenn der problemverursachende CSS-Code außerdem sehr spezifisch geschrieben ist, kann es unmöglich sein, den eigenen CSS-Code noch spezifischer zu formulieren, um seine Priorität zu erhöhen.
- Viele Entwickler greifen dann schnell zu
!important, aber das ist kein empfohlener Ansatz.
Die Lösung
- Den Selektor einfach wiederholen.
- Zum Beispiel hat
.checkbox__icon.checkbox__icon eine höhere Priorität als ein einzelnes .checkbox__icon.
- Das mag sich wie ein CSS-Hack anfühlen, aber in der CSS Selectors Level 4-Spezifikation steht ausdrücklich: "Repeated occurrences of the same simple selector are allowed and do increase specificity.(Wiederholte Vorkommen desselben einfachen Selektors sind erlaubt und erhöhen die Spezifität.)".
7 Kommentare
Da inzwischen CSS Cascade Layers (
@layer) in allen wichtigen Browsern unterstützt werden, müssen wir uns wohl nicht mehr auf solche Hacks verlassen.https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
https://caniuse.com/css-cascade-layers
Oh, deshalb überschreibt man bei styled-components also Styles, indem man
&&verwendet?Student, Beitrag bitte entfernen
Fühlt sich wie schwarze Magie an, haha.
So einen Code werden wir jetzt wohl öfter sehen.
.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon
Oh, das wusste ich nicht ...
Je nach Situation könnte man sogar einen Präprozessor bauen und einsetzen, der Selektoren mehrfach wiederholt.
Oh, das war mir als Methode nicht bekannt.