CSS Naming Conventions: BEM vs SMACSS vs Atomic
Compare CSS naming methodologies and choose the right approach for your project size and team.
CSS ๅ็ผฉ
ๅ็ผฉ CSS ไปฃ็ ไปฅๅๅฐๆไปถๅคงๅฐ
CSS Naming Methodologies
As CSS codebases grow, consistent naming conventions prevent specificity wars, make styles predictable, and enable confident refactoring. Different methodologies suit different project scales.
BEM (Block Element Modifier)
BEM uses a strict naming pattern: .block__element--modifier. Example: .card__title--highlighted. The double underscore separates blocks from elements, the double hyphen marks modifiers. BEM is explicit and self-documenting โ you know exactly what each class does and where it belongs. The trade-off is verbose class names that can clutter HTML.
SMACSS (Scalable and Modular Architecture)
SMACSS categorizes styles into five types: Base (defaults), Layout (page structure), Module (reusable components), State (dynamic changes), and Theme (visual theming). Each category has naming conventions: .l- for layout, .is- for state. SMACSS is less prescriptive than BEM, which can be either a benefit (flexibility) or a drawback (inconsistency).
Utility-First (Atomic CSS / Tailwind)
Instead of semantic class names, use small, single-purpose utility classes directly in HTML: class="flex items-center gap-4 p-2 rounded-lg bg-white shadow". This eliminates naming entirely for most styles. The trade-off: HTML becomes verbose, and design changes require updating every template that uses those classes. Tailwind CSS is the dominant utility-first framework.
Choosing a Methodology
Small projects (personal sites, marketing pages): utility-first is fastest. Medium projects (SaaS products, apps with designers): BEM provides structure without excessive overhead. Large projects (enterprise, design systems): combine BEM for components with utilities for one-off adjustments. Legacy projects: adopt the convention that requires the least refactoring of existing code.
Consistency Over Methodology
The specific methodology matters less than using it consistently. A codebase mixing BEM and SMACSS and ad-hoc naming is worse than a codebase using any single approach uniformly. Document your chosen approach, enforce it in code review, and add linting rules to catch violations.
็ธๅ ณๅทฅๅ ท
็ธๅ ณๆ ผๅผ
็ธๅ ณๆๅ
CSS Units Explained: px, em, rem, vh, and When to Use Each
CSS offers over a dozen length units, each suited to different situations. Understanding the differences between absolute and relative units is essential for building responsive, accessible interfaces.
Flexbox vs CSS Grid: A Practical Comparison
Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and how to combine them for robust, responsive page layouts.
How to Create CSS Gradients: Linear, Radial, and Conic
CSS gradients create smooth color transitions without image files. Learn to build linear, radial, and conic gradients with precise control over color stops, direction, and shape.
Troubleshooting CSS Specificity Conflicts
When CSS rules unexpectedly override each other, specificity is usually the culprit. This guide explains how specificity is calculated and provides strategies for managing it in growing codebases.
CSS Custom Properties (Variables) Best Practices
CSS custom properties enable dynamic theming, design tokens, and maintainable style systems. Learn how to organize, scope, and use CSS variables effectively in production applications.