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

Why?

Nobody knows the future

The problems with CSS

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

Part 2.

Solutions

Technologies and methodologies

BEM

Block       Element       Modifier

Example



					

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

Structure


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

HTML




  

    android
  

  ▼
  ✓ Mark as read
  
    ∀ View all
  
  ↑
  ↓
  

  
    errors
  
  
    avatar
    dra1n

Тыц

Links