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

Question

[Alibek Kulseitov]

В общем есть у меня лента новостей.

Назвал я ее вот так:

<div class="feeds">
					<ul class="feeds-col">
						<li>
							<div class="feeds-card feeds-card--img">						
								<img src="img/components/card/feeds-card/feeds-img.jpg" class="feeds-card--img-cover" />							
							</div>
						</li> 						
					</ul>
</div>

В общем у меня есть блок feeds-card, и его разновидностей будет 4-5 например карточка с картинкой, карточка типа новостей, карточка типа уведомлении итд.
Первый вид с картинкой написал выше.

В чем собственно вопрос. Все эти разновидности типа feeds-card--img, feeds-card--article - это модификаторы? или отдельные элементы?

Как правильно будет выглядеть класс который будет вешаться на саму картинку типу поста с картинкой? типа

<img src="img/components/card/feeds-card/feeds-img.jpg" class="feeds-card--img-cover" />

Так правильно?

Comments

[alex]

неужели понять где блок, а где элемент так сложно?

feeds-card--img-cover

это модификатор, а у вас элемент. правильно будет вот так: feeds-card__img-cover

Answer 1

[alvvi]

<div class="feeds-card feeds-card--img">						
  <img src="img/components/card/feeds-card/feeds-img.jpg" class="feeds-card--img-cover" />	
</div>

Неверно, так как feeds-card - блок, нельзя использовать модификатор блока внутри его элементов.

Правильно:

<div class="feeds-card feeds-card--img">						
  <img src="img/components/card/feeds-card/feeds-img.jpg" class="feeds-card__img-cover" />	
</div>

Насчет первого вопроса - это определенно модификаторы, элементы это то, что внутри блока.

Comments

[Alibek Kulseitov]

То есть я правильно понимаю?
Если будет карточка с артиклем то будет:
<div class="feeds-card__article-title">Hello</div>

С новостями:
<div class="feeds-card__news-title">Hello</div>

И если у <div class="feeds-card__article-title">Hello</div> Будет дочерний элемент будет так?

<div class="feeds-card__article-title">Hello <span class="feeds-card__article-title__element">asd</span></div>

?

[alvvi]

Алибек Кулсеитов: article = статья. (:

Нет, неправильно:
<div class="feeds-card__article-title">Hello</div>
Это элемент и у него не может быть дочернего элемента. Дочерние элементы могут быть только у блоков.
Если я правильно вас понял, то в вашем случае оно будет выглядеть так:

<div class="feeds-card feeds-card--img">						
  <img src="img/components/card/feeds-card/feeds-img.jpg" class="feeds-card__img-cover" />				
 </div>

<div class="feeds-card feeds-card--article">						
  <img src="img/components/card/feeds-card/feeds-img.jpg" class="feeds-card__img-cover" />
  <div class="feeds-card__title">Hello BEM World</div>						
 </div>

...

[Alibek Kulseitov]

Илья Ростопка: Понял, но как быть в стилизации? Когда у
feeds-card--article Будут свои стили заголовка

А у feeds-card--news Будут свои стили заголовка ?

Писать вот так

<div class="feeds-card__title feeds-card__article-title">Hello BEM World</div>

Писать вот так

<div class="feeds-card__title feeds-card__news-title">Hello BEM World</div>

[alvvi]

Алибек Кулсеитов: тогда проще добавить feeds-card__title модификатор --news, модификаторы могут быть и у элементов, но я бы сделал по-другому в таком случае: применяем чейнинг и стилизуем заголовки, которые находятся внутри блока с модификатором. В таком случае, код станет чуть менее читабельным, но зато более логичным.

.feeds-card--news .feeds-card__title {
  /* rules */
}

[Alibek Kulseitov]

Илья Ростопка: Понял) спасибо!) и последний вопрос как вам удобнее писать модификаторы через "--" тире или "_" ?