Building a Scalable CSS Architecture With BEM and Utility Classes

Managing extensive CSS projects presents significant challenges. Over time, various approaches have emerged to streamline large-scale CSS development. The common goals remain: efficiency (minimizing design time, maximizing coding time) and consistency (ensuring uniform coding practices across the team).

For over a year and a half, I've contributed to CodyFrame, a component library and front-end framework boasting 220 components. These aren't isolated modules; they're reusable patterns, often integrated to build complex layouts. This project's complexities necessitated a scalable CSS architecture, combining global CSS, BEM, and utility classes.

Let's explore this approach.

CSS Globals: A Quick Overview

Global CSS files house rules applicable across all components (e.g., spacing, typography, colors). Tokens maintain design consistency and reduce component CSS size.

Here's a typography global example:

/* Typography | Global */
:root {
  /* body font size */
  --text-base-size: 1em;

  /* type scale */
  --text-scale-ratio: 1.2;
  --text-xs: calc((--text-base-size / var(--text-scale-ratio)) / var(--text-scale-ratio));
  --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
  --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
}

@media (min-width: 64rem) { /* responsive decision applied to all text elements */
  :root {
    --text-base-size: 1.25em;
    --text-scale-ratio: 1.25;
  }
}

h1, .text-xxl  { font-size: var(--text-xxl, 2.074em); }
h2, .text-xl   { font-size: var(--text-xl, 1.728em); }
h3, .text-lg   { font-size: var(--text-lg, 1.44em); }
h4, .text-md   { font-size: var(--text-md, 1.2em); }
.text-base     { font-size: var(--text-base-size); }
small, .text-sm { font-size: var(--text-sm, 0.833em); }
.text-xs       { font-size: var(--text-xs, 0.694em); }

BEM: A Concise Explanation

BEM (Blocks, Elements, Modifiers) is a naming convention for reusable components.

Example:

<a href="https://www.php.cn/link/5982407c8b651cdf1ecdc48937c14cbe"></a>
<nav>
  <ul>
    <li><a href="https://www.php.cn/link/5982407c8b651cdf1ecdc48937c14cbe">Homepage</a></li>
    <li><a href="https://www.php.cn/link/5982407c8b651cdf1ecdc48937c14cbe">About</a></li>
    <li><a href="https://www.php.cn/link/5982407c8b651cdf1ecdc48937c14cbe">Contact</a></li>
  </ul>
</nav>

• Block: A reusable component.
• Element: A child of a block (e.g., .block__element).
• Modifier: A variation of a block/element (e.g., .block--modifier, .block__element--modifier).

Utility Classes: The Essentials

Utility classes perform single functions. For instance:

.padding-sm { padding: 0.75em; }
.padding-md { padding: 1.25em; }
.padding-lg { padding: 2em; }

Entire components can be built using utility classes:

<h1 id="Title">Title</h1>
<p>Lorem ipsum...</p>

Utility classes can leverage global CSS variables:

/* Spacing | Global */
:root {
  --space-unit: 1em;
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: calc(1.25 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3.25 * var(--space-unit));
}

/* responsive rule affecting all spacing variables */
@media (min-width: 64rem) {
  :root {
    --space-unit: 1.25em; /* this responsive decision affects all margins and paddings */
  }
}

/* margin and padding util classes - apply spacing variables */
.margin-xs { margin: var(--space-xs); }
.margin-sm { margin: var(--space-sm); }
.margin-md { margin: var(--space-md); }
.margin-lg { margin: var(--space-lg); }
.margin-xl { margin: var(--space-xl); }

.padding-xs { padding: var(--space-xs); }
.padding-sm { padding: var(--space-sm); }
.padding-md { padding: var(--space-md); }
.padding-lg { padding: var(--space-lg); }
.padding-xl { padding: var(--space-xl); }

A Practical Example: A Card Gallery

Let's create a card gallery, first using only BEM, then incorporating globals and utility classes to highlight their benefits. The final result will demonstrate the power of this combined approach.

(The remainder of the article continues with the detailed example, comparing BEM-only, BEM Globals, and BEM Globals Utility Classes approaches, and concluding with file structure recommendations.)

The above is the detailed content of Building a Scalable CSS Architecture With BEM and Utility Classes. For more information, please follow other related articles on the PHP Chinese website!