CODEWITHSUNDEEP
cssnaming-conventions
bobo
bobo

Reputation: 8727

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

Upvotes: 82

Views: 108466

Answers (4)

Henry Ruhs
Henry Ruhs

Reputation: 1630

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

Upvotes: 3

Ivan Ivanov
Ivan Ivanov

Reputation: 2052

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.

Upvotes: 89

turbophi
turbophi

Reputation: 151

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

Upvotes: 1

Curtis
Curtis

Reputation: 103348

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 {}

Upvotes: 31

Related Questions