CSS Specificity

Close video
Learn the concept of CSS Specificity and how it relates to using Client-first's spacing system in Webflow

CSS Specificity determines which CSS rule is applied to the element. If two CSS properties are applied to the same element, the one with higher specificity wins.

It's not simple, but it's important. And it's something anyone can understand with education and practice.

CSS Specificity is not an issue specific to Client-first. It is not an issue that Client-first is creating. It is how CSS works. We will explain how it works through an example inside the Client-first Style System.

If you use our Client-first cloneables, then you will not face an issue with CSS specificity in the utility spacing system. We have set up our cloneable to follow the correct order of classes to utilize our spacing system and other utility classes throughout the project.

If you want to add our spacing system to an existing project, then you may find the spacing system doesn't work. This docs page explains why it doesn't work and how to fix it.

By the end of the page, you will have a better understanding of CSS specificity and how it can influence any project you work on in Webflow.

Below is a video from an F'in Live episode that explains a lot of the content on this page. The full written page is a more in-depth explanation.

When will the Client-first spacing system NOT work?

You copy-paste the spacing system from our official starter project into another project by following the below steps:
  1. Inside the start project, go to the Style Guide page and open the Navigator.
  2. Copy the fs-styleguide_margin-directions 'folder' and paste it into the new project.
  3. Then, copy-paste the fs-styleguide_margins 'folder' and paste it into the new project.
You would think that Client-first is ready to use after copying all of the classes into the project. However, the spacing system will not work with this order of operations.

When we add a new div block to the page, then apply margin-top to it, everything is working as we would expect.
Then, when we apply size, say margin-large. The size is added not only to the top side, but it’s also added to all sides. We only want it applied to the margin-top property. Not all sides.

Why doesn't this example work? CSS Specificity.

The size classes were added to the project after the directions and therefore, is more specific to the project’s specificity. margin-large was added to the Webflow project after margin-top .

When you create styles inside Webflow, the styles are placed on the .css stylesheet in the order they were created. Order matters!

The rules of CSS Specificity consider a class that was created lower (later) in the .css stylesheet to be more specific to the website than the styles that were created higher (earlier) in the .css stylesheet.

A class created later in your Webflow project has a higher weight than the class created earlier in your Webflow project. If those two classes have the same CSS property applied to them, the class with the higher weight will 'win' and the style property declaration of that class will be applied to the element.

margin-large has a lower weight than margin-top  so it will not overwrite the styles of  margin-top. Based on how our spacing system works, we need the class margin-large to overwrite the margin-top: 0rem; property of the base margin-top class.

When will the spacing system work?

1. Client-first starter project cloneable
When you use the official Client-first starter project, the spacing classes will be created in the correct order. You do not have to worry about the example above occurring in your project.

2. Finsweet Extension > Client-first
Using Finsweet Extension, you can re-order classes on your stylesheet. If you did the "When will the Client-first spacing system NOT work?" workflow above, you can manually re-order the direction and size classes so they have the right weight score for the spacing system to work. However, this method is not recommended. It is recommended to use the cloneable or the workflow below.

3. This workflow
You copy-paste the spacing system from our official Client-first starter project into another project by following the below steps:
  1. Inside the starter project, go to the Style Guide page and open the Navigator.
  2. Copy the fs-styleguide_margins 'folder' and paste it into the new project.
  3. Then, copy-paste the fs-styleguide_margin-directions 'folder' and paste it into the new project.
Now, when we add a new div block to the page, apply margin-top to it, and then apply  margin-large on top, it works.

The margin-top will be applied only to the top side of the div block.

Example of 'display: none' CSS Specificity issue

Remember that CSS Specificity is not specific to Client-first or our spacing system. We will walk through an example that has nothing to do with spacing. It can occur on any Webflow project regardless of build strategy.

First we will add a display-none class, which is going to set the display property to none. Our intention is to use this class throughout our project as a utility class that can be applied anywhere in our project.
Next, let’s create an element called background-red, with it’s display set to block and it’s background set to the color red.
When we add display-none to background-red as a combo class. Our first thought would be that background-red should be set to display: none.

Because of CSS Specificity, this does not happen. The display property on display-none will be ignored.

Since background-red was created after display-none, it is more specific to the stylesheet and to the project.

The display property of background-red has more weight than the display property of display-none, which makes background-red win.
I remember feeling like this 🤯 after learning this concept. An organized to set of rules and procedures for properly applying CSS to our project. There is a whole world of advanced CSS knowledge and CSS Specificity is part of it.

Fixing this problem with the Finsweet Extension

We found ourselves at Finsweet have CSS Specificity issues in our project, which is not necessarily easy to fix in Webflow. To improve our workflow, we added CSS Styles Reorder Candy to Finsweet Extension.

The above display: none use case is a great example why we've added this functionality. This problem above can be fixed quickly and reliably with Finsweet Extension.
  1. Open the Extension, select Candies, and then, CSS Styles Reorder.
  2. Move the background-red class before the display-none in the list of classes and Save.
This action visually changes the order of the styles in the .css file! 🤯 This fixes our CSS Specificity issue inside Webflow.

Now background-red is first and display-none is after it. Now we can use our display-none class as intended. If display-none was the last class on the stylesheet, it will be truly global in nature. It can overwrite the display property of any class in the project.

Conclusion and next steps

The information above is a small piece of CSS Specificity. It's a complex concept with a list of many defined rules. Above we explain one of those rules — the order of classes on the .css stylesheet.

It's not required to understand every part of CSS Specificity to be a pro in Webflow. However, when you do understand advanced concepts like this, you start to take your Webflow knowledge to the next level. Understanding CSS Specificity gives you a deeper connection to the CSS in your project. The more you understand it, the deeper the connection. If you're a pro in CSS Specificity, you will have have more control of the styes in your project.

There's a lot of content about CSS Specificity online. Start with W3 Schools CSS Specificity documentation page if you're interested in learning more.

Next: Spacing decisions

Understand how to make intelligent decisions around spacing on your website.