Данный способ наименования классов необходим для упрошения создания уникальных имен класса.

префикс-имя_обьекта-имя_элемената_в_обьекте
префикс-имя_обьекта-имя_элемената_в_обьекте--флаг_состояния
префикс-имя_обьекта-имя_элемената_в_обьекте--параметр-значение

<div class="b-имя_обьекта b-имя_обьекта--имя_флага">
  <div class="b-имя_обьекта-имя_элемената">
    <span class="b-имя_обьекта-name b-имя_обьекта-name--red">текст текст</span>
    <span class="b-имя_обьекта-time">10:30</span>
    </div>

  <p class="b-имя_обьекта-box">
    </p>
  </div>

"b-" - префикс класса. Он нужен. Префикс это "подсветка кода". Предпологается что имя класса без префикса обязательно должен быт связан с родительским элеиментом у которого он есть. Также префикс символизирует что имя созданно по особому принципу и выделяет такие имена среди других техник. Префикс несет только дополнительную смысловую нагрузку и дает подсказку на вопрос "откуда этот класс?".

"b-" - описание каркаса
"m-" - этот модификатор аналог "b-" но полученный от родительского обьекта.
"s-" - модификатор стилизации. вся стилизация проекта задается этими классами.
"i-" - прочии модификаторы: фона(картинка), ...

имя_обьекта - это обьект который верстаем.
имя_элемената - это название элемената обьекта.

Имена пишуться или одним словом или через нижнее_подчеркивание или горбатымСтилем.
Разделителем между префиксом, имя_обьекта и имя_элемента выступает знак дефиса "-".
Делать иерархию из имен не стоит. те так делать не стоит b-имя_обьекта-имя_элемената-name, лучше назвать как то по другому или b-имя_обьекта-имя_элемената_Name.

Флаги это класс состояния элемента. Класс имеет вид "имя_элемент--имя_флага".
Имя флага можно записать или одним словом или через нижнее_подчеркивание или горбатымСтилем.
Сложные имена флагов разделяются одним знаком дефиса "-" и имеют вид "--параметр-значение"

Модификатор - класс который относиться к другому обьекту, но добавлен чтобы изменить свойства элемента. к примеру "b-ubutton-text m-pageform-remove_text b-ubutton-text--small" : "b-ubutton-text" это элемент, "b-ubutton-text--small" это состояние элемнета , "m-pageform-remove_text" - модификатор который относиться к обьекту "pageform"


в теории можно добиться сжатие имен (замена имени класа на компактный аналог: "b-имя_обьекта-имя_элемената" -> "zW4").
эффективнось сжатия сомнительна, потому как по отношению к gzip выигрыш незначительный. но такая возможность есть.

Для автоматизации "сжатия" и отличать что можно сжимать а какие классы нельзя можно воспользоваться префиксами:
одно буквенный префикс "b-" говорит что имя_класса можно сжимать
двух буквенный префикс "bb-" сжимать не рекомендуется. Но возможна частичное сжатие "bb-имя_обьекта-незжимаемая_часть"



Если поддержка старых браузеров (IE6) не важна то "класс состояния" можно сократить и оставить только -флаг-состояния. Но классы модификаторов необходимо записывать только в полном виде
<div class="b-имя_обьекта -имя_флага m-родитель-xxx m-родитель-xxx--состояние">
  <div class="b-имя_обьекта-имя_элемената">
    <span class="b-имя_обьекта-name -red">текст текст</span>
    <span class="b-имя_обьекта-time">10:30</span>
    </div>

  <p class="b-имя_обьекта-box">
    </p>
  </div>