Как сделать по БЭМ?

Question

[Мухаммад Магомедов]

Добрый день!

Подскажите пожалуйста, как правильно назвать классы по правилам БЭМ. Скриншот:



Например:

<section class="portfolio">
  <div class="container">
    <h2 class="portfolio__title">Портфолио</h2>
    <div class="[...]">
      <div class="[...]">
        <a href="/" class="[...]">
          <img class="[...]" src="/" alt="">
        </a>
      </div>
      <div class="[...]">
        <a href="/" class="[...]">
          <img class="[...]" src="/" alt="">
        </a>
      </div>
    </div>
  </div>
</section>

Заранее спасибо!

Comments

[uRoot]

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

Answer 1

[alex]

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

контейнер
<div class="container"></div>

тайтл
<div class="title"></div>

превью работы

<div class="project-preview">
    <div class="project-preview__image"></div>
  </div>

сама секция портфолио

<div class="portfolio-section">
    <div class="portfolio-section__inner">
      <div class="portfolio-section__title"></div>
      <div class="portfolio-section__grid">
        <div class="portfolio-section__preview"></div>
        <div class="portfolio-section__preview"></div>
        <div class="portfolio-section__preview"></div>
        ...
      </div>
    </div>
  </div>

далее все это соединям вместе миксуя блоки на одной dom-ноде

<div class="portfolio-section">
    <div class="portfolio-section__inner container">
      <div class="portfolio-section__title title">Портфолио</div>
      <div class="portfolio-section__grid">
        <div class="portfolio-section__preview project-preview">
          <div class="project-preview__image"></div>
        </div>
        <div class="portfolio-section__preview project-preview">
          <div class="project-preview__image"></div>
        </div>
        <div class="portfolio-section__preview project-preview">
          <div class="project-preview__image"></div>
        </div>
        <div class="portfolio-section__preview project-preview">
          <div class="project-preview__image"></div>
        </div>
      </div>
    </div>
  </div>

Comments

[Виталий Першин]

portfolio-section вполне можно сократить до portfolio, а portfolio-section__inner заменить либо дополнить миксом portfolio__container

Answer 2

[Underdoggit]

<section class="portfolio-section">
  <div class="container">
    <h2 class="portfolio-title">Портфолио</h2>
    <div class="portfolio-items">
      <div class="portfolio-items__item">
        <a href="/" class="portfolio-items__link">
          <img class="portfolio-items__image" src="/" alt="">
        </a>
      </div>
    </div>
  </div>
</section>

Секцию в БЭМ блок вы не включаете, называете её как угодно по смыслу. БЭМ Блоком у вас будет portfolio__items, который включает в себя сколько угодно item.

Comments

[alex]

Блоком у вас будет portfolio__items

это элемент

[Underdoggit]

Alex, Окей, вы в курсе что любой элемент может быть БЭМ блоком? Если ему допустим нужно будет продублировать весь список items в другую секцию, ему всю секцию копировать вместе с h2? Я так понимаю идеалогия БЭМ была не в просто удобном написании классов, а в идеалогии DRY, что бы постоянно не писать код, а возможности дублирования кода в любой из желаемых участков. В его случае это релевантно, и он может добавить блок portfolio__items в любое желаемое место.

[Виталий Першин]

Использование элемента без определения блока, гениально...

[Underdoggit]

Виталий, Сори, мой косяк, заработался. Вот так будет правильно.

[alex]

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

блок portfolio__items в любое желаемое место

не блок, а ЭЛЕМЕНТ

и он может добавить блок portfolio__items в любое желаемое место

НЕ может. элементы не могут существовать вне своих блоков

[Underdoggit]

Alex, Сори, я переделал) Так лучше?)

[alex]

Underdoggit, да

Answer 3

[Андрей]

<section class="section">
	<div class="wrapper section__inner">
		<h2 class="section__title">Портфолио</h2>
		<div class="portfolio section__content">
			<a class="portfolio__item" href="#">
				<img class="portfolio__img" src="/" alt="img">
			</a>
		</div>
	</div>
</section>