Classes

Naming Structure

The Base System uses a simple class naming structure inspired by the industry-standard BEM (Block Element Modifier) methodology.

1. Block

A block is a top-level, standalone component that represents a meaningful and reusable section of a webpage, for example, Navbar, Footer, or Blog. Blocks help organize related elements under a shared label, making your classes modular and easy to manage.

1.1. Global Classes

Global classes aren’t tied to a specific block, as they are used across your site as reusable layout or style helpers. For example Container, Column, or Heading

2. Element

An element is a part of a block that performs a specific function. The element describes a specific part of the block — like a Card, Input, or Image.

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. For example: Large , Small , Secondary .

3.1. Combo Classes

Combo classes are used when we want to add styling variations to a base class. Combo classes are useful for small changes, such as text color, background color, or spacing. However, we should avoid stacking multiple combo classes, it creates complexity and reduces maintainability