Classes

How we name and use classes

Overview

The Base System uses a simplified, intuitive naming convention inspired by the industry-standard BEM (Block Element Modifier) methodology. BEM helps structure your classes in a way that makes them modular and easy to manage.

1. Block

A block is something which represents a meaningful part of the interface — like Navbar, Footer, or Blog.

All class names start with the block the class belongs to.

Blocks group related elements under a shared label, making it easier to:

• Understand the purpose of a class at a glance

• Search for related styles in your project

• Maintain consistent naming across components

2. Element

The element describes a specific part of the block — like a Card, Heading, Input, or Image.

Keep names short and meaningful. Avoid mimicking the full DOM structure, which leads to overly long class names. For example:

• ✅ Testimonial Avatar

• 🚫 Testimonial Card Avatar Image

Shorter, flatter naming works better in a visual builder like Webflow, where structure is already visible.

3. Modifier (optional)

A modifier is used to indicate a variation or state of a block or element. Modifiers help distinguish between two similar components with slightly different styles or purposes.

Example:

• Blog Card Large

• Blog Card Small

These modifiers make it clear that both classes serve the same function, but with meaningful differences.

3.1 Combo Classes

Instead of duplicating a class, we can use combo classes when we want to add styling variations to a base class without creating another class that needs to be managed. Combo classes are useful for small changes — such as text color, background color, or spacing.

Best practices for combo classes:

• ✅ Use for minor styling variations

• ✅ Apply to global classes when needed

• 🚫 Avoid stacking multiple combo classes — it creates complexity and reduces maintainability