Skip to main content

CSS Naming Rules

General Naming Rules​

  1. Descriptive Class Names

    • Use class names that clearly describe the purpose or role of the element.
    • Example:
      ✅ btn-primary
      ❌ blue-btn

  2. Lowercase with Hyphens

    • Use lowercase letters and separate words with hyphens for better readability.
    • Example:
      ✅ header-title
      ❌ headerTitle or header_title

  3. Avoid Abbreviations

    • Stick to full, descriptive names unless the abbreviation is widely understood.
    • Example:
      ✅ navigation-menu
      ❌ nav-mnu

  4. Consistency is Key

    • Define and follow a consistent naming convention across your project.

1. BEM (Block Element Modifier)​

  • Format: Block__Element--Modifier
  • Purpose: Defines clear relationships between blocks, elements, and modifiers.
  • Example: 
    <div class="Button">
      <button class="Button__primary">Primary</button>
      <button class="Button__secondary">Secondary</button>
    </div>

    • Block: A standalone component (Button).

    • Element: A child or part of the block (Button__primary).

    • Modifier: A variant or state of the block/element (Button__primary--disabled).

    • Ant Design adopts a similar style, where Button__primary indicates a primary button element within the Button block. This makes it clear and predictable.

2. Atomic CSS​

  • Uses utility classes for single-purpose styles.
  • Example:
    <button class="btn bg-blue-500 text-white p-4">Primary</button>
  • TailwindCSS is used for styling in our project, where we typically combine both BEM and Atomic methodologies for custom UI library CSS classes. For instance, we often integrate Ant Design (BEM-based classes) with TailwindCSS (atomic classes) to override Ant Design styles. This approach makes customization more flexible and convenient.

3. SMACSS (Scalable and Modular Architecture for CSS)​

  • Categorizes styles into:
    • Base: Default styles (resets, typography).
    • Layout: Major layout components.
    • Modules: Reusable components.
    • State: UI states (is-active, is-hidden).
    • Themes: Skinning components.
<button class="btn btn-primary is-active">Click Me</button>

4. Site Module​

  • Site modules are self-contained sections of a website that handle specific functions, making the website easier to manage, scale, and maintain. They improve code reusability and allow developers to work on different parts of the website simultaneously.

  • Common Site Modules

    • Header: Contains navigation and branding.
    • Footer: Displays copyright and legal links.
    • Content: Shows the main page content.
    • Sidebar: Offers additional navigation or content.
    • Form: Handles user interactions like login or contact forms.
    • Modal: A pop-up for displaying additional information.
    • Carousel: Displays image or content sliders.
    • And so on.

  • Benefits

    • Reusability: Modules can be reused across different pages.
    • Scalability: Easily add new features without disrupting the site.
    • Maintainability: Isolated modules are easier to update and debug.

  • Best Practices

    • Ensure modularity, separation of concerns, consistency, accessibility, and performance in your modules for optimal site development.
    • We commonly use this style on landing pages or small applications, where each page is typically divided into sections. However, in larger applications that utilize frameworks or libraries like Vue.js or ReactJS to reuse entire components, this approach tends to be less organized compared to BEM or Atomic CSS.