Соглашение об именах BEM: я на правильном пути? - PullRequest
0 голосов
/ 08 июля 2019

У меня есть следующий фрагмент html-кода ...

<div class="testimonials testimonials--scale testimonials--increase-shadow">
  <div class="testimonials__image-wrapper">
    <img class="testimonials__image" src="./assets/images/passion/money-box.jpg" alt="money box: for the poor">
  </div>
  <div class="testimonials__edge-touch">
    <h2 class="headline headline--black headline--small headline--margin-bottom-large ">Fourth Created Forth Fill Moving Created Subdue Be</h2>
    <div class="flex flex--align-items-center">
      <img class="flex__margin-right-tiny" src="./assets/images/icon/passion_1.svg" alt="circle target">
      <p class="paragraph paragraph--grey">GOAL: $2500 </p>
      <img class="flex__margin-right-tiny flex__margin-left-auto icon-positioning" src="./assets/images/icon/passion_2.svg" alt="signal sign">
      <p class="paragraph paragraph--grey">RAISED: $1533 </p>
    </div>
    <p><a href="#" class="button button--white button--small button--full-width button--not-rounded">Read More</a></p>
  </div>
</div>

Есть 5 блоков отзывов, flex (display: flex), заголовок (для заголовков), параграф и блок кнопок '.* это хороший код?* что я могу сделать, чтобы сделать его лучше?

1 Ответ

0 голосов
/ 08 июля 2019

Это нормально для большинства случаев, за исключением некоторых частей, таких как testimonials--increase-shadow и testimonials--scale.

Давайте быстро рассмотрим БЭМ;

Блок:

Ссылаясь на официальную документацию, Блок инкапсулирует автономную сущность, которая являетсязначимый сам по себе, в вашем случае testimonials.

Элемент:

И элементы являются частями блока и не имеют самостоятельного значения, в вашем случае testimonials__image-wrapper.

Модификатор:

Флаги на блоках или элементах для изменения внешнего вида, поведения или состояния, в вашем случае headline--black.

Исходя из этого, если вы хотите масштабировать и добавлять тень к своему элементу, вы можете определить его как один вариант (модификатор).Но то, что вы делаете, это скорее атомарный подход - создание вспомогательных классов и добавление их в качестве варианта.

Обоснование:

Даже если testimonials--scale может считаться модификатором, но я полагаю, вы просто добавляете масштаб в свой отзыви это вспомогательный класс.Если вы назовете его так, вы ограничитесь тем, чтобы использовать его только для блока свидетельства, что уменьшает возможность повторного использования.

Если вам нужен вспомогательный класс, просто назовите его глобально, как scale-up.Поскольку вспомогательные классы действительно не считаются модификаторами.Хорошим примером модификатора могут быть heading и heading--second, где заголовок-секунда может иметь меньший шрифт и разную высоту строки и, возможно, другой цвет.Но просто сделать это heading--small-font или heading--green только сделает вашу жизнь сложнее.

Попробуйте преобразовать модификатор в более многократно используемый класс .

Для более подробного прочтения, проверьте это

...