CSS class naming convention

Go To StackoverFlow.com

63

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>
2011-10-28 09:04
by bobo
related http://stackoverflow.com/questions/939909/html-naming-conventions-for-id-class-and-to-include-element-type-prefix/23658906#2365890 - Adrien Be 2014-05-14 15:35


78

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.

2011-10-28 09:39
by Ivan Ivanov
excellent @Ivan Ivano - Omar Faruq 2013-10-02 05:39
What about id="" ? Is there any naming convention for them - Claudio Ludovico Panetta 2014-06-30 09:21
@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 2014-06-30 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 : - Claudio Ludovico Panetta 2014-07-01 15:31
@ClaudioLudovicoPanetta the disadvantage is that ids should be unique, and there's no particular reason why styles should be unique - Ivan Ivanov 2014-07-01 23:14
Agree with your statement @IvanIvanov thank you : - Claudio Ludovico Panetta 2014-07-03 09:56
@IvanIvanov I use IDs for JS. In that case, anything that should be kept in mind - 0fnt 2014-09-07 09:57
@user247077 as long as you don't write CSS for you ids, everything is fine - Ivan Ivanov 2014-09-07 20:18
@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 2015-04-21 17:32


24

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 {}
2011-10-28 09:07
by Curt
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 2011-11-01 09:23
Cheers @bobo, and that's fair, good response from Ivan. I've +1 it myself : - Curt 2011-11-01 09:37


3

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: https://ncss.io/documentation/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://ncss.io/documentation/examples

Tools:

Installation:

npm install ncss-linter

Validate a HTML string:

bin/ncss-linter --html='<div class="box-content"></div>'

Validate a local path:

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

Validate a remote URL:

bin/ncss-linter --url=https://redaxmedia.com --namespace=rs --log-level=info

Further reading: https://ncss.io/documentation/tools

2013-11-27 21:21
by redaxmedia


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

2015-06-12 07:26
by turbophi