Правильная организация CSS – Vertical Slides – Fragments

View Github Repository Open presentation in a new window

dra1n

See all presentation from dra1n

Правильная организация CSS – Vertical Slides – Fragments

1 0

bem-talk

http://dra1n.github.io/bem-talk

On Github dra1n / bem-talk

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

<ul class="toolbar">
  <li class="button edit">
    <a href="/edit">Edit</a>
  </li>
  <li class="button delete">
    <a href="/delete">Delete</a>
  </li>
</ul>
.button {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 10px;
}

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

... in some time

<div class="user-profile">
  <span class="email">john.doe@example.com</span>
  <a class="edit">Change email</a>
</div>
/* Ooops! */
.edit {
  background: url('edit-email-icon.png');
}
.toolbar .edit {
  ...
}

.toolbar .button {
  ...
}

.user-profile .edit {
 ...
}

Cascading Style Sheets

      .toolbar .button .edit
            

      .toolbar__button_edit
            
<ul class="toolbar">
  <li class="toolbar__button toolbar__button_edit">
    <a href="/edit">Edit</a>
  </li>
  <li class="toolbar__button toolbar__button_delete">
    <a href="/delete">Delete</a>
  </li>
</ul>
.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 class="header">
  <div class="header__toolbar">
    <ul class="toolbar">
      <li class="toolbar__item toolbar__item_edit">
        <a href="/edit">Edit</a>
      </li>
      <li class="toolbar__item toolbar__item_delete">
        <a href="/delete">Delete</a>
      </li>
    </ul>
  </div>
</header>
.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

<div class="toolbar">
  <div class="toolbar__item toolbar__text">
    android
  </div>
  <a class="toolbar__item toolbar__button">▼</a>
  <a class="toolbar__item toolbar__button">✓ Mark as read</a>
  <a class="toolbar__item toolbar__button toolbar__button_toggled">
    ∀ View all
  </a>
  <a class="toolbar__item toolbar__button">↑</a>
  <a class="toolbar__item toolbar__button">↓</a>
  <div class="toolbar__item toolbar__spacer"></div>
  <a class="toolbar__item toolbar__button">
    <img class="toolbar__icon" alt="errors" src="/errors.svg">
  </a>
  <a class="toolbar__item toolbar__button">
    <img class="toolbar__icon" alt="avatar" src="/avatar.jpeg">
    <span class="toolbar__text">dra1n</span>
  </a>
</div>

Тыц

Links

The proper organization of CSS