On the Polypane website you can find an interactive Specificity Calculator. Paste in any selector from CSS Selectors Level 4 — yes, that includes those special cases :is(), :where(), :not(), etc. — and out comes the Specificity. CSS Specificity Calculator →
Tag Archives: specificity
The Future of CSS: Cascade Layers (CSS @layer)
When authoring CSS we have to carefully think about how we write and structure our code. Cascade Layers (CSS
@layer) aim to ease this task. Using the Specificity of :where() as a CSS Reset
As mentioned in Three important things you should know about CSS :is(), the specificity of :where() will always be 0: :where() works the same way like :is() does, but will always have a specificity of 0. You can cleverly wrap this around other selectors to undo their specificity. Think of :where(:not(…)) for example. Over at …
Continue reading “Using the Specificity of :where() as a CSS Reset”
Three important things you should know about CSS :is()
Back in 2019 I shared how the CSS :is() selector will simplify things when writing CSS. What I didn’t know back then, and only have learnt quite recently, are these three important facts about CSS :is(): The selector list of :is() is forgiving The specificity of :is() is that of its most specific argument :is() …
Continue reading “Three important things you should know about CSS :is()“
“On the origin of cascades“, a talk by @hdv on how CSS came to be
Hidde recently gave a talk at CSS Café on the origins of CSS: It’s been 25 years since the first people proposed a language to style the web. Since the late nineties, CSS lived through years of platform evolution. The cascade, specificity and the enormous choice in values and units set the language up for …
Continue reading ““On the origin of cascades“, a talk by @hdv on how CSS came to be”
The CSS Cascade – Or, How browsers resolve competing CSS styles
Amelia Wattenberger is at it again with this nice interactive page on the CSS Cascade Every time we write a CSS declaration (or rule), it will enter the CSS Cascade, which will determine whether or not it will end up as the final style. The further down the cascade a declaration falls, the less likely …
Continue reading “The CSS Cascade – Or, How browsers resolve competing CSS styles”
CSS Specificity Graph Generator
Online Specificity Graph Generator. Just paste in a blob of CSS and the graph will be generated. CSS Specificity Graph Generator → If you’re looking for an offline tool, CSS Reporter has got you covered.
The Specificity Graph
The Specificity Graph is a very simple model for diagrammatically assessing the overall health of your codebase in terms of specificity—a way of looking at an entire project’s CSS and highlighting any potentially troublesome areas of higher-than-ideal specificity. We can then use this snapshot to refactor and rearchitect old projects into a better shape, or …
CSS Specificity : Things you should know
Nice summarizing article for those still in the dark on the subject. The article basically is a rewrite of Andy Clarke’s Specificity Wars (the first article ever on the subject, not?) but then with some little extras.