Вот на практике я столкнулся с несколькими вопросами по БЭМ

Question

Вот на практике я столкнулся с несколькими вопросами по БЭМ

и, хотя, я пересмотрел, наверное, все БЭМ-митапы и многие другие видео по БЭМУ, для меня ответы на, казалось, такие очевидные вопросы остались не совсем очевидными.

Допустим, у меня есть такая структура:

...
<body>

<header class="header">
<span class="header__logo">LOGO</span>
</header>

<h1>Its home page</h1>

<div class="some-block">
<p class="some-block__text">Some stuff</p>
</div>

<div class="some-block">
<p class="some-block__text">Some another stuff</p>
</div>

</body>
</html>

И CSS:

.header {
background-color: orangered;
}

.some-block {
background-color: orange;
}

.some-block__text {
margin: 0;
}

Первый вопрос. Что если мне нужно для блока *Header* поставить margin-bottom: 10px? Так как это блок и я хочу его переиспользовать, то для него задать я не могу. В таких случаях идеально должны подойти миксы, те сделать *Header* элементом другого блока, НО какого?

...
.???__header {
margin-bottom: 10px;
}

Второй вопрос. Вот у меня на этой странице есть 2 блока *Some Block* и для них мне нужно сделать margin: 15px, те мне опять же нужно сделать его элементом какого-то блока (какого и как я пойму из первого ответа) и опять же сделать:

...
.???__some-block (или?) {
margin: 10px;
}

Но что если для второго такого-же блока мне нужно, чтобы правый внешний отступ был 20px: margin-right: 20px (и это исключительно особенность его расположения на этой страницы, как и внешние отступы по 10px, просто для второго такого-же блока правый отступ нужен в 20px).

Третий вопрос. Что если у меня появились еще 3 дополнительных страницы, например, *About*, *Contacts* и *Policy* на каждой из которых (КРОМЕ *Contacts*) у блока *Header* как и на странице *Home* margin-bottom: 10px, а на странице *Contacts* margin-bottom: 15px (это чисто дизайнерская особенность этой странице и этот отступ для блока *Header* в 15px зависит только от того, что он находится на странице *Contacts*).

Четвертый вопрос. На каждой странице, как в примере со страницей *Home* у меня есть заголовок (h1), который показывает на какой странице я нахожусь и стили которого я до этого момента оставлял базовыми, но вот теперь я решил задать, что на всех этих страницах он будет размером в 27px, те мне его нужно выделить в отдельный блок? Или же на каждой странице сделать его элементом какого-то другого абстрактного блока (какого я пойму из первого вопроса)?

И вот я выделил как-то этот заголовок, но что если на странице *Home* (что является особенностью этой страницы) этот заголовок имеет размер 30px и color: green? Что сделать в этом случае?

#css #frontend #html #programming #russian

0

28.02.2021

2 ответов

6 просмотров

veal Автор вопроса

Андрей Гуртовой
1) сделай <body class="page"> и тогда хедеру можно...

да спасибо я уже нашел ответы на все вопросы)

0

07.03.2021

Андрей Гуртовой · Accepted Answer

1) сделай <body class="page"> и тогда хедеру можно сделать миксин или обёртку от этого page блока. 2) если я правильно понял то ответ как и в первом вопросе. Ты можешь например навесить миксинов с говорящими именами page__someblock page__someblock_mr10 в стиле emmet, мне кажется это оправдано если существуют такие потребности. Или лучше вообше тут не использовать миксины, а модификатор делать к этому сомеблоку someblock_mb10 3) тоже. Меняешь на этих страницах модификаторы для элемента page__header в тех местах, где это нужно. 4) желательно любому элементу задавать бэм классы. Какието состояния элемента отличные от базовых нужно выделять при помощи модификаторов Если что-то не понятно -- спрашивай, могу на коде показать например

169 похожих чатов

Вот на практике я столкнулся с несколькими вопросами по БЭМ

2 ответов

Похожие вопросы