Back in February I created @bramus/specificity, an NPM package to calculate the Specificity of CSS Selectors. As that version was more of a thought experiment/POC, there was a lot of room for improvement. Yesterday, after 11 betas, version 2.0.0 of @bramus/specificity was released. Let’s take a look … Quick Example To give you an idea …
Tag Archives: specificity
What’s new in
Calculate the Specificity of a CSS Selector with @bramus/specificity
Introducing `@bramus/specificity`, a JavaScript package to calculate the specificity of a given CSS Selector
Comparing CSS Specificity Values
In CSS, Specificity is expressed as a triad/triple (A,B,C). An example value would be (1,1,2). To compare specificity — i.e. to see which value has a higher specificity — you need to compare each component of the triple until you find a difference: function compareSpecificity(x, y) { // x and y being arrays such as …
CSS Specificity Calculator
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 →
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.