WebflowWebflow Enterprise Partner
07Class Management

Class management can be a real source of confusion for teams working together on a project. Classes can be named so generically that they don’t convey the purpose of the class, like “Div 16.” Or otherwise, they might be named so specifically that they reference content that may not be permanent, like “Cat Photo.” There’s nothing more confounding than coming across a photo of a dog with the class “Cat Photo” after the content was updated. But these things happen because figuring out the ideal name for dozens or hundreds of elements can be exhausting.

Plenty has been written about class naming, and there are strong opinions about Atomic versus Block-Element-Modifier approaches. But for a team structure within a Webflow environment, we've found that pulling a little from each seems to work best.

When an element can be styled by stringing together a few simple utility classes, there's no reason to create a unique class for the element. But when the string of utility classes would become unwieldy, it's normally best to go ahead and create a complex class for that element, perhaps even pairing that with utility classes. The general strategy, however, should be to avoid creating new complex classes unless it's definitely called for. Minimizing the creation of new styles will make the project easier to maintain and update in the long run.

Note: Webflow converts class names to lowercase and replaces spaces with hyphens in source code, so we will reflect this in our HTML and CSS documentation.

Classes in Action

To build this out, we'll set up a simple card. We'll create a complex class for Featured Card Wrapper because it will have abnormal padding to create gutters between the cards (left and right padding) and different widths across viewports. We'll use project-specific utility classes Background - Light Gray to give the card some shape and Padding - Default to inset the card content. And we'll use the evergreen utility class Caps to capitalize the headline.

Featured Card Wrapper Background - Light Gray Padding - Default Caps

/* Evergreen Utility Classes (Atomic) */

.caps {
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* Project-Specific Utility Classes (Atomic) */

.background---light-gray {
  background-color: #fafafa;
}

.padding---default {
  padding: 2.78vw;
}

/* Complex Classes */

.
featured-card-wrapper {
  width: 25%;
  padding-left, padding-right: 2.78vw;
}

@media(max-width: 991px) {
  .featured-card-wrapper {
    width: 33%;
  }
}

@media(max-width: 676px) {
  .featured-card-wrapper {
    width: 50%;
  }
}

@media(max-width: 479px) {
  .featured-card-wrapper {
    width: 50%;
  }
}

<div class="featured-card-wrapper">
  <div class="background---light-gray">
    <img src="featured-image.jpg" />
    <div class="padding---default">
      <h2 class="caps">Lorem ipsum dolar</h2>
      <p>Quisque felis purus, efficitur ac neque in, pulvinar eleifend nisi. Mauris nec egestas purus. Praesent sit amet ipsum non turpis congue rutrum ut sit amet magna.</p>
    </div>
  </div>
</div>

On Naming...

Since Webflow takes care of standardizing our class names in the source code, we find it's best to maximize readability by leveraging spaces and title case. However, since the Webflow Styles Panel will truncate classes, it's important to name things succinctly. To this end, abbreviations like LG (large) and MD (medium) are often useful.

Also, when creating complex classes, it's important to define an element by its role rather than its content, since content changes.

Up next

08 Utility Classes
Runtime: 8m 53s

A standardized library of utility classes can go a long way towards jump starting a build and keeping team members on the same page. 

Take me there