Classes, Layouts & Styling

Classes feel complex because they are at the center of the connection between elements and style.

Webflow's styling is always site-wide, not page-specific. Designers want consistency in how the whole site feels, and things like the navigation bar and the footer need to look pretty much identical no matte where you are in the site.

The Power of Classes

Have you looked at a raw HTML page?

It's primarily a collection of elements like DIV, P, BLOCKQUOTE, UL & LI that describe broad structural and semantic context for your page content... but no styling.

In a good, modern site design, the styling is essentially all in the CSS files, which define the colors, fonts, margins, padding, and even the layout rules, effects and certain animations that can be applied to those elements.

Those styling rules are grouped into CSS classes, so that they can be easily applied to your elements, anywhere in your site.

In Webflow, Classes work the same way. They are the central mechanism that encapsulate your styling rules together, and apply them to the elements on your designer canvas.

• Webflow's Classes translate into underlying CSS classes, and try to expose most of the same capabilities that CSS classes have.
• Classes can be layered as subclasses, which inherit and override the style choices of the previous class.
• Class styling can be overridden at specific breakpoints.
• Class styling can be adjusted for certain special states, such as the currently-selected menu item or tab, or even-numbered collection list items.
• You can name your classes whatever you want, but having a clear, logical naming convention will be very important as your site grows.

That's a lot of power in one mechanism, but once you understand Webflow's approach to classes, you'll see the beauty of that and why it was necessary.  

Learning Progression

Here's the learning progression I'd recommend;

1. The basics of Classes. Creating them, applying them.
2. Setting and releasing styles
3. > The importance of inheritance
4. Subclasses v. Global classes
5. Classes and breakpoints
6. Breakpoints and cascading effects
7. Classes and states
8. Navigating classes, states, and breakpoints
9. Organizing classes logically
10. Naming conventions and why they matter
11. > Client-first
12. Special uses for classes
13. > Separating desktop v. mobile rules
14. > Using classes to support 3rd party scripts
15. > > Custom attributes as an alternative

Styling specifics;

1. Colors
2. Fonts
3. Measurement units REMS / EMS / PX
4. Layout options, block, inline-block, inline, grids, flex
5. > Float
6. Borders and corners
7. Background images
8. CSS Filters

Advanced CSS styling

What Webflow doesn't expose in classes;

1. CSS calc
2. Complex selectors
3. > X within Y
4. > adjacent
5. Pseudoselectors
6. > :before :after
7. > :has and :not

How to use these with custom CSS styling. When, why, and how. Using HTML Embed v. using internal CSS v. using external CSS.

Best Practices

When you change the styles on a class, those changes are site wide.

It's weird to get used to at the beginning but soon you'll realize that design is a superpower that makes site builds so much quicker and more consistent.

Here are best practices that help;

• use a naming convention like Client First so that it's obvious to you what you're affecting.
• check the indicator next to classes "used on X other pages", to make it clear to you what's impacted.
• create a style guide for the main reused things... your titles, styled rich text elements, etc. You can make changes on that page to see things like "what happens if I increase the H2 padding inside of these classed rich text elements?"  
• ‍

In general, lean heavily on these things-

• organic flow of default static positioning
• margins and padding, on divs ( not on sub-elements like images and text )
• divs using flex and css grid for layout and arrangement ( rather than columns )

Use very sparingly and in isolated situations-

• Relative and absolute positioning
• z-index
• min-height/width and max-height/width
• More advanced child alignment features under flex options

Notes

Naming Conventions & Client First

As your work, and your business grows, developing solid class naming conventions and layering approaches is as important as coding standards are to a a development team.

Finsweet created a series of conventions called Client First designed to address that need.