Использование методологии БЭМ и небольшой размер файла

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

Используя БЭМ, CSS делится на что-то вроде этого.

.block {
  /* Block code goes here */
}

.block--is-hidden {
  /* Block modifier code goes here */
}

.block__element {
  /* Element code goes here */
}

Мне кажется, это неплохо, если вы не используете код повторно. Предположим, я использую Bootstrap или любую другую CSS Framework/библиотеку. При этом я просто хочу использовать сетку. При этом моя разметка может выглядеть примерно так.

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      ...
    </div>
  </div>
</div>

Согласно BEM, это было бы недопустимо. Вместо этого все классы сетки должны быть заключены в соответствующие классы блоков и элементов. Возможный способ добиться этого — через SASS, и это @include. Для меня это в основном приводит к избыточному коду.

Итак, мой вопрос прямо сейчас. Я что-то упускаю? Я имею в виду, используя БЭМ, например, для. загрузка кода Bootstraps .container в каждый мой собственный стиль блока привела бы к созданию огромного выходного файла CSS. Верен ли мой подход? И если да, то действительно ли я пожертвовал бы временем первоначальной загрузки только ради идеи лучше организованного CSS и лучшей читаемой разметки?


webpack css sass bem
person Aer0    schedule 23.07.2017    source источник
comment
Определите массовый вывод CSS. Вы говорите, что в будущем это может стать массовым без каких-либо реальных цифр, подтверждающих ваше утверждение. Кроме того, синтаксический анализ CSS происходит довольно быстро, а gzip помогает загружаться с такими настройками, как BEM, где шаблоны в именах классов повторяются, что делает передачу содержимого почти не проблематичной. По сути, вы запрашиваете мнение о чистом предположении, на которое никто не может точно ответить.   -  person Garbee    schedule 23.07.2017
comment
Вы забыли про gzip/deflate.   -  person Alex Yaroshevich    schedule 24.07.2017

Ответы (1)


arrow_upward
0
arrow_downward

Есть ли причина, по которой ваши block должны начинаться на уровне контейнера? Я не уверен, является ли это нарушением методологии БЭМ, но я лично "начинаю" свои blocks больше на уровне html>body>.container. Так:

<html>
<body>

  <div class="container">
    <div class="cheesecake">
      <h1 class="cheesecake__heading"></h1>
    </div>
  </div>

</body>
</html

С SCSS, выглядящим примерно так:

.cheesecake {
  &__heading {}
}

И так далее.

person Kevin Oh    schedule 23.07.2017