Classes

How to organise and manage classes

Overview

Class names follow a simplified naming structure inspired by the industry standard Block Element Modifier (BEM) convention.

1. Block

Class names begin with a 'block' at the start of their name. A block is s a meaningful part of the website interface that we can use to group our classes within. This could be the navigation bar, footer, blog... whatever makes sense to you. By grouping related classes using blocks, we know exactly where on the project that class is being used and we can easily search for related classes.

1.1. Global Classes

Sometimes, we will have a class that we want to use across our website and not just in a single specific use case. For example typography, buttons or sections and containers. By reusing these elements, we ensure our website design is consistent and we can easily easily make sitewide updates. While Global classes do not belong to a block, they should still be grouped with consistent naming, for example all of our sections begin with "Section" and containers "Containers".

The Base System starter provides a number of basic global classes to help you get started. However, you are encouraged to create as many global classes as needed by your project.

2. Element

This is the actual name of an element that makes up the block. This part should describe what the element actually is or doing. For example, a card, heading, input etc.

When naming we want to keep a shallow name structure. We should not mimic the DOM structure which will lead to unnecessarily long class names. We want to keep class names short and concise. Since, we are using a visual builder, there's no need for Testimonial Card Avatar Image if Testimonial Avatar or Testimonial Image will suffice

3. Modifier (optional)

Sometimes, we need to introduce a modifier to the name when we have elements with the same name but different variations or states. Modifiers can be used to signify an adjustment to the appearance, behavior, or style of the element. For example, we have two different blog image sizes, adding 'Large' or 'Small' to the end of each name creates two unique classes with meaningful difference.

3.1 Combo Classes

Apart from duplicating an entire class, you can add a combo classes to an existing class to introduce a styling variation without creating a brand new class. We recommend using combo classes for global classes and minor adjustments like font color or background color, but avoid stacking multiple combo classes, as it complicates inheritance and styling management.

---

FAQ

Q: When should I use a combo class vs. a new class? → Use a combo class for minor overrides (color, padding). Use a new class if you’re changing structure or layout.

Q: Can I use lowercase or underscores instead? → At Flowbase, we take a visual first approach to naming with plain English spaces and captial letters. But the Base System naming structure works whether you prefer kebab-case, snake case, camel case etc.

Q: What if something doesn’t fit into the system? → That’s okay. Use your best judgment—or reach out to us for any help.

Glossary.

Class Name Examples

Block	Element	Modifier
Hero Header `Navigation Testimonial Gallery Team Logo Footer Blog FAQ Newsletter CTA Timeline Contact 404 Features Form Filter Carousel Banner	Wrapper Card Grid Input Content Image Footnote Button List Item Slide Icon Heading Tabs Link Dropdown Select Divider Details Description	Large Small Primary Secondary Tertiary Ghost Disabled Active Filled Empty Featured Left Center Right Top Bottom Error Success Wide Tall