Правильно ли я написал html разметку по БЭМ?

Question

[Schenker]

Правильно ли написано с учетом того, что размещение блоков в css буду делать флексами?

<section class="expertise">
  <div class="container">
    <div class="title">our expertise</div>
    <div class="expertise__content">
      <div class="expertise__content-top">
        <div class="expertise__content-top-item">
          <div class="expertise__item-results">
            <h3 class="expertise__item-title">branding</h3>
            <span class="expertise__item-percent">90%</span>
          </div>
          <div class="expertise__item-results">
            <h3 class="expertise__item-title">design</h3>
            <span class="expertise__item-percent">80%</span>
          </div>
          <div class="expertise__item-results">
            <h3 class="expertise__item-title">development</h3>
            <span class="expertise__item-percent">85%</span>
          </div>

        </div>
        <div class="expertise-item-text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima porro, rem eveniet vero veniam quibusdam
          dolores, nostrum perferendis laborum laudantium pariatur repellat possimus, tempore fugit necessitatibus
          cupiditate obcaecati nisi distinctio.
        </div>

      </div>
      <div class="expertise__content-down">
        <div class="expertise__item">
          <img class="expertise__item-img" src="" alt="">
          <div class="expertise__item-box">
            <div class="expertise__item-title">graphic design</div>
            <div class="expertise__item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quo eos
              dolore ea facere reprehenderit, fugit error consequatur reiciendis cupiditate saepe iste asperiores
              aliquid consectetur quae explicabo beatae magnam praesentium?</div>
          </div>
        </div>
        <div class="expertise__item">
          <img class="expertise__item-img" src="" alt="">
          <div class="expertise__item-box">
            <div class="expertise__item-title">web development</div>
            <div class="expertise__item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quo eos
              dolore ea facere reprehenderit, fugit error consequatur reiciendis cupiditate saepe iste asperiores
              aliquid consectetur quae explicabo beatae magnam praesentium?</div>
          </div>
        </div>
        <div class="expertise__item">
          <img class="expertise__item-img" src="" alt="">
          <div class="expertise__item-box">
            <div class="expertise__item-title">marketing</div>
            <div class="expertise__item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quo eos
              dolore ea facere reprehenderit, fugit error consequatur reiciendis cupiditate saepe iste asperiores
              aliquid consectetur quae explicabo beatae magnam praesentium?</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>

Comments

[Ankhena]

Проверить правильную физическую вложенность классов можно тут https://yoksel.github.io/html-tree/

Но
1. БЭМ не отменяет семантику, а у вас дивянка. И от части тегов можно вообще избавиться.
2. Декоры не вставляют тегами img или, если по-другому никак, скрывают от скринридеров.
3. Классы типа top, down, red, blue плохо переиспользуются и сильно хромают при адаптиве, смене тем и т.д.
4. Можно избавиться от значительной части слов в классах. Например, использовать item только там где сам item, в дочерних это слово убрать. Если оно оттуда не убирается логически, значит, item это блок, а не элемент и вложенные элементы это его элементы, а не родительского.
expertise__item-text -> expertise__text

[Schenker]

Ankhena, у меня вопросы:
1)что вы имеете ввиду под декорами?
2) Как тогда назвать элементы вместо top и down ?

[Ankhena]

Schenker,
1. Декор = декоративный элемент
2. По смыслу и сути происходящего

[Schenker]

Ankhena, а что именно в макете является декором? И как правильно сделать?

[Schenker]

Ankhena, а что именно в макете является декором? И как правильно сделать?

[Schenker]

Ankhena, я попробовал переделать, что скажете? https://jsfiddle.net/p7sq4ev6/1/

[Ankhena]

Schenker, по БЭМу лучше. Остальное без изменений.

а что именно в макете является декором?

Вы на полном серьезе не видите что украшения, а что контент?
https://htmlacademy.ru/blog/html/content-or-decor-img

Украшения отправляются в стили: фоны, псевдо и т.д.

[Schenker]

Ankhena, я понимаю, что фон, псевдо и прочее надо писать через стили, но я не понимаю какие картинки нужно делать в том, что у меня представлено через декор? Вы имеете ввиду нижнюю часть с монитором и рупором? Если да, то они ведь имеет смысловую нагрузку

[Ankhena]

Schenker,

Если да, то они ведь имеет смысловую нагрузку

Какую ещё смысловую нагрузку они несут? Веб деволопмент, по-вашему, так выглядит? Квадратик на ножке? И если его заменить на другую иконку или вообще убрать, то смысл потеряется?

Answer 1

[Александр Васильев]

Сложная попытка описать все-в-одном. Попробуй начать это делать сразу от body (сарказм).
На твоем скрине 4 разных блока - вот и описывай их отдельно.
Перечитай еще раз про элементы и особенно про назначение модификаторов.
Модификаторы не должны пытаться заменить элементы, но представляют собой вариацию элемента.
В модификаторах пиши нижние подчеркивания вместо дефисов - надо думать и о других людях, классы с дефисами не удобно копипастить.

Comments

[Schenker]

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

[Александр Васильев]

Schenker, в этом случае надо обратиться к первоисточнику

[Schenker]

Александр Васильев, я попробовал переделать, что скажете? https://jsfiddle.net/p7sq4ev6/1/

Answer 2

[Сергей delphinpro]

Слишком большой блок
Там несколько вложенных. Их стоит сделать отдельными бэм-блоками
expertise-item-text - этот класс вообще выбивается из блока

Comments

[Schenker]

expertise-item-text по запаре не так проименовал, хотел expertise__item-text

[Schenker]

я попробовал переделать, что скажете? https://jsfiddle.net/p7sq4ev6/1/

[Сергей delphinpro]

Schenker, Лучше.

Я бы сделал как-то так

<section class="expertise">
  <div class="expertise__container container">
    <div class="expertise__title title">our expertise</div>
    <div class="expertise__item skills">
      <div class="skill">
        <div class="skill__value">
          <h3 class="skill__title">branding</h3>
          <span class="skill__percent">90%</span>
        </div>
      </div>
      <div class="skill">
        <div class="skill__value">
          <h3 class="skill__title">design</h3>
          <span class="skill__percent">80%</span>
        </div>
      </div>
      <div class="skill">
        <div class="skill__value">
          <h3 class="skill__title">development</h3>
          <span class="skill__percent">85%</span>
        </div>
      </div>
    </div>
    <div class="expertise__item expertise__text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima porro, rem eveniet vero veniam quibusdam
      dolores, nostrum perferendis laborum laudantium pariatur repellat possimus, tempore fugit necessitatibus
      cupiditate obcaecati nisi distinctio.
    </div>
    <div class="expertise__item card">
      <img class="card__icon" src="" alt="">
      <div class="card__box">
        <div class="card__title">graphic design</div>
        <div class="card__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quo eos
          dolore ea facere reprehenderit, fugit error consequatur reiciendis cupiditate saepe iste asperiores
          aliquid consectetur quae explicabo beatae magnam praesentium?
        </div>
      </div>
    </div>
    <div class="expertise__item card">
      <img class="card__icon" src="" alt="">
      <div class="card__box">
        <div class="card__title">web development</div>
        <div class="card__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quo eos
          dolore ea facere reprehenderit, fugit error consequatur reiciendis cupiditate saepe iste asperiores
          aliquid consectetur quae explicabo beatae magnam praesentium?
        </div>
      </div>
    </div>
    <div class="expertise__item card">
      <img class="card__icon" src="" alt="">
      <div class="card__box">
        <div class="card__title">marketing</div>
        <div class="card__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quo eos
          dolore ea facere reprehenderit, fugit error consequatur reiciendis cupiditate saepe iste asperiores
          aliquid consectetur quae explicabo beatae magnam praesentium?
        </div>
      </div>
    </div>
  </div>
</section>

[Schenker]

Сергей delphinpro, спасибо, а что вы скажете по поводу контентных и декоративных изображений? Мне просто человек выше написал про это, хотя я понимаю, что фоны, псевдо и типа того надо писать через стили.

Еще вопрос - я в блоке expertise для реализации нижней части с GRAPHIC DESIGN, WEB DEVELOPMENT и MARKETING я прописал отдельный блок tools, так дозволительно делать? Или это крайность, к которой лучше не прибегать?

[Сергей delphinpro]

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

Это нормально.

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

а что вы скажете по поводу контентных и декоративных изображений?

В целом она правильно написала. Хотя я так дотошно к этому не отношусь. Иконки вставляю тегами img либо inline svg. Менять проще при необходимости. Однако для img в таком случае лучше все-таки указать атрибут role="presentation".