78

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

4 Answers 4

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.

11
  • 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. Jun 30, 2014 at 20:35
  • 2
    @ClaudioLudovicoPanetta the disadvantage is that ids should be unique, and there's no particular reason why styles should be unique. Jul 1, 2014 at 23:14
  • 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: csswizardry.com/2014/07/hacks-for-dealing-with-specificity
    – Toni Leigh
    Apr 21, 2015 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? Jun 15, 2021 at 7:25
  • 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-". Jun 16, 2021 at 0:13
30

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 {}
1
  • 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 1, 2011 at 9:23
3

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

2
  • Looks like it's dead now.
    – Evg
    Aug 6 at 15:06
  • 1
    I updated it to gitbook... the website is indeed expired
    – Henry Ruhs
    Aug 16 at 7:56
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.