Moncees Framework — Conventions

Short ruleset for naming, layout, and component strategy. When in doubt: Variable First, Developer First, Lean.

1block_element
2Structural styling
3Examples: halo_stage, card_title
4
5
6cc-variant
7Block variant (Combo Class)
8Examples: cc-halo, cc-large, cc-dark
9
10
11is--state
12UI state (Combo Class)
13Examples: is--open, is--active
14
15
16u-property
17Atomic utility
18Examples: u-text-center, u-mt-4
19
20
21[data-*]
22JS hooks + config
23Examples: [data-halo], [data-halo-angle="14"]

Single underscore between Block and Element. Double hyphen for is--. Single hyphen for cc- and u-.

‍

Max 1–2 Combo Classes per element. More is a code smell — refactor into a dedicated Block class.

‍

Layout Hierarchy

‍

Outside in:

‍

  • Section: Page band. Full-width, vertical padding, optional background.
  • Container: Max-width constrainer. Horizontal padding.
  • Stack: Vertical layout. Children stack with consistent gap.
  • Cluster: Horizontal flow with wrap. For tags, nav, small cards.

‍

Schema: section > container > stack > cluster

Section is always there. Container almost always. Stack/Cluster as needed.

‍

Component vs Class

‍

Build a Component when:

‍

  • 3+ instances planned
  • Clearly defined variants (Size, Color, State)
  • Properties make sense (Slot, Variable Text, Variable Class)

‍

A Class is enough when:

‍

  • One-off layout
  • Page-specific structure
  • Layout primitives (Section, Container, Stack, Cluster)

‍

Layout primitives are never Components — otherwise Webflow eats the Designer flow.

‍

Atomic Hierarchy

‍

  • Atom — Button, Input, Label, Icon. Smallest meaningful UI unit.
  • Molecule — Card, Form Field, Search Bar. Atoms combined into functional units.
  • Organism — Hero, Nav, Footer. Full section building blocks.#

‍

u-* utilities are for one-off tweaks. If used 3+ times → promote into a Block class.

‍

Style vs Behavior Separation

‍

  • Class = Styling. Settable in Webflow Designer.
  • Data Attribute = JS hook + variants for pattern systems. Set under Element Settings → Custom Attributes.
  • Custom CSS = Only what Webflow Designer can't do (transform-origin, mask-image, attribute selectors, complex selectors).

‍

Classes can be renamed without breaking scripts. Scripts hook into attributes.

‍

Principles

‍

Variable First Spacing, colors, typography from Webflow Variable Collections. Never hardcode values (#fff, 16px) directly in the Designer.

‍

Developer First Naming predictable, not clever. Class hierarchy always follows the same schema (Block_Element). Descriptive names over cryptic shortcuts.

‍

Lean Max 1–2 Combo Classes per element. Custom CSS kept minimal — anything that works in the Designer belongs in the Designer.

‍

Performance Critical geometry in the Designer (don't hide it in Custom CSS). Lazy-load images. Minimal DOM, minimal JS, GSAP only where Webflow Interactions fall short.

‍

Commentary Format

1/*
2 * Moncees Framework — {Module Name}
3 * {One-line description.}
4 */
5
6
7/* --- {Section Name} ----------------------------------------------- */