Как правильно именовать CSS классы по BEM на примере?

Question

[Михаил Р.]

Приветствую!

Для примера накидал шаблон вывода новостей.
1. Как Вы именовали бы классы на предоставленном примере в рамках BEM?
2. Грамотно ли использовать ul списки в моем примере? Или здесь лучше div использовать?

Комментарии в шаблоне написал для наглядности.

Спасибо!

<!-- главный блок с новостями -->
<div class="news">
	
	<!-- контейнер с новостями -->
	<ul class="list">
		
		<!-- колонка с новостью -->
		<li class="column">
			
			<!-- контейнер с новостью -->
			<ul class="list">
				
				<!-- заголовок новости -->
				<li class="title">Заголовок новости</li>
				
				<!-- дата новости -->
				<li class="date">
					<span class="time">10:00</span>
					<span class="date">01.01.2000</span>
				</li>
				
				<!-- описание новости -->
				<li class="description">Описание новости</li>
				
			</ul>
			
		</li>
		
	</ul>
	
</div>

Comments

[Сергей delphinpro]

2. Грамотно ли использовать ul списки в моем примере? Или здесь лучше div использовать?

Определенно, второй вложенный список совсем не к месту.
Там скорее что-то вроде такого:

<article>
  <h1>Заголовок</h1>
  <aside>Дата</aside>
  <div>Содержимое</div>
</article>

внешний список в данном случае в общем-то тоже смотрится не к месту. Он пустой (без текста).

[Михаил Р.]

Сергей delphinpro, т.е. лучше было бы так?:

<!-- главный блок с новостями -->
<div class="news">
	<!-- контейнер с новостями -->
	<div class="list">
		<!-- колонка с новостью -->
		<div class="column">
			<!-- новость -->
		</div>
	</div>
</div>

[Алекс Глебов]

Вот есть у тебя страница
Шапка
Секции
И футер
Для начала вынеси их в блоки. А все остальное, если нужно переиспользовать.
В твоем примере по сути один блок, а все остальное его элементы. Но если контейнер с новостью еще где то будет, то это тоже блок.

[Сергей delphinpro]

Mike Ro, в целом да. Все эти колонки не несут в себе никакой семантики, это всего лишь визуальное оформление.
Но вообще спорный вопрос. Если это основное содержимое страницы, в виде блога, я бы оставил нейтральные теги. Если это небольшой блок новостей в сайдбаре, то думаю, там уместно их списком зафигачить..

[Сергей delphinpro]

В общем посмотрите на макет и прикиньте, список это или нет =)

[Михаил Р.]

Алекс Глебов, странный у Вас комментарий, такое ощущение, что Вы смотрите на другой вопрос, но комментируете мой...

[Михаил Р.]

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

Answer 1

[Дмитрий]

<!-- главный блок с новостями -->
<div class="news">
  
  <!-- контейнер с новостями -->
  <ul class="news__list">
    
    <!-- колонка с новостью -->
    <li class="news__column">
      
      <!-- контейнер с новостью -->
      <div class="news__item">
        
        <!-- заголовок новости -->
        <h2 class="news__title">Заголовок новости</h2>
        
        <!-- дата новости -->
        <div class="news__date">
          <span class="news__date-time">10:00</span>
          <span class="news__date-when">01.01.2000</span>
        </div>
        
        <!-- описание новости -->
        <div class="news__desc">Описание новости</div>
        
      </div>
      
    </li>
    
  </ul>
  
</div>

Comments

[Атланта]

Использую такой стиль, всё максимально кратко и без лишних слов, например block (разумеется, если можно обойтись без них).

[Олег]

Почему news__item не сделать блоком?
Подразумевается, что news__list - аналог row в бутстрапе, news__column - аналог col (и то и другое выполняет роль сетки, т.е. внешнего позиционирования).
Значит внутри одного news__list может быть много news__column, а значит и много news__item -- это повторяющиеся однородные сущности. А что с такими делают? Выносят в отдельный блок.

[Дмитрий]

Олег, зависит от проекта. Если данные блоки использются как сетка, можно вынести отдельно.