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 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 ...

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 ...

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).

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:  ...

Can I apply a CSS style to an element name? - Stack Overflow

So, I'm looking for ways I can apply styles to objects that don't have an id or class attribute. Sometimes, form items have a "name" or "value" ...

What Should I Name My CSS Style Sheet File?

Naming Convention Basics. When you create an external style sheet for your web pages, you should name the file ...

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.

HTML form name Attribute

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, ...

CSS - Wikipedia

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of ... CSS also has rules for alternate formatting if the content is accessed on a mobile device. The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a ...

HTML Classes - The Class Attribute

It can also be used by a JavaScript to access and manipulate elements with the specific class name. In the following example we have three <div> elements with a ...