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>
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 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.
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 {}
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 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:
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= --namespace=rs --log-level=info
Further reading:
Twitter uses SUIT CSS:
The same author also wrote Idiomatic CSS:
