Несколько вопросов по БЭМ вёрстке. Верно ли я понимаю?

Question

[vis0r]

Пытаюсь разобраться в БЭМ. В данный момент речь только о вёрстке и CSS. Мне нравится парадигма независимости блоков друг от друга, возможность их перемещаемости внутри документа без искажения их внешнего оформления.

Теории начитался, пробую на практике. Появились первые вопросы:

1. Согласно главному утверждению - независимости блоков и повторному их использованию на странице, я пришел к выводу что описание простого блока (без вложенных внутрь других блоков) нужно разделить с его позиционированием, поскольку я могу разместить несколько одинаковых блоков на странице в разных местах, с разными отступами и позиционированием.

Пример простого блока:

<div class="simple-block">
<div class="simple-block__item"></div>
</div>

.simple-block {
padding: 10px;
width: 100px;
height: 100px;
background-color: #ccc;
}
.simple-block .simple-block__item {
width: 30px;
height: 15px;
background-color: #fff;
}

Вопрос: как в данном случае осуществить позиционирование блока .simple-block? Другими словами, в каком месте и как должны быть прописаны отступы, позиционирование и т.д. так, чтобы не привязывать их к данному конкретному блоку? Корректно ли моё утверждение по поводу разделения css внешнего вида и позиционирования блока?

2. Корректна ли нижеприведённая конструкция (в данном случае интересует правильность использования * в стилизации конкретного блока)?

.simple-block * {
font: 400 16px "Arial";
}

Answer 1

[Евгений Петров]

1. У каждого элемента может быть несколько классов, а не один. В том числе и общие для целого набора.

2. Какой смысл осваивать БЭМ и писать *? Это — ужасная практика и вам нужно забыть о ней. Иначе внутри вашего блока вы переписываете эти правила у всех элементов. Это — не просто плохо, а очень плохо

3. Для БЭМ есть фреймворки, потому ни один здравомыслящий человек не будет вручную писать эти крокодилы.

Answer 2

[Виталий Киренков]

1. Используйте доп. классы для блока, который отличается от других.
2. Имхо, использовать * - плохо... Как правило на сайте используется 1 шрифт, максимум 2-3. Он прописывается на боди и всё. И доп шрифты обычно используются для заголовков. Можете на заголовки повесить шрифт, либо же шрифт унести в отдельный класс и ставить его где потребуется.

Comments

[vis0r]

1. Блок не отличается ничем от других, отличается только лишь его позиционирование, отступы. Я же как раз и спрашиваю, правильно ли будет отделать внешний вид блока в css от стилей позиционирования (position, margin и прочих)?

[Виталий Киренков]

Будет правильно.
Как по мне - бэм - плохая идея... Если хотите структурировать свою вёрстку, посмотрите в сторону бутстрапа, а если точнее - то как они отделяют позиционирование, цвета, размеры.

[Евгений Петров]

@vis0r вы не там проводите линию водораздела. Смысл деления на блоки правил не в правилах, а в общности.

Есть некий набор элементов, внутри которого существуют различия. Вот набор описывается в одном общем классе, а различия — в своих классах.

[vis0r]

@Petroveg да это понятно же. Я спрашиваю как раз о том, стоит ли правила позиционирования элемента включать в первоначальный общий набор правил для блока или группы блоков или лучше отделить их сразу же в модификаторы как характерную особенность каждого конкретного блока? Понимаете?

[Виталий Киренков]

@vis0r Лучше отделить. Второй класс с добавкой стилей лучше чем переопределение стилей.

[Евгений Петров]

@vis0r я правильно понимаю, что вопрос звучит примерно так — насколько велики шансы, что в однотипном наборе элементов у некоторых будет другое позиционирование?

Я просто в смысл обсуждения не могу въехать.

[vis0r]

правда я больше ждал скорее конкретного примера, а не просто ответа да или нет...

[vis0r]

@Petroveg да, хотя у меня изначально ситуация как раз такая что есть набор эл-тов, которые выглядят совершенно одинаково, но находятся в разных частях страницы.

[Евгений Петров]

@vis0r не мучайтесь такими вопросами. Набор однотипных правил — это не догматический свод, а необходимость использования правил для описания характерных черт набора элементов. Что войдёт в это описание — неважно.