BEM Naming Convention

Question

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

У меня есть следующий блок ...

<div class="overlay"> 
    <div class="picturefill"> 
     <img class="picturefill__img" src="images/test.png" /> 
    </div> 

    <div class="overlay__content overlay__content--bottom-left"> 
     <h2 class="overlay__title">About</h2> 
     <a class="overlay__link" href="#">learn more</a> 
    </div> 
</div> 

Я хотел бы сделать как h2 и связать белый, который достаточно легко, но у меня есть еще один тип блока, который существует вне накладкой где Я бы хотел, чтобы h2 был белым ... что это лучший способ сделать это?

ли я создать CSS следующим образом ...

.overlay__title, 
.overlay__text{ 
    color: white; 
} 

.otherBlock__title{ 
    color: white; 
} 

Или есть лучший способ сделать это? Могу ли я создать класс утилиты для создания белых элементов?

Answer 1

Я не могу сказать точно, поскольку я никогда не видел ваш дизайн, но то, что я сделал бы, это создать один универсальный блок, называемый, допустим, article с дополнительным модификатором overlay. Таким образом, вся картина будет выглядеть так:

<div class="article"> 
    <div class="picturefill"> 
     <img class="picturefill__img" src="images/test.png" /> 
    </div> 

    <div class="article__content article__content--bottom-left"> 
     <h2 class="article__title">About</h2> 
     <a class="article__link" href="#">learn more</a> 
    </div> 
</div> 

<div class="article article--overlay"> 
    <div class="picturefill"> 
     <img class="picturefill__img" src="images/test.png" /> 
    </div> 

    <div class="article__content article__content--bottom-left"> 
     <h2 class="article__title">About</h2> 
     <a class="article__link" href="#">learn more</a> 
    </div> 
</div> 

И как это вы можете применить стили так:

.article__title { 
    color: white; 
} 

.article-overlay article__title { 
    color: black; 
} 

Answer 2

Ну BEM это просто методология. Вы можете делать все, что хотите. :) Итак, если ваш заголовок и ссылка всегда белые для этого компонента, сохраните его в объявлении компонента css. Если это локальный характер, а затем создать что-то вроде helpers.css, где вы будете хранить такие правила:

.white-text { color: white; } 
.point { cursor: pointer; } 
.text-center { text-align: center; } 

Это 100% ок раствора.

UPDATE

Просто упоминал 2 минуса на мой ответ. Не могу себе представить, что кто-то может отрицать методологический ответ. : D

Что я хотел сказать автору, что это действительно хорошее решение для хранения часто повторяющихся правил в отдельных объясняемых селекторах. Например, как это делает bootstrap.

Answer 3

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

Для вашего конкретного случая, это звучит как лучший способ, чтобы написать код будет:

// in overlay.css/.less/.scss/etc... 
.overlay__title, 
.overlay__text{ 
    color: white; 
} 

// in otherBlock.css/.less/.scss/etc... 
.otherBlock__title{ 
    color: white; 
} 

который выглядит странно знакомым.

Чтобы объяснить, почему, давайте сделаем шаг в сторону от CSS и посмотрим, как работают другие языки программирования.

---

Представьте у вас есть объект в языке ООП, таких как C#, и этот объект должен представлять книгу. Для объекта книги, вероятно, потребуется title (e.x.Автостопом по Галактике):

class Book { 
    string Title { get; set; } 
} 

Теперь представьте, что вам сейчас нужно создать объект, который представляет человека. Объект человека также нужен title (e.x. Dr.):

class Person { 
    string Title { get; set; } 
} 

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

---

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

Если вы используете препроцессор, вы можете обнаружить, что полезно использовать переменные — особенно для цветов — и Mixins — особенно куски многоразовых стилей — уменьшить объем кода, который на самом деле писать, но в конце концов CSS будет умеренно повторяться.

Это прекрасно. Если ваш CSS будет загружен gzipped, то дублирование будет сжиматься довольно хорошо.

---

... но как насчет других случаев?

Если вы обнаружите, что вы постоянно перекрывая определенный набор стилей (.body__text, .content__text, .description__text), и все они относятся к одному элементу (бывший <p>), а затем рассмотреть возможность изменения стилей по умолчанию для этого элемента, чтобы уменьшить количество CSS, которое вы используете для переопределения элемента.

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

<div class="article"> 
    <time class="article__timestamp"> 
    <span class="article__date">...</span> 
    <span class="article__time">...</span> 
    </time> 
    ... 
</div> 

и

<div class="post"> 
    <time class="post__timestamp"> 
    <span class="post__date">...</span> 
    <span class="post__time">...</span> 
    </time> 
    ... 
</div> 

может быть переработан в:

<div class="article"> 
    <time class="timestamp"> 
    <span class="timestamp__date">...</span> 
    <span class="timestamp__time">...</span> 
    </time> 
    ... 
</div> 

и

<div class="post"> 
    <time class="timestamp"> 
    <span class="timestamp__date">...</span> 
    <span class="timestamp__time">...</span> 
    </time> 
    ... 
</div>