Skip to main content

CSS Naming Conventions

CSS naming conventions play a crucial role in making your code organized, maintainable, and easy to understand. This tutorial will guide you through popular methodologies like BEM, OOCSS, and SMACSS to help you write clean and maintainable CSS.

BEM (Block, Element, Modifier)​

BEM is a popular naming convention that stands for Block, Element, and Modifier. It provides a clear structure for your CSS classes and makes it easy to understand the relationships between components.

Block​

A block is a standalone entity that represents a high-level component in your design.

CSS
/* Block example */
.header {
}

Element​

An element is a part of a block that has no standalone meaning and is semantically tied to its block.

CSS
/* Element example */
.header__logo {
}
.header__navigation {
}

Modifier​

A modifier is a flag on a block or element that represents a different state or variation.

CSS
/* Modifier example */
.header--fixed {
}
.header__logo--small {
}

OOCSS (Object-Oriented CSS)​

OOCSS is a methodology that encourages you to think of your CSS as a collection of reusable objects. It focuses on separating structure (layout) from skin (visual appearance) to promote reusability and maintainability.

CSS
/* OOCSS example */
/* Structure */
.box {
}

/* Skin */
.box--red {
  background-color: red;
  color: white;
}

SMACSS (Scalable and Modular Architecture for CSS)​

SMACSS is a CSS architecture that aims to make your CSS more maintainable and scalable by categorizing your styles into five types: Base, Layout, Module, State, and Theme.

CSS
/* SMACSS example */
/* Base */
body,
h1,
p {
}

/* Layout */
.l-container {
}

/* Module */
.m-button {
}

/* State */
.is-active {
}

/* Theme */
.t-dark {
}

Conclusion​

Using a consistent naming convention is essential for keeping your CSS organized and maintainable. By adopting a methodology like BEM, OOCSS, or SMACSS, you can write clean, easy-to-understand code that scales well with your projects.