CSS class naming convention

Question

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

Choice 1:

<div class="primary controls">
 <button type="button">Create</button>
</div>

<div class="secondary controls">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

Choice 2:

<div class="primary-controls controls">
 <button type="button">Create</button>
</div>

<div class="secondary-controls controls">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

related http://stackoverflow.com/questions/939909/html-naming-conventions-for-id-class-and-to-include-element-type-prefix/23658906#23658906 — Adriano, May 14 '14 at 15:35

score 89 · Accepted Answer · edited Feb 15 '18 at 12:30

89

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 - http://getbem.com/naming/ - 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 class="b-controls">
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

With modifier:

<div class="b-controls mega"> <!-- this is the modifier -->
    <div class="super-control"></div>
    <div class="really-awesome-control"></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.

edited Feb 15 '18 at 12:30

informatik01

16,038
10
74
104

answered Oct 28 '11 at 09:39

Ivan Ivanov

2,042
1
19
28

What about id="" ? Is there any naming convention for them? – ExoticSeagull Jun 30 '14 at 09:21
2

@ClaudioLudovicoPanetta in this particular convention it is advised that you don't use ids for css styles. There are no advantages but a huge disadvantage in using them. – Ivan Ivanov Jun 30 '14 at 20:35
@IvanIvanov can you please tell me more about the disadvantage? I'm really noob at css. Even some links where I can learn from :D – ExoticSeagull Jul 01 '14 at 15:31
2

@ClaudioLudovicoPanetta the disadvantage is that ids should be unique, and there's no particular reason why styles should be unique. – Ivan Ivanov Jul 01 '14 at 23:14
@IvanIvanov I use IDs for JS. In that case, anything that should be kept in mind? – 0fnt Sep 07 '14 at 09:57
@user247077 as long as you don't write CSS for you ids, everything is fine. – Ivan Ivanov Sep 07 '14 at 20:18
1

@ClaudioLudovicoPanetta ids (the html id attribute, to be correct) are also way, way more specific than classes, i.e. they'll over-ride anything regardless of where they are in the style sheet unless you use another id, or !important (or 256 nested classes) - one of the most important things you can understand about css is specificity and how to avoid it's traps - an article here from an exceptional if a little advanced blog: http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/ – Toni Leigh Apr 21 '15 at 17:32
1

"All CSS selectors are based on blocks. There shouldn't be any selectors that aren't started with "b-"." - then what is the point of b- prefix? – reducing activity Jun 15 '21 at 07:25
"there's no particular reason why styles should be unique" - what about styling unique, nonrepeating elements? What is benefit of adding class to them? (example: fullscreen map, by definition taking all screen space) – reducing activity Jun 15 '21 at 07:27
1

@reducingactivity "then what is the point of b- prefix". Classes without this prefix are used for modifiers only in this convention. Please note this is a very old post - there's a link to the newer version of BEM which doesn't use "b-". – Ivan Ivanov Jun 16 '21 at 00:13
1

DO read the updated guidelines or refer to other answers. The original answer contains some VERY outdated advice, don't do that. – Zhe Sep 14 '21 at 12:27

score 30 · Answer 2 · answered Oct 28 '11 at 09:07

I would go with:

<div class="controls primary">
 <button type="button">Create</button>
</div>

<div class="controls secondary">
 <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 {}

Thanks a lot for your reply. I actually applied your solution in my project but Ivan's answer brings up the BEM naming convention that may be quite useful to other people having the same problem. Thanks again for your reply. — bobo, Nov 01 '11 at 09:23

Henry Ruhs · Answer 3 · 2023-08-16T07:55:35.790

There is an great alternative called [NCSS][1].

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: https://henryruhs.gitbook.io/ncss/classes

Examples:

<!-- header -->

<header id="header" class="foo-header"> 
    <h1 class="foo-title-header">Website</h1>
</header>

<!-- main -->

<main class="foo-main foo-wrapper">

    <!-- content -->

    <article id="content" class="foo-content">
        <h2 class="foo-title-content">Headline</h2>
        <div class="foo-box-content">Box</div>
    </article>

    <!-- sidebar -->

    <aside id="sidebar" class="foo-sidebar">
        <h3 class="foo-title-sidebar">Headline</h3>
        <p class="foo-text-sidebar">Text</p>
    </aside>

</main>

<!-- footer -->

<footer id="footer" class="foo-footer">
    <div class="foo-box-footer">Powered by NCSS</div>
</footer>

Further reading: https://henryruhs.gitbook.io/ncss/examples

I updated it to gitbook... the website is indeed expired – Henry Ruhs Aug 16 '23 at 07:56 — Henry Ruhs, Aug 16 '23 at 07:56

score 1 · Answer 4 · answered Jun 12 '15 at 07:26

1

Twitter uses SUIT CSS:

https://github.com/suitcss/suit/blob/master/doc/README.md

The same author also wrote Idiomatic CSS:

https://github.com/necolas/idiomatic-css

answered Jun 12 '15 at 07:26

turbophi

151
2
8

CSS class naming convention

4 Answers4

UPDATE

Linked