Трудность понимания преимуществ БЭМ - PullRequest
Новая
       10

Трудность понимания преимуществ БЭМ

1 голос
/ 11 февраля 2020

Я пытаюсь выучить БЭМ и с трудом оцениваю его преимущества. В качестве примера я пошел на страницу Tailwind Utility-First , чтобы получить этот код: 

<div class="chat-notification">
  <div class="chat-notification__logo-wrapper">
    <img class="chat-notification__logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification__content">
    <h4 class="chat-notification__title">ChitChat</h4>
    <p class="chat-notification__message">You have a new message!</p>
  </div>
</div>

  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification__logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification__logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification__content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification__title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification__message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }

Когда я смотрю на него, я не могу не думать, что его следует упростить до просто 

<div class="chat-notification">
  <img src="logo.jpg" alt="ChitChat Logo">
  <h4>ChitChat</h4>
  <p>You have a new message!</p>
</div>

.chat-notification {
  position:relative;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  box-sizing:border-box;
  padding-left: 3.5rem;
}
.chat-notification img {
  position:absolute;
  top:0;
  left:0;
  clip: rect(0,200,400,0);
    width: 3rem;
}
.chat-notification h4 {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
}
.chat-notification p {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
}

Я в основном упростил HTML и избавился от ненужных обёрток, дивитов, классицитов. Мой вопрос заключается в том, почему дескрипторы классов, такие как __logo-wrapper и __title, полезны, когда такие теги, как img, h4, p уже достаточно различимы и semanti c?

Ответы [ 3 ]

4 голосов
/ 11 февраля 2020
  1. Каскады не масштабируются. Селектор .chat-notification img или .chat-notification h4 подразумевает, что ваш блок chat-notification не содержит подблока, который может использовать элемент <img> или <h4>.
  2. Использование элементов в селекторе делает Код негибкий. Возможно, вы захотите отобразить <svg>, <canvas>, <video> вместо <img>, но с вашим текущим кодом CSS потребуется изменить код CSS ранее. Ваш SEO-консультант попросит вас заменить <h4> на <h2>, и вам придется поменять CSS селекторы.

[ПРАВИТЬ] В связи с классицитом: БЭМ, Каскадные стили и Класситис?

0 голосов
/ 19 февраля 2020

Не-БЭМ CSS тесно связан с HTML, т.е. изменения в HTML, скорее всего, приведут к изменениям в CSS. Я бы сказал, что это идет вразрез с SOLID принципами кодирования, нарушая принцип открытого-закрытого и, возможно, принцип единой ответственности.

Было бы лучше, если бы CSS не был так тесно связан с HTML.

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

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

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

Лично я люблю БЭМ и использую его, когда могу.

0 голосов
/ 12 февраля 2020

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

Кроме того, в большинстве случаев нет реальных причин для исключения классов в элементах html. Браузеры любят классы и стили, связанные с ними. Одноуровневые классы работают намного быстрее, чем каскады. Переданные байты примерно равны из-за zopfli / brotli. Отбрасывание классов просто затрудняет чтение исходного кода.

Но это только о классах.

Я в основном упростил HTML и избавился от ненужных оболочек, divitis

Упрощение html Уценка обычно хорошая вещь. Элементы logo-wrapper и content просто избыточны, и отбрасывание их не противоречит БЭМ. Например: 

<div class="chat-notification">
  <img class="chat-notification__logo" src="logo.jpg" alt="ChitChat Logo">
  <h4 class="chat-notification__title">ChitChat</h4>
  <p class="chat-notification__message">You have a new message!</p>
</div>

почему дескрипторы классов, такие как __lo go -wrapper и __title, полезны, когда такие теги, как img, h4, p уже довольно различимы и semanti c?

На самом деле, пример не является красноречивым из-за простоты. Здесь у нас всего три поля и контейнер. Когда у вас будет несколько изображений или несколько разных «сообщений» (например, поля «за» и «против»), вам нужно будет пометить теги img и p. Также img это не семанти c вещь, это сущность HTML мира, но не ваша. Это не просто абстрактное изображение, это logo, поэтому лучше пометить его семантически.

Лучше думать о HTML как о низкоуровневой генерируемой вещи, которая помогает переводить наши приложения в браузеры. Вот почему существуют такие библиотеки, как BEM HTML и bem-реаги * .

Например 

({
    block: 'chat-notification',
    content: [
        { elem: 'logo', image: 'logo.jpg', text: 'ChitChat Logo' },
        { elem: 'title', content: 'ChitChat' },
        { elem: 'message', content: 'You have a new message!' }
    ],
})

Пример с шаблонами

...