HTML Соглашение об именах БЭМ - PullRequest
Новая
       13

HTML Соглашение об именах БЭМ

2 голосов
/ 07 февраля 2020

Я изучаю HTML BEM (CSS) архитектуру и совсем не понимаю, даже после просмотра нескольких видео на YouTube. Может ли кто-нибудь из вас просмотреть мой фрагмент кода, чтобы убедиться в правильности именования моего класса? 

<div class="chat-offer">

  <div class="img chat-offer__img">
    <picture class="chat-box-b default-box-b">
      <img src="${properties.chatMobileImageBoxA}" alt="${properties.chatBackgroundImageAltText}"              class="offers-img-responsive">
    </picture>
    <picture class="chat-logout default-logout">
      <source media="(min-width: 320px) and (max-width: 767px)"               srcset="${properties.chatMobileImageBoxA}">
      <source media="(min-width: 768px) and (max-width: 1023px)" srcset="${properties.chatMobileImageBoxA}">
      <img src="${properties.chatDesktopImageBoxA}" alt="${properties.chatBackgroundImageAltText}" class="offers-img-responsive">
    </picture>
  </div>

  <div class="chat-offer__txt">
    <h1 class="chat-offer__txt--heading">${properties.offerTitle}</h1>
    <p class="chat-offer__txt--subheading">${properties.offerSubTitle}</p>
    <div class="chat-offer__btn">
      <a href="${chatOfferModel.loginCTALink}" target="${chatOfferModel.loginNewWindow}" class="chat-offer--cta">${properties.loginCTAText}</a>
    </div>
  </div>

</div>

Ответы [ 2 ]

2 голосов
/ 07 февраля 2020

Называние выглядит в основном правильно. Я бы сделал следующие предложения:

  1. Я бы изменил chat-offer__txt на chat-offer__txt-wrapper. Элемент, к которому вы его присоединяете, на самом деле не имеет ничего общего с двумя элементами (h1 и p), к которым вы добавляете измененные версии этого правила.
  2. Лично, когда я вижу Класс модификатора для элемента Я также ожидал бы увидеть неизмененный класс (элемент или блок) в том же элементе. Немодифицированный класс устанавливает значения по умолчанию, которые модификатор переопределяет. Так, например, h1.chat-offer__txt.chat-offer__txt--heading.
  3. У вас довольно много не связанных между собой классов "generi c", смешанных с вашим BEM, например, img, chat-box-b, default-box-b, что делает сложнее рассуждать о стиле и о том, как все эти правила будут взаимодействовать. Если вы используете SASS, возможно, стоит настроить миксины для включения стилей, которые можно многократно использовать в нескольких компонентах, что сделает вашу БЭМ проще и проще для рассуждений.
0 голосов
/ 17 апреля 2020

У меня есть несколько предложений, основанных на вашей реализации:

  1. Взгляните на следующую настройку 
<div class="chat-offer">
  <div class="img chat-offer__img">
    [..]
  </div>
</div>

Второй элемент div является элементом img блока chat-offer, но это не изображение. Лучше переименовать это в chat-offer__image-container, потому что это то, что делает .. Это контейнер изображения. Таким образом, вы можете использовать chat-offer__image вместо offers-img-responsive. Таким образом, новая реализация будет: 

<div class="chat-offer">
  <div class="chat-offer__image-container">
    [..]
    <img class="chat-offer__image />
  </div>
</div>
То же самое относится и к этому блоку: 
<div class="chat-offer__txt">
  <h1 class="chat-offer__txt--heading">${properties.offerTitle}</h1>
  <p class="chat-offer__txt--subheading">${properties.offerSubTitle}</p>
  [..]
</div>

chat-offer__txt подразумевает, что это элемент txt блока chat-offer, но это не так. Это текстовая оболочка, поэтому измените ее на chat-offer__text-wrapper с chat-offer__title и chat-offer__subtitle (или заголовком и подзаголовком), сделав так: 

<div class="chat-offer__text-wrapper">
  <h1 class="chat-offer__title">${properties.offerTitle}</h1>
  <p class="chat-offer__subtitle">${properties.offerSubTitle}</p>
  [..]
</div>
Эта часть также может быть немного улучшена: 
<div class="chat-offer__btn">
  <a href="${chatOfferModel.loginCTALink}" 
    target="${chatOfferModel.loginNewWindow}" 
    class="chat-offer--cta">
    ${properties.loginCTAText}
  </a>
</div>

Кнопка является частью <a>[..]</a>, поэтому назовите ее так: chat-offer__button, в настоящее время это --cta модификатор в блоке chat-offer, так что вы в основном говорите: это блок предложения чата, но это его CTA-версия, но это CTA-версия кнопки в блоке чата, что делает его chat-offer__button chat-offer__button--cta. Важно никогда не использовать модификатор сам по себе, потому что ваш css будет выглядеть примерно так: 

.chat-offer__button {
  width: 300px;
  height: 20px;
  background-color: red;
}

.chat-offer__button--cta {
  background-color: blue;
}

Если вы используете только класс модификатора, он не будет использовать ширину и высоту кнопка.

Вы идете в правильном направлении, важно задавать вопросы, так что продолжайте!

...