Streaming live at 10am (PST)

Class styles not being consistently applied - Combo classes & specificity


#1

Hey gang.

I’ve been having this repeated problem with class styles not being consistently applied.

For example: on my home page, I’ve created a class called “main text style” with the font Merriweather, colour grey and aligned center.

On the “About” page, whenever I use that same class “main text style” it changes my text to Arial BUT it keeps Merriweather for the home page.

Sometimes when I apply a class to another element, NONE of the attributes I’ve previously defined are applied at all! In those cases i’ve kept the class name and just re-entered the attributes and left it at that.

But now, with this font issue I thought I would post the problem here.

B.


Here is my site Read-Only: https://preview.webflow.com/preview/mcisaac-music-school?utm_source=mcisaac-music-school&preview=5e9bf99a03545944399415245b2e8bb0


#2

Combo classes works a little difference on webflow.

one class

Add one and only one class for “heading” element - than add class named “red” (change color to red).

The CSS output is:

.red{
   color: red;
}

Combo class

Now add two classes “i-am” “not-red” (Combo) to another element. Than change the color to blue. The output will be:

.i-am.not-red{
    color: blue; 
}

Learn about this selector:

Last step

Add color-red (As third class) to .i-am.not-red.

The result?
The text still blue. This is not a BUG (Learn about css specificity).

css_specificity
.i-am.not-red is more specific than color-red
(One said “select element with class “i-am” And& “not-red” and the other said select element with class of “color-red” - the first `more specific” win).

https://www.w3schools.com/css/css_specificity.asp

Working example:

Select new element & Create class “very-big-text” and change font-size to 88px. The output:

.very-big-text{
   font-size: 88px;
}

Now add one more class “i-am-also-bold” (Create combo) and set the font-weight to bold.
The output:

.very-big-text.i-am-also-bold{
     font-weight: bold;
}

Now if you add to this combo the “red-text” class the output will be:
text with font-size 88px, bold, and red (No conflict her).

From theory to practice

  • Its better to declare fonts on body level (Than any class you added with font change will be more specificwin” the body font)

  • Dont repeat yourself. If you create a button - first create base class (Without COMBO!). Set padding, font size and on. Than and only than start to create combo-classes for "red-button" "blue-button" "outline-button" & "large-button". (Otherwise each time you should create everything from zero).

Summary: Like the “red-text” example this is how CSS works.


#3

Riiiiighhhtttt, specificity! Oh man, of course!

It’s been a while since I learned code and I tend to forget these things. Thanks Siton!

B.


#4

Small Q - but very big topic. If you know this concepts you create sites faster and DRY. If this answer solve your problem mark as solution to close this topic (And for future searches). Thanks


#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.