Help for BEM Usage

[ghost]

Hi,

Question 1: Block name

1. block_name
2. block-name

True: 1 or 2?

Question 2: Sub block name

HTML:

<div class="block"> <!-- This is a block -->
	<div class="block__header"> <!-- Element and block -->
		<h4 class="(Sub block 1)???"> <!-- Element and block -->
			<i class="sub-block1__icon"></i> <!-- (This is a icon) Element -->
			Title
		</h4>
		<div class="(Sub block 2)???">...</div>
	</div>
	<div class="block__elem2"></div> <!-- Element -->
	<div class="block__elem3"></div> <!-- Element -->
</div>

I saw usage as below

Sub block 1:

<div class="block">
	<div class="block__header">
		<h4 class="block__header__title">Title</h4>
	</div>
</div>

Sub block 2:

<div class="block">
	<div class="block__header block-header">
		<h4 class="block-header__title">Title</h4>
	</div>
</div>

Which is right?

Thx for help.

[iamstarkov]

hi @erdalmedet

Question 1: Block name

1. block_name
2. block-name

True: 1 or 2?

usually doesnt matter, common adopted convention is to use __ for elements, and -- for modifiers. What do you want to use to separate words, is up to you. i prefer - as word separator, it seems more readable

[iamstarkov]

Question 1: Sub block name

can your sub-block1 be used some where else? if so, then its just another block with its own __elems and --mods. Otherwise, its just parent block's elem

[iamstarkov]

btw, this is incorrect: block__header__title. blocks, has flat structure of elems, so it should be just block__title

[iamstarkov]

and tbh, im not sure i get your 2nd question correct. can you re-phrase it?

[ghost]

Thx, the final :)

<div class="block">
	<div class="block__header">
		<h4 class="block__title">
			<i class="block__icon"></i> <!-- block header title icon -->
			Title
		</h4>
		<div class="block__content">...</div> <!-- block header content -->
	</div>
	<div class="block__content"></div> <!-- block content -->
	<div class="block__footer">
		<i class="block__icon"></i> <!-- block footer icon -->
	</div>
</div>

Two pieces block__content and block__icon :(

As an example please, my Eng. is bad :)

[iamstarkov]

I assume that block__content is different in those two places, then if i was in your shoes, i would choose between two things:

1. split block__content into block__header-content and block__content
2. extract block__header as separate block.

regarding repeated block__icon, can you just do block__icon-one and block__icon-two?