Naming convention

When we start typing class names in the Style panel of Webflow Designer, a list of classes appear as a suggestion for our typed class.

If we want to find a class that sets a max-width, we will type our .max-  prefix to search for our global glasses that control max-width. We are using the word 'max' as our prefix keyword for max-width. Typing 'max' in the Style panel will return all of of out classes that refer to max-width, for example, .max-128  .max-256  .max-512  .max-768

Now we can select the max-width option that we want without remember the specifics of the class name. Using the prefix gives us a clear, organized search result for this important style.
‍
The concept of class is search is seen throughout Client-first. When we create components in our Webflow project, our component name serves as our prefix keyword.

For example, we may create a "testimonial slider" component in our project. We will give the testimonial slider, as well as all of the elements inside, a prefix of .testimonial-slider_ . Now when we type 'testimonial-slider' in the Styles panel, we can view all custom classes related to our testimonial slider.

A strong keyword give you context into what this class/element is doing. Being as descriptive as possible in your naming will help you stay organized.

Let's look at the examples above.

.max-  is telling us this class is for max-width. This will be the only style applied to this class. The prefix identifies the style applied to it and the reason we created this class. When we see the class .max-128 we know this is a style of max-width of 240px. This class name tells us exactly what we need to know when we use it in our build.

.testimonial-slider_ is telling us that this a custom class created and used for our testimonial slider. The prefix identifies the component or element that it is being influenced by this class. When we see the class .testimonial-slider_headshot-wrapper , we know that this class is created specifically for a headshot wrapper inside of our testimonial slider component. We get a lot of context around what this class is used for on our website.

Our prefix keywords can help us identify:
‍
- The css style the class is created for (.max-128, .background-green)
‍
- The page element the class is created for (.testimonial-slider_headshot-wrapper, .card1_ layer-top, .form-submit, .cta-alternative)


When to use one or the other?

It is up to you, the developer, to name your classes so they give the most amount of context while staying organized and meaningful in your build.

As you continue reviewing and understanding this documentation, you will better understand how to give meaningful names to your classes.

When creating new styles in your project, be specific when naming them. Class names, add-ons, and combos should be named in a way that gives the client the most context into what that class is doing. If a class name or group of class names is read, the reader should have as much information as they can about what the class' purpose is.

Let's look at .space-top-small as an example
‍
The most general keyword is 'space'. This is telling us those class has to do with spacing an element. This is the primary and most powerful keyword that defines the class name.

'top' is getting more specific and telling us where that space is being applied. It's telling us this is vertical spacing applied to the top of the element.

'small' tells us the size of the spacing that is applied to the top. This is the most specific keyword relates to the spacing applied to the element.

Use the same commonly used keywords so your build stays organized as you create custom classes. Formalizing keywords like 'list', 'item', 'container', 'wrapper', etc. will help us stay organized.

A global class is a class that is universal in the build. It is not specific to one element or one style. This class can be applied to any element and the styles will be applied to that element. This is commonly used for spacing, grids, global padding, and colors.

Changing a global class should be simple and powerful. One style change will update this global class globally across the website.

For example, .space-bottom-large has a margin-bottom of 60px. If your client wants spacing reduced across the entire website, you can update .space-bottom-large to 40px in one style change. This change will be seen site-wide everywhere .space-bottom-large is applied.

A global add-on class is a global class. It is an 'add-on' if it is added to an element in addition to other classes. It can be added to other classes on the website to add a style to an element.

For example, we have .container and it serves the purpose of creating the initial container structure. It gives you the option to define a default max-width to your container. If all or most of your website uses the same max-width, you can apply it as a default to the .container class.

If there are many different max-widths or you have one custom max-widths, you can use global add-on classes to manage your site's max-width.

This Style System comes with classes .max-128. max-480 .max-960. These can and should be customized for your build. Please be careful with using numbers on add-on classes. If you add .max-128 as an add-on class to elements across your site, and then you change the class name to .max-132, this change will not be seen site-wide. The add-on classes will not change along with the base class. Your site will now have a dead .max-128 class across your website with no styles applied to it.

.max-128 can be added in addition to .container to create a new style on the element. We get the base core of .container + a custom the max-width property for that section. We can change .max-128 to .max-132 to change this style site-wide.

.max-128 is a global class, which means it can be applied to any element on the site. It is not specific to use with containers. We can add .max-128 to a paragraph, title, or any element on our site. That element will have the max-width property without the unneeded base structure from .container.
‍

A combo class is created as a variant to a base class. A combo class is used when there is a variation that needs to be added to a class that already exists.

The key difference between a global add-on and a combo is that a combo is creating a new class styling on the css stylesheet and the global add-on is not creating a new class styling on the css stylesheet.

For example, we have .section to define the primary sections of a page. We have useful global add-ons like .section-horizontal-large that we can add to .section to create inner padding. If our homepage hero has a unique style that doesn't fall into our global system, and is not recurring enough to create a new global class, we can create a new combo class.

For example, our homepage has a unique gradient background color, different spacing rules, and a special z-index. This is too much customization to try to fit into a global class system. We can create the new class styling .section .home-hero so we can customize our hero as needed. On this new combo class, we can apply all of the unique styles we want so our homepage hero.

It's important to know that this is created as a combo class instead of using .home-hero as a standalone class so we can share the styles of .section. Our .section class is still global and keeping it as the base class of the element gives us the ability to change its global style properties. For example, our .section class may have a z-index of 1 and position of relative. Now these styles can be used in our new combo class without re-writing z-index and position styles. If we needed to update .section to a z-index of 2, this would be applied to our new .section .home-hero combo class.

Never create a combo class styling from global add-on classes. This defeats our purpose of true global classes and can lead to organization issues as the website scales.

For example, if you create .section  .background-blue and  decide that this section needs an additional unique style, you should not create a new combo class out of these global add-ons.

Even if this combination of globals is only seen once on the site, a new combo class styling should not be created for this customization. For example, if you wanted the section to have borders, radius, background textures, height, etc., this should not be done to this group of global classes. These classes are global and we need to treat them like this.

Additionally, adding a new class name at the end of the class list is not recommended either. For example,  .section  .background-blue .home-hero is not recommended. This would create a unique combo class that would require both .section and .background-blue global classes to be present in order for the new .home-hero style to be shown. If you wanted to change the background from blue to black, your .home-hero combo class would not work. This is not organized and will lead to confusion.

We may want to add some spacing to our container element. We want to give it .space-top-large to create add margin-top to the container.

Now we have .container .space-top-large.

If this same container needs responsive spacing for tablet and mobile, we can continue adding spacing classes to this container. Now we have .container .space-top-large .tablet-top-small .mobile-top-large.

Now there are 4 classes on this div element. What if we decide to add a max-width to the container? What if the container needs something custom created as a combo class? We now have to remove all 3 spacing classes and remember which ones to put back after we make our container updates.

Instead of adding all spacing spacing classes to the container class, consider adding a new div that will hold all of the spacing classes. For example:

Now our container element is doing what it's supposed to do and our spacing parent div is managing all of the spacing for the container. Viewing the .space-top-large class in the styles panel would show .space-top-large .tablet-top-small .mobile-top-large. The only reason you would need to edit this is element is if you wanted to change the spacing in this section.

Similarly, the only reason you would need to edit the container element is if you need to edit the container. Styles doing two completely different things are now separated, while remaining global and powerful.