5 ms·
You should probably use specificity first, then important, just in case you need to over-ride it in the future.
by soperj 5y ago
You should probably use specificity first, then important, just in case you need to over-ride it in the future.
- calibas 5y agoThis, if you understand the CSS rules for specificity, you almost never need to use !important.
- thrwy_ywrht 5y agoOn the other hand, using ever-increasing specificity to emulate !important is about as elegant and semantic as using the hypothetical properties !importanter, !importanterer and !importantererer
- calibas 5y agoEver-increasing specificity is how CSS works, to call that "emulating !important" is misleading. I'm suggesting using CSS as intended, the cascading part of cascading style sheets, instead of relying on a troublesome override. Edit: Take this example: div {font-size: 60% !important;} If I can't control the order the CSS is loaded, and I can't change that line directly, how do I modify it? Like this: html div {font-size: 70% !important;} The use of !important isn't some simple way of bypassing ever-increasing specificity. In many cases it just makes things more complex.
- have_faith 5y agoBeing 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 ago