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
Python Naming Conventions
Python, known for its simplicity and readability, places a strong emphasis on writing clean and maintainable code. One of the key aspects contributing to this readability is adhering to Python Naming Conventions. In this article, we'll delve into the specifics of Python Naming Conventions, covering
4 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
Understanding the CSS BEM convention
When working on a large-scale web development project, it's essential to have a consistent and organized approach for styling. The BEM (Block-Element-Modifier) naming standard is one well-liked way to accomplish this. The term BEM stands for Block-Element-Modifier, which is a naming convention for C
8 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
if/else condition in CSS
In CSS, traditional if/else conditions aren't directly available. Instead, conditional styling is managed through techniques like media queries, which apply styles based on screen size, and feature queries (@supports), which check for browser support of specific CSS features, allowing adaptable and
3 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
Less.js Misc Functions
Less.js is a CSS preprocessor which basically means that it provides some additional features to the traditional CSS which helps us to write CSS code more efficiently. All the Misc functions are explained below. In this article, we are going to learn about the Misc or Miscellaneous functions that ar
4 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
CSS Combinators
CSS combinators define the relationship between two selectors. CSS selectors are patterns used to select elements for styling. A CSS selector can be simple or complex, consisting of more than one selector connected using combinators. Understanding these combinators is essential for precise and effic
4 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