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;
- The basics of Classes. Creating them, applying them.
- Setting and releasing styles
- > The importance of inheritance
- Subclasses v. Global classes
- Classes and breakpoints
- Breakpoints and cascading effects
- Classes and states
- Navigating classes, states, and breakpoints
- Organizing classes logically
- Naming conventions and why they matter
- > Client-first
- Special uses for classes
- > Separating desktop v. mobile rules
- > Using classes to support 3rd party scripts
- > > Custom attributes as an alternative
Styling specifics;
- Colors
- Fonts
- Measurement units REMS / EMS / PX
- Layout options, block, inline-block, inline, grids, flex
- > Float
- Borders and corners
- Background images
- CSS Filters
Advanced CSS styling
What Webflow doesn't expose in classes;
- CSS calc
- Complex selectors
- > X within Y
- > adjacent
- Pseudoselectors
- > :before :after
- > :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.
