Open In App

CSS Naming Conventions

Last Updated : 06 Jun, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

CSS is foundational in web design, offering control over page appearance and interaction. While effective for style management, it's less ideal for complex projects, leading to the need for CSS naming conventions. These standards enhance stylesheet efficiency and organization, aiding team navigation. This tutorial explores CSS naming conventions' syntax and their benefits in reducing repetition, and conflicts, and promoting modularity. Several naming conventions are used in CSS which are as follows:

BEM (Block, Element, Modifier)

BEM is a simple naming convention in use for segments of CSS selectors into three; Block, Element and Modifier. A Block entails an individual feature or component, and an Element has to do with the specific features of the Blocks, while Modifiers are concerned with the states of Elements. It is a component-based naming convention that divides CSS classes into three categories: Blocks, Elements, and Modifiers.

  • Block: A standalone component that is meaningful on its own. (e.g., .header)
  • Element: A part of a Block that has no standalone meaning and is semantically tied to its Block. (e.g., .header__logo)
  • Modifier: A flag on a Block or Element that changes its appearance or behavior. (e.g., .header__logo--small)

Syntax:

.header {
background-color: #333;
color: white;
padding: 20px;
}
.header__logo {
width: 100px;
height: 50px;
background-color: white;
}
.header__logo--small {
width: 50px;
height: 25px;
}
.header__nav {
display: flex;
gap: 10px;
}
.header__nav-item {
color: white;
text-decoration: none;
}
.header__nav-item:hover {
text-decoration: underline;
}

SMACSS (Scalable and Modular Architecture for CSS)

According to SMACSS there are five categories of CSS rules – Base, Layout, Module, State and Theme. This approach, stresses the divide between structure and style, no longer referring to layout as a module but a layout module as suggested by its name.

  • Base: Those basic styles that are set by the CSS browser default styles to the HTML elements to render HTML so usable. (e. g. , body)
  • Layout: Options regarding the appearance of the main area or sections of any site. (e. g. , . container)
  • Module: Application of variability principles through reusable Web site components. (e. g. , . button)
  • State: Styles that depict the ‘state or condition’ of a particular item. (e. g. , . is-active)
  • Theme: Impulsive and impromptu. (e. g. , . theme-light)

Syntax:

/* Base */
body {
font-family: Arial, sans-serif;
}

/* Layout */
.layout-header {
background-color: #333; color: white; padding: 20px;
}

/* Module */
.button {
padding: 10px 20px;
border: none;
cursor: pointer;
}
.button.is-active {
background-color: blue;
color: white;
}

/* State */

.is-active {
border: 2px solid yellow;
}

/* Theme */
.theme-light {
background-color: #f0f0f0;
color: #333;
}

Object- Oriented CSS ( OOCSS)

OOCSS is concerned with creating portable CSS objects and stops short at the application on other elements. It removes constraints that have the purpose of grouping style concepts with model concepts at a higher level, making them easier, more manageable and more adaptable.

  • Object: Recurring templates that can be used in other HTML sites or components. (e. g. , . box)
  • Variation: Amendments made to the fundamental shape. (e. g. , . box--rounded)

Syntax:

.box {
padding: 20px;
border: 1px solid #ccc;
}

.box--rounded {
border-radius: 10px;
}

Atomic CSS

Atomic CSS is a process of sweeping up styles into small and combo, Best for having specific functions of design and layouts. It focuses on the use of the utility-first naming convention and benefits from the ability to impeccably fine-tune all the styling properties.

  • Utility: Div Classes that contain attributes that apply one single style property. (e. g. , . mt-2 for margin-top: 20px)

Syntax:

.mt-2 {  
margin-top: 20px;
}

.p-3 {
padding: 30px;
}

.bg-blue {
background-color: blue;
}

.text-white {
color: white;
}

Next Article
Article Tags :

Similar Reads