Вопрос касательно БЭМ?

Question

[Alibek Kulseitov]

Допустимо ли в БЭМ писать например:

Вопрос первый:
HTML

<div class="news">
	<ul class="news-list">
		<li>1</li>
		<li>2</li>
	</ul>
</div>

CSS

.news {
   padding: 20px 0
}
.news-list {
   list-style: none
}
.news-list li a {
  color: red
}

Второй вопрос:

HTML

<div class="news">
	<ul class="news__list>
		<li class="news__list-item>1</li> /* Этот вариант правильнее? */
		<li class="news__item">2</li> /* Или этот ? */
	</ul>
</div>

Третьи вопрос:

<div class="navbar">
   <div class="navbar__menu"
       ...
   </div>
  <ul class="language-swither">
     <li>en</li>
    <li>rus</li>
  </ul>
</div>

Тут language-swither как вложенный блок правильно понимаю? не нужно писсать navbar__language-swither ?

Comments

[Сергей delphinpro]

1, недопустимо по БЭМ. На каждый элемент - свой класс.
2. не имеет значения. тут скорее вопрос правильной грамматики английского языка, а не БЭМ
3. нужно. class="navbar__language-swither language-swither"

[Ярослав Иванов]

Да прочтите уже документацию.

[Alibek Kulseitov]

Ярослав Иванов: прочитал всю вот и здесь спрашиваю чтобы закрепить.

[Ярослав Иванов]

Алибек Кулсеитов: Судя по вопросам и не читали. Там четко написано никаких селекторов и так далее.

[Alibek Kulseitov]

Сергей: Так погодите, то есть нельзя каждому элементу свой класс ? я думал наоборот нужно каждому элементу свой класс? То есть вариант .news-list li a { } Правильнее? А насчет англ. Я просто быстро печатал)
А зачем писать class="navbar__language-swither language-swither" два класса?

[Alibek Kulseitov]

Ярослав Иванов: Да помню, но я смотрел примеры сайтов на БЭМ там было news-list ul li { }
По этому в замешательстве

[Alibek Kulseitov]

Ярослав Иванов: Например человек выше пишет что недопустимо на каждый элемент вешать класс, а вы наоборот))

[Ярослав Иванов]

Алибек Кулсеитов: Как вы читаете ?
https://ru.bem.info/methodology/quick-start/
"В CSS по БЭМ также не рекомендуется использовать селекторы по тегам или id."

[Ярослав Иванов]

Алибек Кулсеитов: Вы и тут читаете не понятно как ?)) он ясно написал, что НА КАЖДЫЙ ЭЛЕМЕНТ СВОЙ КЛАСС.

[Сергей delphinpro]

Алибек Кулсеитов: наоборот ) недопустимо по БЭМ то что вы написали. (точка) На каждый элемент свой класс необходимо навесить.
Сорри за неточность =)

[Alibek Kulseitov]

Ярослав Иванов: А, он имел ввиду так "недопустимо по БЭМ использовать селекторы. Нужно вешать на каждый элемент свой класс. Верно?)

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

.news a {
color: red }

[Сергей delphinpro]

А зачем писать class="navbar__language-swither language-swither" два класса?

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

[Ярослав Иванов]

Алибек Кулсеитов: Написанно же белым по черному "Не рекомендуется" а не запрещается. Если проще, быстрее, сохранается структура то можно использовать селектор но лучше на все вешать классы.

[Alibek Kulseitov]

Сергей: Получается стили вешать мне на .language-swither ? Например

<ul class="language-swither">
  <li class="language-swither__item">
 <a href="#" class="language-swither__link"></a> 
</li> 
</ul>

[Сергей delphinpro]

.language-swither - описание самого блока .language-swither
.navbar__language-swither - расположение элемента .navbar__language-swither внутри блока .navbar

[Alibek Kulseitov]

Сергей: Понял спасибо) А можно ли делать миксы элементов? например:
У меня есть список уведомлении в шапке сайта (аля dropdown), высота списка фиксированная с overflow: auto;
И есть страница со списком всех уведомлении. Естественно тут уже нету фиксированной высоты у списка.
По этому я для списка который в dropdown добавил микс к элементу вот так:

<ul class="notification__list dropdown__notification__list">
   ....
</u>

.dropdown__notification__list {
  height: 200px;
  overflow: auto;
}

[Alibek Kulseitov]

Сергей: или все же тут больше подходит модификатор?

[Сергей delphinpro]

Алибек Кулсеитов: Миксы элементов в принципе допустимы. Но это разумно, когда вы миксуете элементы от разных блоков (внешний и вложенный, или тоже смиксованные). В данном случае вам больше подойдет модификатор.
Вообще миксовать надо осторожно.

Answer 1

[iBird Rose]

Вопрос первый:

нет. в БЭМ нельзя обращаться в css к тегам. можно только к классам.

Второй вопрос:

<div class="news">
  <ul class="news-list">
    <li class="news-list__item">
    	<a class="news-list__item-link" href="#">link</a>
    </li> 
    <li class="news-list__item">
		<a class="news-list__item-link" href="#">link</a>
    </li>
  </ul>
</div>

Третьи вопрос:

Нужно писать

Comments

[Alibek Kulseitov]

.news-list это вложенный блок?

[iBird Rose]

Алибек Кулсеитов: это отдельный блок. можете назвать его не news-list, а к примеру общим названием item-list и использовать его в любом месте