The proper organization of CSS

Part 1.

The problems

A typical task

Losing control

  • making changes takes long time
  • changing code in one place breaks something somewhere else
  • the question of where to put the styles comes up all the time
  • there is a desire to throw the existing markup away and re-write all from scratch


Nobody knows the future

The problems with CSS

  • Using of the global namespace
  • Dead code elimination
  • Violation of isolation

Part 2.


Technologies and methodologies


Block       Element       Modifier



.button {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 10px;

.edit {
  padding-left: 20px;
  background: url('edit-icon.png');

... in some time


/* Ooops! */
.edit {
  background: url('edit-email-icon.png');

.toolbar .edit {

.toolbar .button {

.user-profile .edit {

Cascading Style Sheets

      .toolbar .button .edit



.toolbar { ... }
.toolbar__button { ... }
.toolbar__button_edit { ... }
.toolbar__button_delete { ... }

What we got

  • the elements are encapsulated within the block
  • file (or catalog) for block description
  • transparent structure of the project
  • self-documenting code
  • simplified selectors search
  • simplified modification of styles
  • removal of unused code

A little self-discipline

  • The block’s position is defined by parent
  • Classes but not ids
  • You can’t create the element of the elements (block__elem1__elem2)
  • Elements and modifiers names are always prefixed with the block name
  • You cannot create the global modifiers
  • The blocks may not contain nested elements (link for example)
  • The blocks may contain the entire content of the page and its large parts (page, page-section)

The blocks positioning

Toolbar is located inside the block header and it should fill its right half

.header { ... }
.header__toolbar {
  float: right;
  width: 50%;

In which case do create the block in and in which do the element?

Final example


    toolbar__item toolbar__text "android"
    toolbar__item toolbar__button "▼"
    toolbar__item toolbar__button "✓ Mark as read"
    toolbar__item toolbar__button toolbar__button_toggled "∀ View all"
    toolbar__item toolbar__button "↑"
    toolbar__item toolbar__button "↓"
    toolbar__item toolbar__spacer " "
    toolbar__item toolbar__button
        toolbar__icon "/errors.svg"
    toolbar__item toolbar__button
        toolbar__icon "/avatar.jpeg"
        toolbar__text "dra1n"