Gtalk.kz

В этой статье я расскажу как я использую методологию БЭМ (#b_). О методологии подробнее здесь. Возможно вы подскажите мне как улучшить или пересмотреть свои методы.

Чем хорош БЭМ

Что важно для меня:

• поддержка кода;
• рефакторинг;
• переиспользование;
• самодокументированный код;

Эти пункты помогают без боли возвращаться к проектам, переключатся между ними без кровавых глаз и поддерживать код годами.

Структура стилей

Структура (как я писал ранее) для сайтов:

src
+ css
++ blocks
+++ page.styl
+++ header.styl
+++ ... etc
++ common.blocks
+++ hr.styl
+++ modal.styl
+++ ... etc
++ lib
+++ box-sizing.styl
+++ typo.styl
+++ ... etc
++ config.styl
++ main.styl

Здесь всё просто: настройки (config.styl: цвета, шрифты, размеры), blocks (блоки данного проекта: 1 блок = 1 файл), common.blocks (общие блоки, кочуют из проекта в проект), lib (миксины, полезности).

Файл конфига (переменные тоже по #b_):

/*
* Styles configuration
*
* 1rem = 10px
* Naming by BEM.
*/

// $font
$font__size          = 1.6rem
$font__family        = 'Roboto', sans-serif
$font__family--aux   = 'PT Serif', sans-serif

// $color
$color__brand          = #313e4b
$color__brand--aux     = #e96438
$color__error          = #ec5840

$color__link           = #fff
$color__link--hover    = #ccc
$color__link--active   = #fff

// media queries
$mobile = '(max-width: 640px)'
$fablet = '(max-width: 767px)'
$tablet = '(max-width: 960px)'

Сам main.styl выглядит так:

// level to upload files

// for the first config project
@import 'config'

// use mixins
@import 'lib/*'

// use common.blocks
@import 'common.blocks/**/*'

// import all blocks in site
@import 'blocks/**/*'

Префиксы

Я использую классы-хэлперы или префиксы.

У меня прижились только: is– (работа с визуальной частью, например, is–hidden), js– (работа с JS, js–toggleModal).

Что БЭМ не даёт

или почему БЭМ не так уж и хорош:

• методология (никто не запретит вам сломать и нарушать);
• изоляция присутствует, если придерживаться правил (но вы работаете с людьми, а они ошибаются; легко сломать);
• WYSIWYG, работа с текстом (скорее всего ваш WYSIWYG надо будет настраивать или используйте каскад);

Альтернатива: CSS Modules. Остальные методологии – это БЭМ под другим углом.

Вместо заключения

Я использую каскад для модификатора блока. Пример:

.course
  &--darken
    .course
      &__info
        background-color: #a8a4a0
        color #fff

      &__title
        font-size: 3rem

Пишу названия блока вверху один раз, следом элементы, а потом модификаторы. Используем прелести препроцессоров:

.course
  // elements
  &__info
    border: 1px solid #ccc

  // modificators
  &--darken
    background-color: #000
    color: #fff

Пишу типографику каскадом:

.course
  &__text
    font-size: 1.8rem

    ul
     list-style: none

    h3
      font-size: 2.4rem

Пишу анимацию и media queries в одном файле блока:

.course
  &__title
    font-size: 3rem

    @media $mobile
      font-size: 2.4rem

Использую классы типа: .block__el-el (не путать с .block__el__el).

Объединяю модификаторы: в 1 модификаторе (и размер шрифта, цвет и фон).

Не использую bem-tools.

Не использую модификаторы типа key_value.

Миксую (.course.content__section).

Использую box-sizing и normalize.css.

Нарушаю правила и нормально себя чувствую

А как вы пишите свой CSS? Используете методологию?