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;
}
Similar Reads
Primer CSS Margin Naming Convention Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. It is highly reusable and flexible. It is created with GitHubâs design system. Margins are required to set each tag position. Prime
2 min read
What are Naming Conventions for MongoDB? MongoDB is a popular NoSQL database management system known for its flexibility and scalability. One important aspect of MongoDB development is proper naming conventions. These conventions ensure consistency, clarity, and readability across databases and applications. In this article, We will learn
4 min read
Database, Table and Column Naming Conventions Overview :Databases are persistent storage mechanisms that are present throughout the lifecycle of any application. Databases are created and maintained by the initial database managers and are continued to be maintained by any new database managers that join the team, thus it is a good habit to kee
5 min read
How to Naming Conventions for Git Branches? In Git, branches are used to develop features, fix bugs, and experiment with new ideas independently of the main codebase. Using a consistent naming convention for branches can greatly enhance collaboration and project management. This article provides guidelines and best practices for naming Git br
2 min read
What are the variable naming conventions in JavaScript ? When we name variables in javascript, we've to follow certain rules. Each variable should have a name that appropriately identifies it. Your JavaScript code gets easier to comprehend and work with when you use suitable variable names. It's critical to name variables correctly. For example Constants
2 min read
Foundation CSS Base Typography Abbreviations Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails to look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, M
3 min read