Webflow Client-First Architecture Cheat Sheet

webflowstructure.md

Legend

🟩 = Component

---

Page Structure

Body

• page-wrapper - wraps all page content
  • 🟩 Navigation
  • main-wrapper - wraps all of the "main" content sections
    • ↳ section_[identifier]
    • ↳ section_[identifier]
    • ↳ section_[identifier]
    • ...
  • 🟩 Footer

Section Structure

• section_[identifier]
  • padding-global - keeps the right/left padding of the page consistent
    • container-[size] - a container with a max-width
      • padding-section-[size] - vertical padding that creates space between each section
        • [identifer]_component - the "parent" item of the component-specific content
          • [identifier]_[element-name]
            • ...
          • ...
• ...

---

Namespaces

Object-Oriented CSS is an approach to writing scalable and maintanable CSS by separating "skin" and "structure". Utilize namespaces as a prefiex to provide indication at-a-glance to what the class does.

• l - "Layout". Controls layout only.

• o - "Objects". The smallest building block that is context-independent. They cannot contain other objects. eg. button

<button class="o-btn">Learn more</button> 

• c - "Component". A reusable component that may contain other objects, and is dependent on context (ie. where it's placed) (eg. form)

• u - Utility classes. Do one specific thing.

Block / Element Convention

Utility Classes ✦ Global classes used to apply a specific CSS property or combination of CSS properties to an element (always hyphenated)

Examples:

• text-weight-bold
• text-style-muted
• text-align-center
• padding-large

Custom Classes ✦ A class specific to the component being styled, prefixed with the section identifier and an underscore (_).

Examples:

• home-hero_component
• key-stats_block
• nav_menu-list

Modifiers ✦ Added as a combo class to an existing custom class or global component to change 1-2 specific CSS properties as a variation of the base class, similar to a utility class but specific to the component, prefixed with is-.

• c_button is-yellow
• c_button is-secondary

☝🏼 If you need to add 2 or more modifiers, consider creating a new custom class instead.