Global classes and Combo classes with Webflow

Global classes

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

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

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.

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

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.

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.

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.

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