Как позиционировать Блок в БЭМ?

Question

[rtfm mftr]

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

<div class='slider float-left margin-top-40 pos-abs top-100'>...

Первый не нравится тем что надо добавлять лишний див и ломать голову как его назвать. Второй тем что надо плодить кучу классов которые 1 раз используются плюс у самого Блока дофига классов.

Answer 1

[Сергей Протько]

это не бэм.

Первый способ, как я понял, заворачивать в Элемент

Не совсем "заворачивать", просто только элементы отвечают за позиционирование, а блоки - задают базовые стили.

<!-- у элемента в принципе не обязательно должен быть блок, но желательно -->
<div class="page__wrapper block"> 
    <div class="block__header header"></div>
</div>

Ну то есть идея примерно такая.

а второй добавлять вспомогательные классы как-то так

Это вообще не БЭМ, это... ну как через атрибут style только меньше проблем, но куча дублирования.

Вообще рекомендую вам посмотреть вот это: WSD в Новосибирске // БЭМ — норм, Вадим Макеев

Comments

[rtfm mftr]

Не совсем понял, на один тег вешается и Элемент и Блок?

[Сергей Протько]

rtfmmftr: да, так можно, если мы обязанности соблюдаем корректно. Как бы а почему нельзя?

[rtfm mftr]

Сергей Протько: хм. на сайте самого проекта целая статья посвящена тому как определить что является элементом, а что блоком, из чего я сделал вывод что один тег может быть строго или тем или другим

[Сергей Протько]

rtfmmftr: не верьте мне наслово. Вся суть в уменьшении связанности стилей и повторном реюзе. Там в статьях приводится пример использования и блока и элемента на одном элементе.

[Ксения]

Сергей Протько: Сергей, я правильно понимаю: вот есть у меня контейнер с какой-то начинкой. Этот контейнер на странице размещен по центру по горизонтали. Тогда классы должны быть такие:

<div class="portfolio portfolio__position"> 
начинка
</div>

CSS:
.portfolio {
    width: 500px;
    background: red 
   ...
}
.portfolio__position {
    margin: 0 auto;
}

Получается есть блок "portfolio" где .portfolio отвечает на внутреннее содержимое и размеры, и тд, а его элемент .portfolio__position - за его же расположение на странице?