Префикс h-

Форум /

Префикс h- (holster) задаётся блоку-обёртке, который используется для внешнего управления блоком или группой блоков, например, для задания отступов или ширины.

Т.е. если у нас есть три блока b-info и у каждого из них должен быть отступ слева 1em, то лучше всего не задавать эти отступы у каждого блока, а обернуть эту группу блоков в блок h-info и задать отступ ему. Блоки-обёртки можно точно так же модифицировать постфиксом (о модификации чуть позже), как и обычные блоки.

Важно понимать, что h-блок это такой же блок, как и b-блок. По него точно так же надо заводить отдельную директорию и отдельный файл (о блоках на файловой системе позже).

Так же следуют понимать, что блоки могут использоваться без обёртки и если внутрений отступ важен для блока, то надо использовать не holster, а inner.

holster vs. inner

Бывает надо задать блоку отступ (margin или padding), для чего вводится дополнительный элемент. Неправильно использовать h- с тем же именем, что и имя блока, т.е. вот так

<div class="h-page-title">
    <div class="b-page-title">
        <h1>Заголовок страницы</h1>
    </div>
</div>

Мы пришли к соглашению, что если внутри блока нужен дополнительный элемент для отступов (или ещё для чего), то для него используется класс с именем блока и постфиксом -i (inner):

<div class="b-page-title">
    <div class="b-page-title-i">
        <h1>Заголовок страницы</h1>
    </div>
</div>

А по новой нотации block-undistorting.wiki, надо использовать постфикс __i:

<div class="b-page-title">
    <div class="b-page-title__i">
        <h1>Заголовок страницы</h1>
    </div>
</div>

basvasilich

Из текста мне кажется неочевидным что: "h-" для группы - правильно "h-" для одного элемента - неправильно В первом абзаце легко пропустить слово "группы".

artvvalek

«а обернуть эту группу блоков в блок h-info и задать отступ ему» Согласен, всегда так делаю.

artvvalek

И к тому же мне очень нравится использовать постфикс _ очень читабельно получается.

monospectr

А что делать в таком случае

<div class="b-controls">
	<table>
		<tr>
			<td>
				<button></button>
				<button></button>
			</td>
			<td>
				<button></button>
			</td>
		</tr>
	</table>
</div>

Таблица используется, как обёртка внутри блока. Для таблицы нужно дать класс l-controls, или b-controls__i?

petrouv

Неправильно использовать h- с тем же именем, что и имя блока Почему?

belyan

Если у блока должен быть внутренний отступ, то почему нельзя задать его в CSS, зачем вообще вводить дополнительный тег b-page-title-i?