CSS class naming convention

On a web page, there are two blocks of controls (primary and secondary), what class names would most people use?

Choice 1:

<div> <button type="button">Create</button> </div> <div> <button type="button">Edit</button> <button type="button">Remove</button> </div> 

Choice 2:

<div> <button type="button">Create</button> </div> <div> <button type="button">Edit</button> <button type="button">Remove</button> </div> 

4 Answers

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

UPDATE

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

Good:

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

Bad:

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

Example:

<div> <div></div> <div></div> </div> 

With modifier:

<div> <!-- this is the modifier --> <div></div> <div></div> </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.

I would go with:

<div> <button type="button">Create</button> </div> <div> <button type="button">Edit</button> <button type="button">Remove</button> </div> 

As long as your CSS is structured correctly, primary and secondary shouldn't clash with anything else on your application:

.controls.primary {} 

Notice I've also put controls ahead of primary/secondary in the code as this is your main class.

I think the first set beneath is a lot more readable than the second:

.controls.primary {} .controls.secondary {} .primary.controls {} .secondary.controls {} 

There is an great alternative called NCSS.

Named Cascading Style Sheets is a naming convention and guideline for semantic CSS.

Why:

Massive CSS used to be a nightmare while working on projects with different kinds of developers. The lack of conventions and guidelines are going to lead to a unmaintainable ball of mud.

Goal:

A predictable grammar for CSS that provides semantic information about the HTML template.

• What tags, components and sections are affected
• What is the relation of one class to another

Classes:

Named Cascading Style Sheets are divided into:

• Namespaces
• Structural Classes
• Component Classes
• Type Classes
• Modifier Classes
• Functional Classes
• Exceptions

Further reading:

Examples:

<!-- header --> <header> <h1>Website</h1> </header> <!-- main --> <main> <!-- content --> <article> <h2>Headline</h2> <div>Box</div> </article> <!-- sidebar --> <aside> <h3>Headline</h3> <p>Text</p> </aside> </main> <!-- footer --> <footer> <div>Powered by NCSS</div> </footer> 

Further reading:

Tools:

Installation:

npm install ncss-linter 

Validate a HTML string:

bin/ncss-linter --html='<div></div>' 

Validate a local path:

bin/ncss-linter --path=templates/**/*.html --namespace=foo 

Validate a remote URL:

bin/ncss-linter --url= --namespace=rs --log-level=info 

Further reading:

Twitter uses SUIT CSS:

The same author also wrote Idiomatic CSS: