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
Naming Conventions in LISP
LISP is a programming language that has an overall style that is organized around expressions and functions. Every Lisp procedure is a function, and when called, it returns a data object as its value. It is also commonly referred to as âfunctionsâ even though they may have side effects. Lisp is the
2 min read
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
PostgreSQL - Naming Conventions
PostgreSQL naming conventions provide guidelines for naming database object names in PostgreSQL, including tables, columns, indexes and constraints. In this article, We will learn about essential naming conventions such as PostgreSQL table naming, index naming and primary key naming to promote best
3 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
Primer CSS Components
Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns ar
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
W3.CSS Containers and Panels
W3.CSS provides web developers with the two most useful classes i.e. container and panels. They are used to place content together with same font-color, background-color, font-size, font-family, etc. w3-container: This class is used to add 16px padding on both the left and right side of the element.
3 min read
Styling React Components: CSS vs CSS-in-JS
When it comes to styling React components, developers often face the dilemma of choosing between traditional CSS and CSS-in-JS solutions. Both approaches offer unique advantages and drawbacks, influencing how developers design and maintain their application's user interface. In this article, we delv
5 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