Как задать имя класса по БЭМ?

Question

[wOneBvll]

Спорю с заказчиком пол дня из за БЭМ
Ситуация такая: в блоке dashboard есть одинаковые списки, в которых одинаковые пункты(внешне)
Списки разные по смыслу, как и их пункты, также в разных списках могут изменять размер .img, цвет теста и тд
Мой вариант (посоветуйте как , как задать имена классов для картинки и текста)

<aside class="dashboard">
  ...
    <div class="dashboard__list dashboard__subscribers">
      <div class="dashboard__item">
        <div class="img"></div>
        <div class="name"></div>
      </div>

      <div class="dashboard__item">
        <div class="img"></div>
        <div class="name"></div>
      </div>
    </div>
  ...
    <div class="dashboard__list dashboard__subscribtions">
      <div class="dashboard__item">
        <div class="img"></div>
        <div class="title"></div>
        <div class="descriptions"></div>
      </div>

      <div class="dashboard__item">
        <div class="img"></div>
        <div class="title"></div>
        <div class="descriptions"></div>
      </div>
    </div>

</aside>

Вот так предлагает заказчик:

<aside class="dashb">

  <div class="dashb-subscriptions">
    <div class="dashb-subscriptions__item">
      <div class="dashb-item__title"></div>
      <div class="dashb-item__desc"></div>
    </div>
  </div>

  <div class="dashb-user-list">
    <div class="user-list__item">
      <div class="dashb-item__title"></div>
      <div class="dashb-item__desc"></div>
    </div>
  </div>

</aside>

Comments

[profesor08]

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

[wOneBvll]

не совсем понял, какие компоненты? расскажите, может реально от бэм откажусь

[Виталий Першин]

Оба варианты не правильные. Скрины макета покажите.

[wOneBvll]

Вот, Виталий, что думаете?

Answer 1

[Виталий Першин]

Судя по макету тут как минимум 3 варианта. Если придерживаться вашей версии, что все в одном блоке dashboard, то будет примерно такая картина с модификатром (ключ_значение):

<div class="dashboard">
	<div class="dashboard__container">
		<div class="dashboard__header">
			Your channels
		</div>
		<div class="dashboard__btn btn">
			<div class="btn__ico"></div>
			<div class="btn__content">Create a chanell</div>
		</div>
		<div class="dashboard__list">
			<div class="dashboard__item dashboard__item_type_1">
				<div class="dashboard__pic dashboard__pic_size_smal">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title dashboard__title_size_small">lorem</div>
					<div class="dashboard__url">lorem</div>
				</div>
			</div>
			<div class="dashboard__item dashboard__item_type_small">
				<div class="dashboard__pic dashboard__pic_size_smal">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title dashboard__title_size_small">lorem</div>
					<div class="dashboard__url">lorem</div>
				</div>
			</div>
			<div class="dashboard__item dashboard__item_type_small">
				<div class="dashboard__pic dashboard__pic_size_smal">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title dashboard__title_size_small">lorem</div>
					<div class="dashboard__url">lorem</div>
				</div>
			</div>
		</div>
	</div>
	<div class="dashboard__container">
		<div class="dashboard__header">
			Subscriptions
		</div>
		<div class="dashboard__list">
			<div class="dashboard__item">
				<div class="dashboard__pic">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title">lorem</div>
					<div class="dashboard_desc">lorem</div>
				</div>
			</div>
			<div class="dashboard__item">
				<div class="dashboard__pic">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title">lorem</div>
					<div class="dashboard_desc">lorem</div>
				</div>
			</div>
			<div class="dashboard__item">
				<div class="dashboard__pic">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title">lorem</div>
					<div class="dashboard_desc">lorem</div>
				</div>
			</div>
		</div>
	</div>
</div>

Второй вариант это миксовать с родителем:

<div class="dashboard">
	<div class="dashboard__container subscribers">
		<div class="dashboard__header">
			Your channels
		</div>
		<div class="dashboard__btn btn">
			<div class="btn__ico"></div>
			<div class="btn__content">Create a chanell</div>
		</div>
		<div class="dashboard__list subscribers__list">
			<div class="dashboard__item subscribers__item">
				<div class="dashboard__pic subscribers__pic">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title subscribers__title">lorem</div>
					<div class="dashboard__url">lorem</div>
				</div>
			</div>
		</div>
	</div>
	<div class="dashboard__container subscribtions">
		<div class="dashboard__header">
			Subscriptions
		</div>
		<div class="dashboard__list">
			<div class="dashboard__item">
				<div class="dashboard__pic">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title">lorem</div>
					<div class="dashboard_desc">lorem</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</div>

3-й вариант и порой самый уместный это не обращать внимание на то что блоки якобы похожи. Это разные блоки по своему назначению, а значит их смело можно делать разными и в разметке. Ведь если у них разное предназначение, значит возможны и значительные отличия в будущем:

<div class="dashboard">
	<div class="dashboard__subscribers subscribers">
		<div class="dashboard__header">
			Your channels
		</div>
		<div class="dashboard__btn btn">
			<div class="btn__ico"></div>
			<div class="btn__content">Create a chanell</div>
		</div>
		<div class="subscribers__list ">
			<div class="subscribers__item">
				<div class="ubscribers__pic">
					<img src="" alt="" class="subscribers__img">
				</div>
				<div class="subscribers__content">
					<div class="subscribers__title">lorem</div>
					<div class="subscribers__url">lorem</div>
				</div>
			</div>
		</div>
	</div>
	<div class="dashboard__subscribtions subscribtions">
		<div class="dashboard__header">
			Subscriptions
		</div>
		<div class="subscribtions__list">
			<div class="subscribtions__item">
				<div class="subscribtions__pic">
					<img src="" alt="" class="subscribtions__img">
				</div>
				<div class="subscribtions__content">
					<div class="subscribtions__title">lorem</div>
					<div class="subscribtions_desc">lorem</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</div>

Каждый из этих вариантов можно еще доработать

Comments

[wOneBvll]

Большое спасибо, обязательно выберу один из трех вариантов

Answer 2

[quiplunar]

Что это за фигня?

dashboard__list dashboard__subscribers

Элемент два раза элемент? Это не по BEM!

Ну что у вас что и у заказчика варианты ужасные!

Вот будет уже адекватно:

<aside class="aside">

  <div class="aside__wrap">
    <div class="aside__item">
      <div class="aside__item-title"></div>
      <div class="aside__item-desc"></div>
    </div>
  </div>

  <div class="aside__wrap">
    <div class="aside__item">
      <div class="aside__item-title"></div>
      <div class="aside__item-desc"></div>
    </div>
  </div>

</aside>

Comments

[Виталий Першин]

aside__item-title
aside__item-desc
Дичь полная либо просто title desc либо делать отдельный item и его элементы item__title item__desc

[quiplunar]

Что? Просто title и desc? Вот что дичь полная. И отдельный item делать не менее плохо. Автор вопроса и вы где набрались такого дерьма то?

[Виталий Першин]

quiplunar,

Просто title и desc? Вот что дичь полная.

Просто title и desc в контексте aside, а не aside__item.
Вы создаете элемент aside__item и в тоже время внутрь суете элемент aside__item-title вы косвенно связали элементы, чего в БЭМ делать нельзя. вы либо пишите aside__title как здоровый человек, либо отдельный item и привязывайтесь к нему, тогда ваш пример будет логичен.

[quiplunar]

Виталий, "вы косвенно связали элементы" а эти элементы и так связанны и ничего плохого в этом нет. По документации блоки не связаны и не зависимы а элементы еще как связаны и зависимы.

чего в БЭМ делать нельзя

- там такого нет, и это все идеально со стороны документации.

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

Тут на самом деле больше дело вкуса. Вам нравиться дробить проект на очень маленькие кусочки, я выбрал золотую середину.

[Виталий Першин]

quiplunar,

"вы косвенно связали элементы" а эти элементы и так связанны и ничего плохого в этом нет.

Они связаны родительским блоком, в рамках которого могут занимать любое место, а вы таким именованием по сути создаете элементу двух родителей aside и aside__item, но вы это поймете потом при поддержке такого кода и его расширении в будущем, если конечно занимаетесь поддержкой своих костылей.

я выбрал золотую середину.

Золотая середина чего? Того как делать нельзя с тем как делать можно? При таком подходе БЭМ вам только мешает.

[quiplunar]

Виталий,

Они связаны родительским блоком, в рамках которого могут занимать любое место

А что мешает переместить aside__item-title в любое другое место в блоке aside? И что с этого станет? Мир рухнет? Так-же держу в курсе что aside__item-title никогда не переместиться из aside__item. Если бы у вас был опыт вы бы понимали это.

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

Я то поддерживаю, скажу больше что и чужие решения поддерживаю в отличии от вас. У меня ощущение что вы ни одного проекта не поддерживали и не расширяли возможно и не делали. Говорите что услышали и не так поняли, или сами придумали без опоры на практику.

Золотая середина чего?

Золотая середина того чтобы не плодить миллиарды блоков чтобы тратить время/силы/качество на разбиение и поиск системных блоков. Я надеюсь вы знаете что такой системный блок.

Того как делать нельзя с тем как делать можно?

Я не понимаю где это написано то? Что можно а что нельзя? Почитайте BEM, и поймите что со стороны BEM тут ошибок нет.

Я глянул ваш профиль, до сих пор гульп используете? Если да, то соболезную.

[Виталий Першин]

quiplunar,

aside__item-title никогда не переместиться из aside__item

Исходя из того как вы именуете элементы, у вас скорее всего будут присутствовать такие же конструкции по типу:

<div class="aside__el">
      <div class="aside__el-title"></div>
      <div class="aside__el-desc"></div>
    </div>
<div class="aside__el2">
      <div class="aside__el2-title"></div>
      <div class="aside__el2-desc"></div>
    </div>

И будет очень смешно видеть, что-то вроде этого:

<div class="aside__item">
      <div class="aside__el-title"></div>
      <div class="aside__el2-desc"></div>
</div>

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

Я глянул ваш профиль, до сих пор гульп используете? Если да, то соболезную.

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

Золотая середина того чтобы не плодить миллиарды блоков чтобы тратить время/силы/качество

Так и скажите, вам сложно и накладно по времени делать полноценный БЭМ, поэтому вы используете костыли в ущерб качеству. Повторюсь:

При таком подходе БЭМ вам только мешает.

[quiplunar]

<div class="aside__el">
     <div class="aside__el-title"></div>
     <div class="aside__el-desc"></div>
</div>
<div class="aside__el2">
     <div class="aside__el2-title"></div>
     <div class="aside__el2-desc"></div>
</div>

// UPDATE //

<div class="aside__item">
      <div class="aside__el-title"></div>
      <div class="aside__el2-desc"></div>
</div>

И с чего вы взяли что такое вообще может произойти? Это произойдет только в вашей голове и нигде больше. Мы сейчас смотрим на реальный мир или на вашу фантазию?
Фантазия отличается от реального мира держу в курсе. И даже если это произойдет то это по документации, и все окей.

Ну вот мы сделали системный блок, ну или просто создали новый как вы считаете правильным:

<div class="jeesus">
     <div class="jeesus__title"></div>
     <div class="jeesus__desc"></div>
</div>

<div class="devil">
     <div class="devil__title"></div>
     <div class="devil__desc"></div>
</div>

// UPDATE //

<div class="aside__item">
      <div class="jeesus__title"></div>
      <div class="devil__desc"></div>
</div>

Ну вот ваш пример, и все равно что то не то, не замечаете. Просто вы сравниваете не сравнимое. Приводите в пример что НИКОГДА НЕ ПРОИЗОЙДЕТ И НЕ ДОЛЖНО ПРОИСХОДИТЬ.

Вы не понимаете простую истину. Не зачем дробить блок на хер пойми что. На практике на много легче работать с aside, aside__item, aside__item-title и т.д. в отличии от вашего дерьмо дробления. И это полностью по БЕМ, поймите что это не нарушает его.

Вы не понимаете что такое костыль, а что такое БЕМ дока, прочитайте ее.

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

- Я за вас очень рад. Зашквар не в технологии а в не желании изучения новой технологии

[Виталий Першин]

quiplunar, Вы следующий раз когда будете мне что-то отвечать, жмите ответить, чтобы мне уведомление пришло или так удобнее?

Ну вот ваш пример, и все равно что то не то, не замечаете.

Да, замечаю. Замечаю что вы не понимаете для чего нужны блоки и как их использовать.
Вы же сами заметили да?
Такая конструкция не возможна и это видно не вооруженным глазом:

<div class="aside__item">
      <div class="jeesus__title"></div>
      <div class="devil__desc"></div>
</div>

А такая вполне:

<div class="aside__item">
      <div class="aside__el-title"></div>
      <div class="aside__el2-desc"></div>
</div>

НИКОГДА НЕ ПРОИЗОЙДЕТ И НЕ ДОЛЖНО ПРОИСХОДИТЬ.

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

дерьмо

Зашквар не в технологии а в не желании изучения новой технологии

Еще один бред.. я где-то говорил, что не желаю чего-то учить? Я с вебпаком познакомился раньше гальпа и сейчас использую, то что мне больше подходит. То что вы пытаетесь использовать вебпак и задаете тупые вопросы про него, не делает вас профессионалом. откуда столько чсв

[quiplunar]

@Get-Web

Забыл нажать ответить :)

Еще один бред.. я где-то говорил, что не желаю чего-то учить?

- Тут я действительно был не прав, приношу извинения.

То что вы пытаетесь использовать вебпак и задаете тупые вопросы про него, не делает вас профессионалом

- Ну с этим я тоже согласен, мой косяк.

откуда столько чсв

- Я склоняюсь к тому что это природное, но я и в правду хорош.

Ладно вы меня убедили => ВЫ ПРАВЫ!!! Признаю свое поражение :)

Answer 3

[WapSter]

Первый вариант верен, но не совсем там есть элемент и он же другой элемент, более правильнее модификатор дать. И как это разные по смыслу? Это списки отображаются они одинаково, то что ты описали решается модификаторами. К тому же во втором варианте элементы одного блока вставлены в элементы другого так делать нельзя.

Answer 4

[Дмитрий]

Тогда лучше так (при условии, если эти классы еще не используются)

<div class="dashboard__title"></div>
<div class="dashboard__desc"></div>
<div class="dashboard__img"></div>