Правильно ли сверстано по БЭМ?

Question

[counterprowtf]

Правильно ли сверстано секция по методологии бэм? Логично ли указаны классы?

<section class="team">
		<div class="container">
			<div class="team-box">
				<div class="team-box__item">
					<img src="images/team-1.jpg" alt="" class="team-box__img">
					<h2 class="team-box__title">Ruth Woods</h2>
					<h3 class="team-box__subtitle">Founder, CEO</h3>
					<p class="team-box__text">
						Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
						fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non
						magna. Nullam quis risus eget urna mollis ornare vel eu leo.
					</p>
					<div class="team-box__social-icons">
						<ul class="team-box__list-social-icons">
							<li class="team-box__social-item">
								<a href="#" class="team-box__social-link">
									<i class="fa fa-facebook" aria-hidden="true"></i>
								</a>
							</li>
							<li class="team-box__social-item">
								<a href="#" class="team-box__social-link">
									<i class="fa fa-twitter" aria-hidden="true"></i>
								</a>
							</li>
							<li class="team-box__social-item">
								<a href="#" class="team-box__social-link">
									<i class="fa fa-linkedin" aria-hidden="true"></i>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</section>

Answer 1

[ReActor Дмитрий Вершанский]

team-box__list-social-icons
Это у Вас модиффикаторы так именуются? Если дефисы в Вашем случае, всего лишь символ разделения слов в имени класса (части Элемента), то лучше прибегнуть к camelCase, при котором в многосоставном имени класса, каждая первая буква - заглавная (за исключением первого слова)

Comments

[counterprowtf]

team-box__list-social-icons, да дефис тут только слушит разделением то есть вот так? team-box__listSocialIcons ??

[ReActor Дмитрий Вершанский]

counterprowtf, listSocialIcons (в первом слове первая буква НЕ должна быть заглавной

[counterprowtf]

HunteR-VRX, Понял, а в общем правильная разметка по бэм?

[Realetive]

@HunteR-VRX

то лучше прибегнуть к camelCase

— это не «лучше», а лишь один из вариантов, „вкусовщина“: https://ru.bem.info/methodology/naming-convention/...

[ReActor Дмитрий Вершанский]

Realetive, в рамках именования классов с точки зрения БЭМ, когда появляется необходимость в создании селлектора-модиффикатора, camelCase как раз самое лучшее решение, так как дефисы приняты для задания модиффикаторов БЭМ

[Realetive]

HunteR-VRX,
— Нет. Как я уже сказал, это лишь вопрос привычки. По умолчанию (как было всегда), для разделения модификаторов используется одиночное нижнее подчёркивание, а дефис как разделитель для модификаторов во-первых используется не один, во-вторых, эта схема имеет больше недостатков, чем даже camelCase (т. к. популяризировавший эту схему Гарри Робертс не дочитал документацию до конца и так и не узнал, что модификаторы записываются в формате «ключ-значение»).

[ReActor Дмитрий Вершанский]

Realetive, Wins!