Собственная методология вёрстки

Снова пришло время поговорить о вёрстке. Вот люблю я порядок, что поделать. А единственный способ сохранить порядок при разрастании кодовой базы — подчинить код ограничениям и правилам. Расскажу про набор правил, которым я верстаю последний год и который сильно облегчает мне жизнь.

Не обошлось без влияния БЭМ. Я долгое время был и остаюсь сторонником этой методологии. Но в отличии от БЭМ, этот подход менее многословен и больше подходит для маленьких проектов.

Именование

Почти как в БЭМ. Разметка состоит из компонентов .component, элементов .component_elem и модификаторов .component.-mod.

Для элементов допустима многоуровневая вложенность, не больше четырёх уровней:

<div class="component">
  <div class="component_elem">
    <div class="component_elem_sub-elem"></div>
  </div>
</div>

Модификаторы пишутся по принципу ключей к unix-командам, сразу имени после компонента или элемента, который они модифицируют:

<div class="component -large"></div>

Модификаторы не содержат полного имени компонента. Вероятность пересечения есть, но в маленьких проектах такого не произойдёт.

Использование в CSS

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

.component {}
.component_elem {}
.component_elem_sub-elem {}

Модификаторы вкладываются в элемент, к которому они относятся, чтобы сразу видеть все состояния элемента:

.component_elem {
  &.-large {}
}

Допустим каскад от модификатора к дочерним элементам. В этом случае правило пишется внутри тела модифицируемого элемента. Так сразу видно, кто на него влияет, а при удалении не остаётся неиспользуемых стилей.

.component_elem {
  .component.-large & {}
}

Media queries, как и модификаторы, вкладываются в селектор, чтобы видеть все возможные состояния элемента.

.component_elem {
  &.-large {}
  @media (max-width: $mobile) {
    &.-large {}
  }
}

CSS без препроцессоров

Если все стили находятся в одном файле, то визуальные отступы помогут сохранить порядок. Сначала перечисляются модификаторы, потом элементы.

.component {}
  .component.-mod {}

  .component_elem {}
    .component_elem.-mod {}

    @media (max-with: 768px) {
      .component_elem {}
      .component_elem.-mod {}
    }

Использование в JavaScript

Компонентный подход сейчас в тренде. Он работает не только для CSS. Компоненты хорошо вписываются в понятие View из Backbone, в директивы из Angular, в React и Web Components. Вот простой пример:

<div class="component">
  <div class="component_wrapper some-component"></div>
</div>

Каждый компонент представляется в виде объекта с собственным набором методов:

function SomeComponent($el) {
  this.$el = $el;
}

SomeComponent.prototype.setText = function(text) {
  this.$el.text(text);
};

Компоненты можно встраивать друг в друга:

function Component($el) {
  this.$el = $el;

  this.someComponent = new SomeComponent(
    this.$el.find('.component_wrapper')
  );
}

Component.prototype.sayHello = function() {
  this.someComponent.setText("Hello");
};