nicothin / idiomatic-pre-css Goto Github PK

Блок «Всегда являются БЭМ-блоками» дублируется на странице 2 раза:

1. Напротив «Как отличить БЭМ-блок и БЭМ-элемент»
2. Напротив «Некоторые фрагменты дизайна — всегда БЭМ-блоки»

Стоит объединить эти блоки.

В секции "Очередность написания в контексте селектора" читаю
// Этот блок простилизован в другом файле, тут только каскадная модификация
.fp-tableCell { ... }

Но это же зависимость от контекста! Те какой то где угодно вложенный блок сможет мне поменять стили в окружении. Как я понимаю методологию такого как раз все и стараются избежать. Или тут есть какие то нюансы?
ПС: в БЭМ новичок

блок формы (с элементами: название поля, поле, пояснение, сообщение об ошибке, ect.),

«Миксование — наличие класса БЕМ-блока и класса БЭМ-элемента у одного тега»

Фраза про «ухудшает восприятие кода» фактически звучит как «миксование это плохо и не рекомендуемо, не используйте его». Но миксование - это официально рекомендуемая техника: https://ru.bem.info/methodology/css/#Миксы, незаменимая для:

• Внешней геометрии и позиционирования блоков
• Стилизации групп блоков

Миксы

Позволяют:

• совмещать поведение и стили нескольких сущностей без дублирования кода;
• одинаково форматировать разные HTML-элементы.

Внешняя геометрия и позиционирование

В CSS по БЭМ стили, отвечающие за внешнюю геометрию и позиционирование, задаются через родительский блок.

Пример

HTML-реализация:

<!-- Блок `header` -->
<header class="header">
    <button class="button header__button">...</button>
</header>

CSS-реализация кнопки:

.button {
    font-family: Arial, sans-serif;
    text-align: center;
    border: 1px solid black;    /* Рамка */
}
.header__button {
    margin: 30px;               /* Отступ */
    position: relative;
}

В данном примере внешняя геометрия и позиционирование блока button задана через элемент header__button. Блок button не специфицирует никакие отступы и может быть легко переиспользован в любом месте.

HTML-реализация:

<!-- Блок `footer` -->
<footer class="footer">
    <button class="button">...</button>
</footer>

Стилизация групп блоков

Иногда необходимо применить одинаковое форматирование сразу к нескольким различным HTML-элементам веб-страницы.
Обычно для решения подобных задач применяют групповые селекторы.

Пример

HTML-реализация:

<article class="article">...</article>

<footer class="footer">
    <div class="copyright">...</div>
</footer>

CSS-реализация:

article, .footer div {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #000;
}

В данном примере текст внутри блоков article и copyright имеет один и тот же цвет и шрифт.

Несмотря на то, что групповые селекторы позволяют быстро изменить дизайн страницы, такой подход увеличивает связанность кода.

Поэтому в БЭМ для того, чтобы единообразно отформатировать целый набор HTML-элементов, используют миксы.

Пример

HTML-реализация:

<article class="article text">...</article>

<footer class="footer">
    <div class="copyright text">...</div>
</footer>

CSS-реализация:

.text {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #000;
}

Считаю что раздел про Миксование стоит дополнить этими юскейсами.

В случае острой необходимости элемент может находится физически за пределами блока в DOM.
Пруф: https://en.bem.info/forum/43/

В блоке «Примеси»: https://github.com/nicothin/NTH-start-project/tree/master/src/less/mixins