CSS Guidelines

Why do we need this?

At our agency, we use Webflow as an implementation tool, and as such we follow implementation best practices. Having a pre-define Style System allows us to keep things organized, and scalable.

Easier and faster to scale projects by everyone

Using a pre-defined system allows anyone (not only developers) to scale a project and add more pages on top.

Integrate with custom code solutions

Our Style System is created based on BEM, but tailored to Webflow's environment nuances to allow easily coding on top of it.

Keep high-quality engineering standards

We deeply care about quality and make sure that everything we do meets the highest engineering standards.

Classes

Our class nomenclature system is a variation from BEM (Block Element Modifier), a methodology that helps you to create reusable components and code sharing in front-end development.

Why do we need this?

  • Standalone element that is meaningful on its own.
  • Components start with “c-” (ie. c-hero)
  • Use descriptive names
  • Only 1 per element

Children

  • Parts of a component and have no standalone meaning.
  • Starts with “c-component-name_” (ie. c-hero_content).
  • Use descriptive names
  • Only 1 per element

Modifier

  • Use them to change a component or children’s appearance.
  • Also known as “combo classes”
  • Modifiers start with “cc-” (ie. cc-hero-big)
  • Use descriptive names
  • Ideally use 1 per element (there are exceptions)

Best Practices

Lower Case, no spaces

When publishing, Webflow automatically transform all classes into lowercases, and all spaces into underscores. So it makes sense to already do it in the Designer and have the class names as they will be output. Tip: This is also great to work with custom code when you need to use that class.

Automatically-created classes = NOT GOOD!

The moment you begin styling an element, a class is automatically created and applied to the selected element. These classes are created using really bad practices, such as caps, spaces, and are not descriptive to be reusable.

What to do? You can recognize classes that are created automatically by names like Div Block 2, or Paragraph 2 . If you find a class that was created automatically, simply replace it by a proper Class Nomenclature

Layout

Webflow elements are basically HTML elements that you can drag and drop inside your Canvas, so when building using Webflow we need to keep in mind the HTML Markup best practices.

Hierarchy

When creating a new section on your site we need to create the structure first. At its core, it should look something like this:

  • Sectionc-hero  c-section  c-footer
  • Containerc-container
  • Elements → anything you want

Sections

To keep naming as standards, we define these names for the most common elements:

  • c-hero
  • c-section → Most used for general sections
  • c-nav
  • c-footer

With sections, you can use combo classes to add other styles. For example, when you need to change the hero image on internal pages: c-hero cc-about

Containers

Containers in our templates are predefined using the
class c-container.

  • Should be a <div>
  • Do not use Webflow Container Element
  • Do not change the style of the containers: All further styling should be added as children element
  • Don’t add combo classes to containers

We have some predefined containers based on our grid 12 columns grid:

  • c-container
  • c-container cc-large
  • c-container cc-small
  • c-container cc-tiny

Standards

At our agency, we have a couple of standardizations to make sure we are all doing things the same way, and anyone can jump in a project with the ability to understand what/how was done and why.

Typography

Define styles for each type element. Don’t use H1, H2, etc for style. The headings define the structure/markup, not the style.  These are the default names we are using for fonts are:

  • c-title-large
  • c-title-big
  • c-title-medium
  • c-title-small
  • c-title-xsmall
  • c-title-xxsmall
  • c-text-large
  • c-text-big
  • c-text-medium
  • c-text-small
  • c-text-xsmall
  • c-text-xxsmall

Each text must have a wrapper c-text-wrap or
c-title-wrap. On top of these classes we can add Combo Classes to update specific styles :

  • paddings and margins
  • size (width, height, etc)
  • position (absolute, float, fixed, etc)

Create a new class for the text or title if you need to update some of the followings styles:

  • font-weight
  • font-color
  • Color
  • font-size (only under extenuating circumstances)
  • line-height (only under extenuating circumstances)

Buttons

We have defined 3 different button types. You can add a div wrapper with class c-button-wrap you can add Combo Classes to add variables (ie: changing position). If you have a button with a unique style, please create a new class.

  • c-button (primary)
  • c-button cc-secondary
  • c-button cc-tertiary

Best Practices

  • Buttons should always be included in the Style System.
  • Buttons are built with Link Blocks and Text Blocks (not Buttons).
  • If possible, to position the button on a specific position (ie. float left on the nav) create a parent  <div> element and set the styles to that div (adding a new class. ie c-button-nav)

Responsive

It’s important that everything you build it’s working on smaller size screens, all the way down to mobile.
When updating a style to fix a responsive view, to make sure we are not breaking every other element with the same class, we use combo-classes (aka modifiers).

The nomenclature of the combo class should be:
cc-{breakpoint}_{type of fix}

For example, if we have a button that, because the text is too long (cof cof German language), you may want to adjust the font-size to be smaller. For this case, your button should have the following classes:

c-button-m cc-blue cc-portrait_font-size

Clone Webflow Base Project