Choosing the Right Convention#
Project Type | Recommended Approach | Why |
---|
Rapid prototyping | Utility-first/Atomic | Fast development and iteration |
Large-scale applications | BEM or SUIT CSS | Clear hierarchy and maintainability |
Design systems | ITCSS + BEM | Scalable architecture with component clarity |
Small websites | Semantic/Kebab-case | Simple and sufficient |
Component frameworks | Hybrid (Component + Utility) | Leverages framework benefits |
Team projects | SMACSS | Clear categorization and rules |
The key is consistency within your project and team alignment on the chosen methodology. Consider your project’s scale, team size, maintenance requirements, and tooling when making your choice.
1. Atomic CSS / Utility-First (Tailwind-style)#
Intuition#
Use small, single-purpose utility classes that can be combined to create any design.
Method#
- Each class does one thing (
.text-center
, .bg-blue-500
) - Combine classes to build components
- Focus on composability over semantics
Examples#
1
2
3
4
5
| .text-center { text-align: center; }
.bg-blue-500 { background-color: #3b82f6; }
.p-4 { padding: 1rem; }
.rounded { border-radius: 0.25rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
|
1
2
3
4
| <div class="bg-blue-500 text-center p-4 rounded shadow-lg">
<h2 class="text-white text-xl font-bold">Card Title</h2>
<p class="text-blue-100 mt-2">Card description</p>
</div>
|
Drawbacks#
- Very verbose HTML
- Difficult to maintain consistent design without tooling
- Can be hard to scan and understand intent
- Requires build process for optimal file size
2. BEM (Block, Element, Modifier)#
Intuition#
BEM creates a clear, hierarchical relationship between components and their parts, making CSS more predictable and maintainable.
Method#
- Block: Standalone component (
.header
, .menu
, .button
) - Element: Part of a block (
.block__element
) - Modifier: Variation of block or element (
.block--modifier
, .block__element--modifier
)
Examples#
1
2
3
4
5
6
7
8
9
10
11
| /* Block */
.card { }
/* Elements */
.card__header { }
.card__body { }
.card__footer { }
/* Modifiers */
.card--featured { }
.card__header--large { }
|
1
2
3
4
5
| <div class="card card--featured">
<header class="card__header card__header--large">Title</header>
<div class="card__body">Content</div>
<footer class="card__footer">Footer</footer>
</div>
|
Drawbacks#
- Can create very long class names
- Verbose HTML markup
- Learning curve for new developers
- Not ideal for utility-based styling
3. OOCSS (Object-Oriented CSS)#
Intuition#
Treats CSS like objects with reusable patterns, separating structure from skin and container from content.
Method#
- Create reusable “objects” (components)
- Separate structure (.media) from skin (.media-large)
- Avoid location-dependent styles
Examples#
1
2
3
4
5
6
7
8
9
10
11
12
13
| /* Object */
.media {
display: flex;
align-items: flex-start;
}
/* Skin variations */
.media-large .media__image { width: 100px; }
.media-small .media__image { width: 50px; }
/* Structure */
.media__image { margin-right: 10px; }
.media__body { flex: 1; }
|
1
2
3
4
| <div class="media media-large">
<img class="media__image" src="..." alt="...">
<div class="media__body">Content here</div>
</div>
|
Drawbacks#
- Can lead to “div soup” with many classes
- Requires discipline to maintain separation of concerns
- May result in unused CSS as objects multiply
4. SMACSS (Scalable and Modular Architecture for CSS)#
Intuition#
Categorizes CSS rules into Base, Layout, Modules, State, and Theme for better organization.
Method#
- Base: Element defaults (
html
, body
, h1
) - Layout: Major layout components (
.l-header
, .l-sidebar
) - Modules: Reusable components (
.tab
, .callout
) - State: How modules look in different states (
.is-active
, .is-hidden
) - Theme: Color and typography variations (
.theme-dark
)
Examples#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| /* Layout */
.l-header { }
.l-main { }
.l-sidebar { }
/* Module */
.tab { }
.tab-item { }
/* State */
.tab-item.is-active { }
.callout.is-error { }
/* Theme */
.theme-dark .tab { }
|
1
2
3
4
5
6
7
| <div class="l-main">
<nav class="tab">
<a class="tab-item is-active">Home</a>
<a class="tab-item">About</a>
</nav>
<div class="callout is-error theme-dark">Error message</div>
</div>
|
Drawbacks#
- Requires strict adherence to categorization
- State classes can become numerous
- Layout prefixes might feel redundant in component-based frameworks
5. ITCSS (Inverted Triangle CSS)#
Intuition#
Organizes CSS from generic to specific, low to high specificity, forming an inverted triangle structure.
Method#
Layers from generic to specific:
- Settings: Variables, config
- Tools: Mixins, functions
- Generic: Normalize, resets
- Elements: Bare HTML elements
- Objects: Design patterns (
.o-layout
) - Components: UI components (
.c-button
) - Utilities: Helper classes (
.u-hidden
)
Examples#
1
2
3
4
5
6
7
8
9
10
11
| /* Objects */
.o-layout { display: flex; }
.o-layout__item { flex: 1; }
/* Components */
.c-button { }
.c-button--primary { }
/* Utilities */
.u-hidden { display: none !important; }
.u-text-center { text-align: center !important; }
|
1
2
3
4
5
6
7
8
| <div class="o-layout">
<div class="o-layout__item">
<button class="c-button c-button--primary">Click me</button>
</div>
<div class="o-layout__item u-text-center u-hidden">
Hidden content
</div>
</div>
|
Drawbacks#
- Requires understanding of the triangle concept
- Prefixes can make HTML verbose
- May be overkill for smaller projects
6. SUIT CSS#
Intuition#
Component-based naming that relies on structured class names and meaningful hyphens.
Method#
- ComponentName: PascalCase for components
- ComponentName-descendentName: camelCase for descendants
- ComponentName–modifierName: camelCase for modifiers
- ComponentName.is-stateOfComponent: State classes
Examples#
1
2
3
4
5
6
7
8
| .Button { }
.Button--primary { }
.Button-icon { }
.Button.is-disabled { }
.SearchForm { }
.SearchForm-field { }
.SearchForm-submitButton { }
|
1
2
3
4
5
6
7
| <form class="SearchForm">
<input class="SearchForm-field" type="text">
<button class="Button Button--primary SearchForm-submitButton">
<span class="Button-icon">🔍</span>
Search
</button>
</form>
|
Drawbacks#
- PascalCase can look inconsistent with HTML conventions
- Mixing camelCase and hyphens can be confusing
- Less popular than BEM, smaller community
7. Kebab-case (Traditional/Semantic)#
Intuition#
Use descriptive, semantic names that describe content or purpose rather than appearance.
Method#
- All lowercase with hyphens
- Focus on meaning over appearance
- Often combined with other methodologies
Examples#
1
2
3
4
5
| .main-navigation { }
.article-header { }
.user-profile { }
.call-to-action { }
.feature-list { }
|
1
2
3
4
5
6
7
| <nav class="main-navigation">
<ul class="navigation-list">
<li class="navigation-item">
<a class="navigation-link">Home</a>
</li>
</ul>
</nav>
|
Drawbacks#
- Can become inconsistent across teams
- Semantic meaning may change over time
- No clear hierarchy or relationship indication
8. JavaScript-style (camelCase/PascalCase)#
Intuition#
Mirror JavaScript naming conventions for consistency in component-based frameworks.
Method#
- camelCase for elements:
.cardHeader
- PascalCase for components:
.UserCard
- Often used in CSS-in-JS solutions
Examples#
1
2
3
4
| .UserCard { }
.cardHeader { }
.primaryButton { }
.navigationMenu { }
|
1
2
3
4
| <div class="UserCard">
<header class="cardHeader">User Info</header>
<button class="primaryButton">Edit Profile</button>
</div>
|
Drawbacks#
- Goes against HTML/CSS conventions
- Can look odd in traditional HTML/CSS setups
- Mixing case styles can reduce readability
9. Hybrid Approaches#
Intuition#
Combine multiple methodologies to get benefits of each while minimizing drawbacks.
Method Examples#
BEM + Utility Classes:
1
2
3
| <div class="card card--featured u-margin-bottom-lg">
<header class="card__header">Title</header>
</div>
|
SMACSS + BEM:
1
2
3
4
5
| <div class="l-container">
<div class="card card--primary is-loading">
<div class="card__content">Content</div>
</div>
</div>
|
Component + Utility (Modern Framework Approach):
1
2
3
4
5
| <div class="UserProfile bg-white rounded-lg shadow-md p-6">
<div class="UserProfile-avatar mb-4">
<img class="rounded-full w-16 h-16" src="...">
</div>
</div>
|
Drawbacks#
- Can become inconsistent without clear guidelines
- Team members need to understand multiple systems
- May lead to decision fatigue
Reference#