Mastering CSS specificity: the ultimate guide for Webflow

Alright, Webflow ninjas, it's time to tackle the beast that is CSS specificity. CSS specificity is the set of rules a browser uses to decide which CSS rule wins when several rules target the same element. And to make this as thorough as possible, we'll also look at how Finsweet's Client-First system can help keep your CSS clean and maintainable, and keep that old stylesheet down in size. Now, we’re just a small ‘only’ Webflow studio these days. We did start out in this game a bit before using Webflow, so we had a pretty good understanding of CSS, but we totally get that a lot of Webflow Designers learn CSS for the first time in Webflow, and there’s nothing wrong with that. Getting to grips with CSS specificity as soon as possible just makes things so much easier for a Webflow developer. But enough of that, let’s just get stuck in.

What is CSS specificity?

Think of CSS specificity as a point system where different types of selectors contribute different values to the specificity score. The higher the specificity, the more priority the rule has. Here's a breakdown of the specificity hierarchy:

1. Inline Styles: 1000 points. These are the most specific.
2. IDs: 100 points. Very specific.
3. Classes, Attributes, and Pseudo-classes: 10 points each. Moderately specific.
4. Elements and Pseudo-elements: 1 point each. Least specific.

Example Calculation:

• #header = 100 points (ID selector).
• .menu .item = 10 + 10 = 20 points (two class selectors).
• ul li a = 1 + 1 + 1 = 3 points (three element selectors).

NB! Those points are a handy way to think about it, but they aren’t really a base 10 score. The browser compares the columns one at a time, from the most specific down, so a single ID beats any number of classes. Also, :where() adds no specificity at all, while :is(), :not() and :has() take on the specificity of the most specific selector inside the brackets. If two rules end up with exactly the same specificity, the one that comes last in the stylesheet wins.

Let's break it down further with more examples to clarify how specificity works in real-life scenarios.

Example 1: Combining selectors

Consider these rules:

An anchor <!-- fs-richtext-ignore --><a> within an element with the ID #nav and the class .nav-item will be red due to the specificity of 11 points from the .nav-item a selector, which has a higher specificity than .nav-item. The #nav rule never gets a say here, because it targets the element with that ID, and the anchor only inherits from it. A rule that targets the anchor directly always beats an inherited value.

Example 2: Overriding specificity

Consider these rules:

A <!-- fs-richtext-ignore --><p> element with the ID #content and the class .section will have a yellow background due to the ID selector's higher specificity.

CSS specificity in Webflow

Webflow is fantastic for visual web design, but under the hood, it’s all CSS. Understanding specificity can help you debug why certain styles aren’t applying.

Example in Webflow

Consider you have these CSS rules:

A paragraph with the ID #hero and the class .header will be red, due to the ID selector’s higher specificity.

Expanding on this, let’s look at a more complex example:

Here, an h2 inside an element with the class .article, which itself sits inside an element with the ID #main-content, will have a font size of 2em.

Webflow Designer

Now, that seems super simple, right? Of course it is a bit different in Webflow. It’s a visual development platform, so what’s what, where do I see it, and what’s applying to what?

All these questions are completely valid since looking at the element in the Designer alone like the image below won’t tell you much aside from the class name.

So what in the Designer does tell you? First off, we can easily see the structure, which immediately helps us.

But more importantly, we can see exactly what the element is inheriting from when clicking just above the class name on the right of the Designer.

Finsweet’s Client-First system

Finsweet's Client-First system is a game-changer for keeping your Webflow projects organised and scalable. It emphasises a structured approach to CSS that makes it easy to understand and maintain.

Core principles of Client-First

• Global Classes: Define broad styles that can be reused across your project.
• Custom Classes: Specific to individual components, making styles modular.
• Utility Classes: Single-purpose classes for minor tweaks.

Example (the class names here are illustrative, real Client-First names are listed below):

Expanding on Finsweet’s Client-First system:

Types of classes in Client-First

1. Utility Classes: Applied globally, for specific CSS properties.
   • Example: .background-color-primary { background-color: #ff0000; }
2. Custom Classes: Specific to components or elements, often with underscores.
   • Example: header_background-layer
3. Global Classes: Used across the entire project, ensuring uniformity.
   • Example: .margin-large { margin: 3rem; }

Using combo classes

Combo classes in Client-First use a base class and add variations with the is- prefix.

• Example (Designer notation, which is .button.is-primary in CSS): button is-primary { background-color: #007bff; }

Avoid deep stacking

Deep stacking refers to stacking many classes on an element, which Client-First advises against. Instead, use organised, clear class names to maintain readability and manageability.

• Example of deep stacking: class="text-bold text-large text-center"
• Better approach: Use a single, custom class like .header-text

Why class order matters in Webflow

Webflow writes your classes to the stylesheet in the order you created them, and when two classes have the same specificity, the one created later wins. That is why pasting a spacing system in the wrong order can break it, and it is exactly what the Finsweet extension’s reorder tool fixes. Combo classes are the other half of the story, and we’ve covered them in our post on adding CSS blend modes with combo classes and in creating a blog summary with combo classes. If you’re weighing up Client-First itself, read whether Finsweet Client-First is right for you.

Practical tips for managing specificity

1. Avoid inline styles: They have the highest specificity and can override almost everything else.
2. Use ID selectors sparingly: These can complicate your CSS if overused.
3. Organise styles hierarchically: Use systems like Client-First to keep your CSS modular and maintainable.
4. Use Webflow’s Designer: Visual tools can help you visualise and manage your styles effectively, but it can be hard to rearrange once you’ve started. Always clone the Finsweet Client-First Cloneable or others like Relume if you want to go down that route.
5. Use the Finsweet Chrome Extension to reorder: Remember, this is an advanced move and you should be comfortable in your understanding of CSS specificity, but the Finsweet extension does allow you to reorder the classes in Webflow.

CSS specificity FAQ

What is CSS specificity?

CSS specificity is the score a browser gives each selector to decide which rule wins when several rules set the same property on one element. Inline styles beat IDs, IDs beat classes, attributes and pseudo-classes, and those beat plain elements and pseudo-elements.

How do you calculate CSS specificity?

Count the IDs, then the classes, attributes and pseudo-classes, then the elements and pseudo-elements in the selector, and compare the counts from left to right. So #header beats .menu .item, and .menu .item beats ul li a.

What wins when two selectors have the same specificity?

The one that comes last in the stylesheet. In Webflow that means the class you created later, which is why class order matters and why the Finsweet extension can reorder them.

Does !important override specificity?

Yes, an !important declaration beats normal declarations, and it is the only thing that can override an inline style. Use it as a last resort, because it makes your CSS much harder to debug.