Какую CSS-методологию вы предпочитаете?

Всем доброго дня!

Каждый, кто когда-либо занимался вёрсткой веб-страниц, помнит, что раньше трава была зеленее мы не сильно обращали внимание на то, какие названия классам даём (ну создал я тег <div class=«a b»>текст</div>, я же помню, что «a» задаёт красный цвет текста, а «b» — жирное начертание), какие идентификаторы (id) и как часто используем, сколько уровней вложенности у наших селекторов (.page nav .logo img.alt:hover) и т.д. Главное — чтобы сайт выглядел похожим на свой макет.

Всё изменилось, когда сайты превратились в интернет-сервисы, над пользовательскими интерфейсами стали трудиться целые команды разработчиков, появились мобильные версии и адаптивная вёрстка, возникло желание многократного использования кода, стали популярны CSS-препроцессоры (Less, Sass, Stylus), постпроцессоры (PostCSS), сборщики проектов (Gulp, Webpack) и т.д.

И тут на выручку пришли CSS-методологии. Данные методологии являются просто наборами правил, которым нужно следовать при вёрстке. То есть, они говорят: «Называй класс так, и никак иначе», или «А вот этот класс добавь в файл N и помести в папку M». Благодаря CSS-методологиям все разработчики, работающие над одним проектом, будут понимать друг друга и использовать одни и те же инструменты.

Теперь давайте определим, какая CSS-методология понятна лично вам больше всего. Рассмотрим 4 самые популярные методологии.

Методология #1

HTML-код:

<div class="button button_active">
  <div class="button__text">
    ...
  </div>
</div>

CSS-код:

.button {
  display: inline-block;
  box-sizing: border-box;
  padding: 5px 10px;
  width: 250px;
  border: 1px solid #ccc;
}

.button_active {
  background-color: green;
  color: #fff;
}

.button__text {
  font-size: 18pt;
}

Методология #2

HTML-код:

<div class="button green">
  <div class="text">
    ...
  </div>
</div>

CSS-код:

.button {
  display: inline-block;
  box-sizing: border-box;
  padding: 5px 10px;
  width: 250px;
  border: 1px solid #ccc;
}

.green {
  background-color: green;
  color: #fff;
}

.text {
  font-size: 18pt;
}

Методология #3

HTML-код:

<div class="button is-active">
  <div class="button-text">
    ...
  </div>
</div>

CSS-код:

.button {
  display: inline-block;
  box-sizing: border-box;
  padding: 5px 10px;
  width: 250px;
  border: 1px solid #ccc;
}

.is-active {
  background-color: green;
  color: #fff;
}

.button-text {
  font-size: 18pt;
}

Методология #4

HTML-код:

<div class="D(ib) Bxz(bb) Px(10px) Py(5px) W(250px) Bd Bdc(#ccc) Bgc(green) C(#fff)">
  <div class="Fz(18pt)">
    ...
  </div>
</div>

CSS-код:

.Bd {
  border-width: 1px;
  border-style: solid;
}
.Bdc\(\#ccc\) {
  border-color: #ccc;
}
.Bgc\(green\) {
  background-color: green;
}
.Bxz\(bb\) {
  box-sizing: border-box;
}
.C\(\#fff\) {
  color: #fff;
}
.D\(ib\) {
  display: inline-block;
}
.Fz\(18pt\) {
  font-size: 18pt;
}
.Px\(10px\) {
  padding-left: 10px;
  padding-right: 10px;
}
.Py\(5px\) {
  padding-top: 5px;
  padding-bottom: 5px;
}
.W\(250px\) {
  width: 250px;
}

Какая из представленных 4-х CSS-методологий вам больше всего нравится?

Вы можете посмотреть названия методологий, скрывающихся под этими номерами: