CSS Architecture

BEM Methodology

BEM (Block, Element, Modifier) is a naming convention for CSS classes.

Naming Convention

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

Block

A standalone component:

.card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
}

Element

A part of a block:

.card__title {
  font-size: 1.25rem;
  font-weight: 600;
}

.card__content {
  margin-top: 8px;
}

.card__image {
  width: 100%;
  border-radius: 4px;
}

Modifier

A variation or state:

.card--featured {
  border-color: #3b82f6;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.card--dark {
  background: #1f2937;
  color: white;
}

Full Example

<article class="card card--featured">
  <img class="card__image" src="image.jpg" alt="">
  <h2 class="card__title">Title</h2>
  <p class="card__content">Content</p>
  <button class="card__button card__button--primary">Click</button>
</article>

BEM Rules

Never nest elements more than once
Elements can't contain blocks
Keep modifiers with blocks or elements
Use meaningful names, not presentation

CSS Modules

Locally scoped CSS that prevents naming conflicts.

Basic Usage

/* Button.module.css */
.button {
  background: blue;
  color: white;
}

.primary {
  background: darkblue;
}

// React component
import styles from './Button.module.css';

function Button() {
  return (
    <button className={`${styles.button} ${styles.primary}`}>
      Click me
    </button>
  );
}

Benefits

No naming conflicts
Dead code elimination
Local scope
Works with any framework

CSS Modules with Variables

/* styles.module.css */
:root {
  --primary: #3b82f6;
}

.button {
  background: var(--primary);
}

Composition

/* styles.module.css */
.base {
  padding: 8px 16px;
  border-radius: 4px;
}

.primary {
  composes: base;
  background: blue;
  color: white;
}

Global Styles in CSS Modules

/* styles.module.css */
:global(body) {
  margin: 0;
}

.local-class {
  color: red;
}

Scalable CSS

ITCSS (Inverted Triangle CSS)

Organize CSS from generic to specific:

Settings - Variables, config
Tools - Mixins, functions
Generic - Reset, normalize
Elements - Bare HTML elements
Objects - Layout patterns
Components - UI components
Utilities - Helper classes

/* 1. Settings */
:root {
  --primary: #3b82f6;
}

/* 2. Tools */
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3. Generic */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 4. Elements */
body { margin: 0; }
h1 { font-size: 2rem; }

/* 5. Objects */
.container { max-width: 1200px; margin: 0 auto; }

/* 6. Components */
.card { border: 1px solid #e5e7eb; }

/* 7. Utilities */
.hidden { display: none; }

Utility-First CSS

<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow">
  <h2 class="text-xl font-bold">Title</h2>
  <button class="bg-blue-500 text-white px-4 py-2 rounded">Click</button>
</div>

Component-Based Architecture

/* Button component */
.button {
  /* Base styles */
}
.button--primary {
  /* Variant */
}
.button--small {
  /* Size */
}

/* Card component */
.card {
  /* Base styles */
}

File Organization

styles/
  base/
    _reset.css
    _typography.css
  components/
    _button.css
    _card.css
  utilities/
    _helpers.css
  main.css

Naming Conventions

Use BEM for component CSS
Use descriptive class names
Avoid presentation-based names
Keep specificity low

Practice Problems

0/3solved

intermediateBuild CSS Architecture Component

Create a reusable React component implementing CSS Architecture. Include proper state management and accessibility.

Solution

// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed

intermediateCSS Architecture Testing

Write unit and integration tests for CSS Architecture using React Testing Library.

Solution

// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests

intermediateCSS Architecture Performance

Optimize CSS Architecture for performance. Consider memoization, code splitting, and bundle size.

Solution

// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Flashcards

Question

What is BEM?

Click to reveal answer

Answer

Block, Element, Modifier - a CSS naming convention that creates reusable, maintainable components.

Question

How do you write BEM selectors?

Click to reveal answer

Answer

.block {} .block__element {} .block--modifier {} .block__element--modifier {}

Question

What is the benefit of CSS Modules?

Click to reveal answer

Answer

Local scope prevents naming conflicts. Class names are unique to each component.

Question

What are the layers of ITCSS?

Click to reveal answer

Answer

Settings, Tools, Generic, Elements, Objects, Components, Utilities (from generic to specific).

Question

What is utility-first CSS?

Click to reveal answer

Answer

A CSS approach using small, single-purpose utility classes instead of semantic class names.

Revision Notes

Key Takeaways

1.BEM provides clear naming conventions for CSS
2.CSS Modules prevent naming conflicts with local scope
3.ITCSS organizes CSS from generic to specific
4.Utility-first CSS uses small, single-purpose classes
5.Scalable CSS architecture improves maintainability

Interview Tips

•Explain BEM naming convention with examples
•Compare CSS Modules with other scoping methods
•Discuss the benefits of utility-first CSS
•Know how to organize CSS files in a large project

Cheat Sheet