There are only two hard things in computer science: cache invalidation and naming things.
– Phil Kalton
Why is naming important?
A poorly chosen name will cause confusion and delays the project. So a good name will help write understandable code which forms a solid structure. It also makes things easier and reusable for developers involved in the project.
What is CSS Class Naming?
CSS Class Naming is one of the most fundamental and important parts of developer activities. It makes the CSS selectors as informative and readable as possible which helps in the development and other issues that come when creating HTML based layouts.
Three categories of class names.
- Functional Class Names
- Content-Based Class Names
- Presentational Class Names
1. Functional Class Names
The styling of these elements is based on their function or meaning. There is a strong connection between the class name, the styles it applies, and the reason the styles are being applied. That class name is associated with these styles because of this reason.
Example
2. Content-Based Class Names
Content-based class names are class names that describe the content they contain. If you’ve ever seen a class name like submit-button, intro-text, or profile-photo, you were looking at a content-based class name.
Example:
3. Presentational Class Names
Presentational class names describe the way an element looks–like green-button or big-text. The name itself is describing the styles that are being applied.
Example:
How to properly name CSS classes?
It is better to choose a good name for HTML elements.
Example:
It is better used has- or is- prefix for the state. State manipulation happens very often. (bis) So adhere to a strict naming convention for the state will be very helpful
For Example:
.c-header-logo {...}
Try to avoid camelCase rather than using word hyphen(-)
For Example:
.redBox {
border: 1px solid red;
}
// would be better written as
.red-box {
border: 1px solid red;.
}
It is a better way to use descriptive words so try to avoid abbreviation, apart from nav, txt, btn, url etc
Try BEM(Block, Element, Modifier). It is a component-based approach to web development.
For Example
CSS
HTML
CSS
.btn--secondary {...}
Try to avoid more than two words for a given name. The name must be self-descriptive in one or two words, or code will be hard to maintain.
Example
.button-dropdown-one{...}
/* Would be better written as */
.button {...}
.button-dropdown {...}
Try to separate parent from children. If a class has too many responsibilities, split it into 2 separate properties.
Example
.post {
.title {...}
}
/* Would be better written as */
.post {...}
.post-title {...}
CSS Class Naming Methodologies
CSS Methodologies are a structured way of writing and organizing your CSS. It helps us make our code more readable and predictable. When it comes to code modification and debugging, conventions help us to locate the part of the code easily.
The most popular CSS Class naming methodologies are SMACSS, OOCSS and BEM.
SMACSS
SMACSS stands for Scalable and Modular Architecture for CSS. It helps to increase the semantic value of a section of HTML and content and decrease the expectation of a specific HTML structure.
In SMACSS, the selectors are divided into five categories:
1. Base – Using elements selectors, the base is applied to an element.
Example:
2. Layout – It divided into major and minor styles. Major layout styles like header and footer are styled using ID selectors. Minor layout styles will use class names instead of IDs so that the styles can be used multiple times on the page.
Example:
.l-fixed {....}
// fixed layout with l- or layout- prefixes
3. Module – It contain content and reusable part of markup .
Example
4. State – it describes how modules and sections appear in particular states(hidden/expand, active/inactive with a prefix “is”.
Example
5. Theme – It describe how layout and module might look. They aren’t use most of project
Example
//theme.css
.mod { border-color: blue;}
OOCSS – Object-Oriented CSS
OOCSS is a coding paradigm that styles “objects” or “modules” — nestable chunks of HTML that define a section of a webpage—with robust, reusable cascading styles. CSS class are defined to HTML objects that help define the design and flow of the HTML objects. It helps write a simple and DRYer CSS. This is very popular and Bootstraps were initially written following this paradigm.
Example
.button { width: 100px; border: 1px solid black;}
.widget { width: 200px; overflow: hidden; border: 1px solid black;}
/* After applying OOCSS strategy */
.skin { border: 1px solid black;}
.button { width: 100px;}
.widget { width: 200px; overflow: hidden;}
Separate container from content: It allows the re-use of elements and classes no matter where you are in the DOM. A styled element should never be dependent on where it’s at on a page. In this context, content refers to elements such as images, paragraphs and div tags that are nested within other elements, which serve as containers. Most containers can be represented by a structured class.
#sidebar { padding: 2px; left: 0; margin: 3px; position: absolute; width: 140px;}
#sidebar .list { margin: 3px;}
#sidebar .list .list-header { font-size: 16px; color: red;}
// the same coding with the content and containers separated
.sidebar {padding: 2px; left: 0; margin: 3px; position: absolute; width: 140px;}
.list {margin: 3px;}
.list-header {font-size: 16px; color: red}
BEM (Block, Element, Modifier)
Block
The B in ‘BEM’ stands for Block.
A functionally independent page component that can be reused the existing code which is represented by the class attribute. It can contain elements and other blocks. It can also contain one or more modifier. Words are separated by a hyphen (-) or one word. The block could represent a header, menus, image, footer or any other block design.
Example
HTML
CSS
Here an ideal class name for this component would be .stick-man, such as a block of design.
The component should be styled like:
Element
The E in ‘BEM’ stands for Element.
An element is a part of the block and has no standalone meaning. It can contain other elements and block. It can also contain one or more modifiers. The element name is separated from the block name with two underscores: “–“. The element could represent a header subtitle, menu item, image caption etc.
Example
HTML
CSS
The stick-man has a head, two arms, and feet.
For Example
.stick-man__arms {...}
.stick-man__feet {...}
The head, arms and feet are all elements within the component.
Modifier
The M in ‘BEM’ stands for Modifier.
A Modifier is used to change the appearance, behaviour or state of a block or element. It is separated from the block or element name by a single underscore (_) or by adding two hyphens(–). The element could represent a theme, active/inactive state, alignment etc.
Example
HTML
CSS
.site-search__button--large {...}
When we have a stick man in blue and red colours, a blue and red are modifications of the component.
For Example
.stick-man--red {...}
What does BEM CSS solve?
It helps you figure out what your design is made of if you thinking in block, element and modifier. This methodology gives your CSS code a solid structure that remains simple and easy to understand between the team members. If you pre-planned a design with independent blocks, it helps reduce the maintenance time and get the project up and running in no time. It helps smaller projects and larger projects. However, maintaining larger projects becomes much easier over the period of time. With the help of pre-processor like SASS, maintenance nightmare for the bigger teams become trivial.
