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
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
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
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
Foundation CSS Base Typography Code
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
2 min read
Difference between CSS and CSS3
CSS (Cascading Style Sheets) is a stylesheet language used to style web pages, while CSS3 is its advanced version with new features and modules. CSS3 introduces enhanced styling capabilities like animations, transitions, media queries, and rounded corners, providing more flexibility and functionalit
4 min read
Primer CSS Components Complete Reference
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. This systematic method makes sure our patterns are steady and interoperable with every otherPrimer CSS AlertsPrimer CSS Alerts Defa
3 min read