The direct answer to the question is right below this one, by Curt.

If you're interested in CSS class naming conventions I suggest to consider one very useful convention named BEM (Block, Element, Modifier).


Please read more about it here - - that's a newer version that renders the following answer obsolete.

Main principles:

  • A page is constructed from independent Blocks. Block is an HTML element which class name has a "b-" prefix, such as "b-page" or "b-login-block" or "b-controls".

  • All CSS selectors are based on blocks. There shouldn't be any selectors that aren't started with "b-".


.b-controls .super-control { ... }


.super-control { ... }
  • If you need another block (on the another page maybe) that is similar to block you already have, you should add a modifier to your block instead of creating a new one.


<div class="b-controls">
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>

With modifier:

<div class="b-controls mega"> <!-- this is the modifier -->
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>

Then you can specify any modifications in CSS:

.b-controls { font: 14px Tahoma; }
.b-controls .super-control { width: 100px; }

/* Modified block */
.b-controls.mega { font: 20px Supermegafont; }
.b-controls.mega .super-control { width: 300px; }

If you have any questions I'd be pleased to discuss it with you. I've been using BEM for two years and I claim that this is the best convention I've ever met.

CSS命名规范- SegmentFault 思否

2016年12月28日 ... 本篇介绍几种CSS命名规范。 (规范详细请参考底部References) 一、NEC (nice easy css) 网易前端CSS开源项目1.1 样式分类重置和默认:reset ...

CSS Naming Conventions that Will Save You Hours of Debugging

Jan 16, 2018 ... The BEM Naming Convention ... Teams have different approaches to writing CSS selectors. Some teams use hyphen delimiters, while others ...

BEM命名规范- 知乎

2019年7月7日 ... 基本概念. CSS命名规范又叫做BEM规范,为的是结束混乱的命名方式,达到 一个语义化的CSS命名方式。 BEM是三个单词的缩写:Block( ...

HTML DIV+CSS 命名规范大全? - 知乎

【HTML DIV+CSS 命名规范大全】. 网页制作中规范使用DIV+CSS命名规则,可以 改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名 ...

BEM naming convention

Naming. Modifier names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block's or element's name plus two dashes:  ...

前端css命名规范----BEM - 吴小明- - 博客园

2019年9月29日 ... 这种巧妙的命名方法可以使css类对其他开发者来说更加透明且具有意义。BEM约定 更加严格,而且包含更多的信息,它们用于一个团队开发一个耗 ...

CSS命名规范- 简书

2019年12月4日 ... 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特网页 制作中规范使用****DIV+CSS****命名规则,可以改善优化功效 ...

BEM 101 | CSS-Tricks

Apr 2, 2015 ... The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS.

What Should I Name My CSS Style Sheet File?

This begs the question "What should I name this CSS file"?" Naming Convention Basics. When you create an ...

How to name css classes

May 18, 2016 ... How to name css classes · 0. Before to think about class name, choose a good name for HTML elements · 1. Put the class name at the lowest ...

SUIT CSS naming conventions - GitHub

SUIT CSS naming conventions ... SUIT CSS relies on structured class names and meaningful hyphens (i.e., not using hyphens merely to separate words). This ...

Best Practice in CSS: Organisation and Naming Conventions ...

Jul 30, 2020 ... Best Practice in CSS: Organisation and Naming Conventions · The separation of “structure” from “skin” · Define the repeating “visual” patterns as ...

CSS class naming convention - Stack Overflow

If you're interested in CSS class naming conventions I suggest to consider one very useful convention named BEM (Block, Element, Modifier).

CSS Naming Conventions: Fewer Rules, more Fun | by Hans ...

Jun 19, 2014 ... Naming conventions in code are called Identifier Naming Convention and are well known by most software engineers for a long time. In CSS ...