WebflowWebflow Enterprise Partner
06Class Types

When individual elements or groups of elements need to diverge from the element-wide style, attaching a class allows us to make an exception. But with great power comes great responsibility, as classes can very quickly become a messy spiderweb of interdependencies and over-specification. The thing to consider when creating a class is that adjustments may need to be made in the future, which makes it important to author classes in ways that don’t need to be untangled at a later date.

Fundamental to creating usable classes is understanding the four different types of classes: simple classes, compound classes, complex classes and combo classes. To differentiate between the different types, it helps to think of them in terms of chemical compounds.

Simple Classes

A simple class can be thought of like a chemical element, such as H₂ (Hydrogen) or O (Oxygen).

H₂

.h₂ {
  background-color: blue;
}

A simple class, on its own, represents a very specific behavior. H₂, for instance, might represent a blue background. And O might represent a bubble background image. On its own, the usefulness of a simple class can be limited, but they can be strung together to form more sophisticated compound classes.

Compound Classes

A compound class is a series of simple classes that behave as a sum of their parts. Using the above example, if we string together H₂and O, we'll end up with the bubble background image on top of a blue background, combining to represent the appearance of water.

H₂ O

.h₂ {
  background-color: blue;
}
.o {
  background-image: url('bubbles.png');
}

Using simple classes like a library of elements, we can string them together to quickly construct most common styles found on the web without having to name, declare or maintain complex classes.

Complex Classes

Complex classes have a common name that doesn't necessarily describe its make-up or behavior. We may create a class that has all of the properties of H₂ O, but name it Water.

Water

.water {
  background-color: blue;
  background-image: url('bubbles.png');
}

To understand the behavior of a complex class, we'd have to refer to the style panel to see exactly what CSS properties were declared. Creating a complex class can sometimes be more appropriate than stringing together an obscene number of simple classes, particularly when an element is intended to display differently across different viewports.

Combo Classes

Combo classes are less common and behave a little like chemical reactions in that when two particular classes are combined (in any order), the resulting behavior is more than the sum of its parts. For instance, if we drop K (Potassium) in a glass of water, the unexpected reaction will be fire...

Water K

.water {
  background-color: blue;
  background-image: url('bubbles.png');
}

.k {
  background-color: gray;
}

.water .k {
  background-color: red;
  background-image: url('explosion.png');
}

In other words, whenever these two classes are combined, the result will be the explosion background image. But alone, K will just appear as gray, and Water will just appear as blue with bubbles. This comes in handy when creating sophisticated relationships between simple classes.

Class Creation

In other words, whenever these two classes are combined, the result will be the explosion background image. This comes in handy when creating sophisticated relationships between simple classes.

A simple class sounds a lot like what it is: a single class attached to an element, declaring a style or a group of styles that serve a single purpose. These styles are named after the class’s utility (“Center” or “Background - Black”), & can be strung together to form compound classes. For instance, you might attach “Center,” “Background - Blue,” “Position - Relative,” & “Margin - Bottom - Auto” to an element in order to achieve all of those classes. The benefit to this is that a team member can look at the class names & quickly discern why the element is behaving as it is. Additionally, if the blue color used on the project changes in the future, updating that single class will update every element that uses “Background - Blue,” rather than having to update all of those classes individually.

An example of a simple class

Updating a simple class is very straightforward, as the declared styles all appear blue. A compound class, however, displays all declared styles as orange. In order to make adjustments to these classes, they must be edited as simple classes. This means it’s often necessary to create a throwaway div, apply the simple class, make the adjustment, & then delete the div.

An example of a compound class

A complex class is similar to a simple class, except instead of being named after the utility of the class, it’s named after the function of the element, & may have multiple utilities. For instance, you might name a class “Hero Image Wrapper,” which may declare a number of different sizing & positioning styles which vary by viewport. These are especially useful when behaviors change from viewport-to-viewport. They may also be combined with simple classes in order to create compound classes that further specify the style of the element (“Hero Image Wrapper,” “Text Align - Left”).

An example of a complex class

Combo classes are similar to compound classes, but require that two or more specific classes be applied to the same element for the declared styles to take effect. Whereas compound classes display all style declarations in the style panel as orange, combo classes will display these declarations in blue. The exception is when the classes are combined in an order other than which they were originally combined, the declarations will display in orange.

An example of a Combo Class

One uses of a combo class is achieve a very specific exception or clarification to a complex class. For instance, you may want two different versions of a hero: landscape & portrait. If “Hero - Wrapper” is the landscape version (16x5), it is more simple to just append a “Tall” class that simply adjusts the dimensions to 3x4.The other use of a combo class is to override stubborn default Webflow styles. Webflow’s column component, for instance, is built for 20 pixel gutters. The columns, therefore, have 10 pixels of padding on the left & right, & the row has 10 pixels of negative margins on the left & right. Simply applying a class to the columns changes their padding. But a class does not override the row’s negative margins. A combo class is needed, therefore, to increase the CSS specificity & override the Wefblow default negative margins.

This works because of a complex set of rules that define CSS hierarchy, the basics of which are described by the following rules...

• Body (All Pages) declarations are more specific than the default styles (with a few exceptions).

• Element-wide declarations (i.e. All Paragraphs) are more specific than Body (All Pages) declarations.

• Classes are more specific than element-wide declarations, & more recently added classes override older classes.

• Combo classes are more specific than simple, complex, or compound classes.

There are additional nuances & dependencies which may require trial & error to navigate. But a key principle to keep in mind is that more newly added classes cannot be overridden by older classes. Therefore, if you create a “Text Align - Left” class that left aligns text, but then create an “Intro Text” class that defines the text as centered, appending “Text Align - Left” will not affect the element. The trick to avoiding this is to avoid making declarations in a complex class that you have a utility class for. In other words, if you create a compound class using “Intro Text” & “Center,” you can simply remove “Center” & replace it with “Text Align - Left” without worrying about hierarchy conflicts.

Note: If a sequencing conflict does appear, the easiest solution may be to delete all instances of the earlier class, clean up classes in the Style Manager to delete its entry, & then recreate the class, adding it back to all of the elements from which it was removed. If the earlier class is widespread & the conflict only appears to occur in a single incidence, the easiest solution is to create a combo class with the same function as the older class. If the conflict reoccurs, it may best to simply clone the earlier class.

Up next

07 Class Management
Runtime: 7m 12s

What’s in a name? As it turns out, a whole lot. Avoid confusion and frustration by choosing naming conventions that are both purposeful and accurate.

Take me there