What’s new in @bramus/specificity v2

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 …

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 …

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 …

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() …

“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 …

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 …