Global classes and Combo classes with Webflow

Global classes

Let's define a series of global classes with one property for each.

This is some text

Unstyled text in a div.

This is some text

bg-yellow

HTML class="bg-yellow"

CSS .bg-yellow { background-color: yellow; }

This is some text

red

HTML class="red"

CSS .red { color: red; }

This is some text

centered

HTML class="centered"

CSS .centered { text-align:center; }

This is some text

bolder

HTML class="bolder"

CSS .bolder { font-weight:600; }

Now let's add multiple of those global classes on the element, in whatever order we want.

This is some text

bg-yellow

red

centered

bolder

HTML class="bg-yellow red centered bolder"

CSS .bg-yellow { background-color: yellow; }
.red { color: red; }
.centered { text-align:center; }
.bolder { font-weight:600; }
.bg-yellow.red.centered.bolder { }

All the defined styles are applied when global classes are stacked into a combo class, but nothing is defined for the combo.

Combo Classes

Let's define a global class called .bigger, and  define a taller font size for it, then add a combo bigger blue, and make it blue.

This is some text

Unstyled text in a div.

This is some text

bigger

HTML class="bigger"

CSS .bigger { font-size: 24px; }

This is some text

bigger

blue

HTML class="bigger blue"

CSS .bigger.blue { color: #3498db; }

Now let's try to just add the global class .blue to the element

This is some text

blue

HTML class="blue"

CSS .blue {  }

Properties defined for a combo class aren't applied when parts of the combo are used as a global class. The blue color is only defined in the CSS as .bigger.blue, and nothing is defined for .blue.

Global classes, Combo classes and Specificity

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

Let's do a new experiement: we'll add properties to both the combo class and the global one.

This is some text

Unstyled text in a div.

This is some text

bigger

HTML class="bigger"

CSS .bigger { font-size: 24px; }

This is some text

stand-out

HTML class="stand-out"

CSS .stand-out { font-weight: 800; }

This is some text

bigger

stand-out

HTML class="bigger stand-out"

CSS.stand-out { font-weight: 800; }
.bigger.stand-out { text-decoration: underline; }

We observe that the combo-class is taking propeties from both the ones defined for the combo and the ones defined for the global class.

In case of conflicts between the same propeties declared on both the combo and the global class, the one defined on the combo class will win because the selector .bigger.stand-out has more specificity than the selector .stand-out. In this case, its higher specificity comes with the fact that the property is attached to a more complex object, the combo class, a series of 2 classes.

This is some text

Unstyled text in a div.

This is some text

bigger

HTML class="bigger"

CSS .bigger { font-size: 24px; }

This is some text

discreet

HTML class="discreet"

CSS .discreet { opacity: 50%; }

This is some text

bigger

stand-out

HTML class="bigger stand-out"

CSS.discreet { opacity: 50%; }
.bigger.discreet { text-decoration: underline; opacity: 10%;}

Logically, we observe that the opacity property defined for the combo class wins over the one defined on the global .discreet class.

How could we define the opacity of the global class .discreet so it prevals on the opacity defined for the combo class? By increasing its specificity. Here are two ways to do it, the first one is using a higher amount of elements and the second one uses a special !important declaration. For both, in Webflow, you'll need to use Custom CSS code.

This is some text

HTML class="very-discreet"

CSS.very-discreet { opacity: 50%!important; }
.bigger.very-discreet { text-decoration: underline; opacity: 10%;}

This is some text

HTML class="very-discreet"

CSS html.p.very-discreet { opacity: 50%; }
.bigger.very-discreet { text-decoration: underline; opacity: 10%;}

!important is making the browser consider that this rule has more specificity, and html.p.very-discreet has more specificity than .bigger.very-discreet.

Made by Vincent Bidaux using Webflow.
For more, follow inb4.webflow.io, @vin & @vinchubang on Twitter.