6 ms·
Being more specific often ends up more tightly coupling your selector to the structure of the DOM. .className { property: value !important; } is more resilient
by have_faith 5y ago
Being more specific often ends up more tightly coupling your selector to the structure of the DOM. .className { property: value !important; } is more resilient to DOM changes than adding extra selectors to increase specificity.
- smegsicle 5y agohaving an id on the top <html> tag and mentioning it in css rules seemed very effective to me- especially when the tag was the name of the page, which is what i wanted to override by anyway
- debesyla 5y agoI personally like the body:not(#fakeid) trick :-)
- datavirtue 5y agoYou know what I hate about CSS? Having to learn a bunch of "tricks."
- hallway_monitor 5y agoSo much so that a business with those keywords recently sold for eight figures!
- soperj 5y agoI haven't found that to be the case.
- csnover 5y agoI’ve noticed many CSS authors don’t seem to know that you can just repeat a selector to increase its specificity. For your example, `.className.className` increases the specificity without adding more reliance on DOM structure.
- jimhi 5y agoI did not know this, thanks for the tip
- jaywalk 5y agoWow, I've been doing CSS for a very long time, and had no idea about repeating the selector to increase specificity. That'll come in very handy, thank you!
- dopamean 5y agoThis is a really cool tip.
- 3np 5y agoEDIT: Memory was playing tricks on me
- HWR_14 5y agoVery cool tip. Do you know if that's an implementation artifact or part of the spec?
- csnover 5y agoIt is part of the spec, and is explicitly noted to avoid confusion starting in Selectors Level 3[0]: > Note: Repeated occurrences of the same simple selector are allowed and do increase specificity. [0] https://www.w3.org/TR/selectors-3/#specificity https://www.w3.org/TR/selectors-3/#specificity