gzhegow
@gzhegow
Думал, стану умнее, когда адаптируюсь, но нет

Для чего в БЭМ т.н. «первый уровень вложенности», то есть «блок__элемент»?

Подскажите, для чего в БЭМ т.н. "первый уровень вложенности", то есть "блок__элемент"?
В чем сложность иметь допустим только элементы или только блоки (не важно как вы их называете) которые вкладываются друг в друга и имеют модификаторы?

Зачем весь этот цирк с двойным подчеркиванием и якобы вложенностью, но запретом на ее использование?

Запрет мне понятен - из-за того что браузеры сортируют стили по уровню вложенности - чем больше - тем позднее они будут применены, запрет оправдан, то бишь пользоваться осторожно.

А для чего вводить двойное подчеркивание, если элемент может быть с указанным родителем в качестве модификатора?

БЭМ:
.calculator {}
.calculator__button {}
.calculator__button_theme_material {}
.calculator__button_color_red {}


Вариант 2:
.calculator {}
.button {}
.button_theme_material {}
.button_color_red {}

ИЛИ:
.calculator .button {} (ЧТО БЭМ НЕ РЕКОМЕНДУЕТ...)
ИЛИ:
.button_parent_calculator {}


Понятно, например, что БЭМ был создан в одной _крупной_ российской компании. А как мы знаем, в российской компании начальство как правило в технологиях разбирается с трудом, но считает программистов чем-то вроде тостеров - хлеб вложил, решение получил, и не выпендривается. Но с целью премирования устанавливает требования в виде "гениальных идей". Вот БЭМ родился в качестве такой гениальной идеи, когда руководство было попросту запутано этим бредом. Потом в него вкинулось денег в раскрутку и он стал гениально популярным.

Вопрос почему кодеры так активно кричат "бэм это хорошо", если достаточно было сказать "ребята, научитесь УМНО пользоваться вложенностью", дескать каждый уровень вложенности это как золото, их нельзя делать 22, максимум 2 или 3??

==

Опять же возьмем такой вот пример:
.calculator_theme_material {}
.button_theme_material {}
.calculator__button_theme_material {}
.select_theme_material {}
.calculator__select_theme_material {}
.select__button_theme_material {}
.select__field_theme_material {}
.select__hiddeninput_theme_material {}
.select__input_theme_material {}
....blablabla_theme_material {};


и вот вариант без всяких бэмов:
.calculator {}
.calculator_theme_material {}
.calculator .button {}
.calculator_theme_material .button {}


ну то есть - зачем каждому элементу писать модификатор, отказывая себе во вложенности, если вложенность тут очевидна?
А если делать все равно вложенность, то на какой долбаться с ней без вложенности?

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

Если ты пишешь на битриксе, ты крут. Осталось смириться с тем, что он ужасен.
  • Вопрос задан
  • 1097 просмотров
Решения вопроса 3
mrusklon
@mrusklon
если долго мучится - что нибудь получится
мое имхо , бэм нужен только для того чтоб любой блок можно было вырезать и вставить в любое место и не сломать при этом сss , с вашим примером:
.calculator__button {}
а если будет так и кнопок у вас 10 вариаций , когда перенесете , возможно будут сложности.
.calculator .button

в целом вижу смысл в этой технологии только в ультра больших проектах и сайтах в 100500 страниц ручной верстки которые постоянно меняются.
Ответ написан
@ilyarsoftware
Подскажите, для чего в БЭМ т.н. "первый уровень вложенности", то есть "блок__элемент"?


"блок__элемент" отражает только принадлежность элемента к блоку и не никак не относится к вложенности.

Зачем весь этот цирк с двойным подчеркиванием и якобы вложенностью, но запретом на ее использование?


Вложенность не запрещена и реализуется на уровне HTML т.е. так где мы мы естественно можем отразить структуру, поподробнее в посте: Вкладывание элементов в элементы и другие тонкости и ответ на вопрос: Почему нежелательно использовать вложенные селекторы?.

А для чего вводить двойное подчеркивание, если элемент может быть с указанным родителем в качестве модификатора?


В разделе ответов про Блоки и элементы можно найти необходимые уточнения, основная информация тут.

Вопрос почему кодеры так активно кричат "бэм это хорошо", если достаточно было сказать "ребята, научитесь УМНО пользоваться вложенностью", дескать каждый уровень вложенности это как золото, их нельзя делать 22, максимум 2 или 3??


Выглядит риторически, но отмечу, что если действительно разобраться в методологии можно будет ответить и на этот вопрос, ответ будет индивидуальным.

ну то есть - зачем каждому элементу писать модификатор, отказывая себе во вложенности, если вложенность тут очевидна?
А если делать все равно вложенность, то на какой долбаться с ней без вложенности?

Хотелось бы услышать объяснения без ссылок на "какую-то там статью про бэм" в которой те, кто сломали себе мозг, ломают его остальным.


Без ссылок не обойтись, см. выше, но они подобраны исключительно точно по вашим вопросам и содержат необходимые объяснения.
Ответ написан
gzhegow
@gzhegow Автор вопроса
Думал, стану умнее, когда адаптируюсь, но нет
Пораскинули мозгами с коллегами, плюс собрал ваши мнения.

По итогу:
  • БЭМ есть методология/философия - набор рекомендаций, а не стандарт разработки, поскольку она ничего не запрещает, а просто существует и все XD
  • Правильно написанные стили (с БЭМ или без БЭМ) позволяют их использовать в других проектах без доработки
  • Возможно, принципы БЭМ уходят к теории баз данных, где для хранения деревьев используют таблицу с parent__child__level, описывая элемент на предположим третьем уровне вложенности, мы просто указываем 1_4 2_4 3_4, просто в нашем случае выбрасываются те связи, которые не оказывают влияния на дочерний элемент. Обратите внимания, что порядок подключения файлов стилей и является тем самым полем level - расположи мы их в неправильном порядке и результаты нас неприятно удивят
  • Следует стремится уменьшить число классов и их длину настолько насколько возможно, при этом оставив их читабельными
  • Каждый уровень вложенности увеличивает число работы во много раз, перед тем как сделать уровень вложенности - нужно очень хорошо все взвесить
  • Общепринятым решением является _один_модификатор_на_класс_ - но помните, что у DOM-элемента может быть много классов, просто если писать несколько модификаторов - число классов возрастет в n^2 раз согласно уровня вложенности - проще написать _theme_material и _color_red, _color_blue, _color_yellow в отдельных классах, чем писать каждый раз _theme_material_color_red, _theme_material_color_blue, _theme_material_color_yellow
  • БЭМ допускает использование дефисов в именах классов, если они состоят из нескольких слов, но предпочтительнее использовать "верблюд" или вообще писать все в одно слово, поскольку выделение двойным щелчком в редакторе кода никто не отменял, а дефисы сломают от этого все удовольствие (ну или придется обучать ваших спецов настраивать их любимый редактор)
  • Для совместимости с другими библиотеками рекомендуется использовать префикс для каждого проекта, так классы продакшена могут начинаться с "b-", например "b-menu__item", это должно окончательно устранить дублирование вашего и чужого кода, написанного опять же на БЭМ
  • Общий принцип работы в БЭМ такой: сначала определите из чего состоит большинство ваших элементов. Например - вы используете header, footer, content, info, top, bottom и тд из которых состоят ваши блоки на странице. Все. Запомните, что они у вас всегда элементы. Блоков с такими именами быть не должно, запутаетесь и сломаете мозги. То есть на сайте у вас не может быть блока .header, потому что вы определили __header как элемент. Теперь на вашем сайте есть блок например .page, и у .page__header - и есть ваш хедер от сайта. Потом вы создаете продукт .product, и .product__header - это верх продукта. Следующий момент: иногда неразумно писать 10 классов, если этот кусок верстки встречается 1 раз и не повторяется. Создайте дополнительный блок! Так например, в шапке сайта находится совершенно уникальное поле для поиска, которого не видно больше нигде на сайте (на сегодняшний день) - назовите его .b-page-header-search и разбейте на элементы как угодно. Вам не нужно писать .b-page-header__элемент.b-page-search__element, поскольку общего у них будет ну разве что position relative. Когда дойдете до следующего поиска - вернетесь назад и исправите этот, не нужно продумывать на будущее, вы будете терять кучу времени в изучении и все равно запутаетесь.


Три способа реализации при БЭМ:
Вариант 1. Без вложенности - имя элемента составляется из имени блока и элемента для избежания дублирования
<style>
.select__selectitem {...}
.menu__selectitem {...}
</style>
<div class="menu">
  <div class="menu__menuitem">
    Menu item 3
    <div class="select">
      <div class="select__selectitem menu__selectitem">option1</div>
      <div class="select__selectitem menu__selectitem">option2</div>
    </div>
  </div>
</div>


Вариант 2. Со вложенностью, если есть модификатор - вложенность сделать можно, осознавая что при подключении стилей из других проектов также придется работать со вторым уровнем вложенности
<style>
.select_type_in-menu .select__item {...} // БЭМ не_запрещает вложенность, если есть модификатор
</style>
<div class="menu">
  <div class="menu__item">
    Menu item 3
    <div class="select select_type_in-menu">
      <div class="select__item">option1</div>
      <div class="select__item">option2</div>
    </div>
  </div>
</div>


Вариант 3. Без вложенности. Создание класса для каждого элемента с модификатором. Минус - дополнительные классы, увеличивающие сложность при чтении верстки
<style>
.select__item_type_in-menu {...}
</style>
<div class="menu">
  <div class="menu__item">
    Menu item 3
    <div class="select">
      <div class="select__item select__item_type_in-menu">option1</div>
      <div class="select__item">option2</div>
    </div>
  </div>
</div>
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
werty1001
@werty1001
undefined
БЭМ про независимость блоков вот собственно и все. Стоит ли присоединиться к секте? Каждый решает сам. Любой мелкий сайт / ленд или что-то крупнее может очень комфортно жить без бема это факт.

Сам я в какой-то момент решил, что лучше иметь какую-то методологию, а серьезных альтернатив у бема сегодня нет, пришлось вливаться. Что касается избыточности кода, классов там и всякого такого, то крутые чуваки ручками бем и не пишут, они используют полный стек от яндекса. Я просто написал обертку для pug и сделал свою gulp сборку.
Ответ написан
Комментировать
@hedint
Web разработчик
допустим, я сделал, как вы написали:
.calculator {}
.calculator_theme_material {}
.calculator .button {}
.calculator_theme_material .button {}

А потом подключил на страницу какую-нибудь стороннюю тему, которой тоже нравится замечательное .button, и она его использует. В итоге моя кнопка рухнула, либо мне надо переопределять ВСЕ стили, которые объявляются в .button в сторонней теме.
-------
в БЭМ у нас компоненты (блоки), которые удобно использовать и удобно переиспользовать; это улучшает восприятие проекта; это удобно в сочетании с современными фреймворками типа React'а;

Глядя на БЭМ блок, я сразу вижу, что эта кнопка относится к блоку, я знаю, где она будет в стилях, я знаю, что ее не будут аффектить какие-то лишние глобальные/сторонние стили.

Это просто удобно, в конце концов, а вот ваш яростный хэйт выглядит странно. )
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы