Это правильный БЭМ?

Question

[Дима Долготер]

как по бэму правильно сверстать? примеры смотрю но не могу применить на свою ситуацию
вот такой макет должен получиться

<section class="container-fluid find_franchise_wrapper">
<div class="container">
	<div class="row find_franchise d-flex justify-content-center">
 <div class="find_franchise__map">  </div>
		<div class="find_franchise__text">
			<h2>Find A Franchise Near You</h2>
			<p>Want to speak to us in person? Enter your zip code to find the nearest franchise.</p>
		</div>
 			<form action="find_franchise__form">
				<input type="text" placeholder="Enter Zip Code" class="find_franchise__input">
				<input type="submit" value="Submit" class="find_franchise__submit">
			</form>
 	</div>
</div>
</section>

Comments

[WapSter]

Иногда можно совмещать, атомарный css с БЭМ, но это не тот случай, и бэма я тут вообще не заметил.

[Дима Долготер]

WapSter, ну так напиши плиз как правильно

[WapSter]

Дима Долготер, зачем мне это делать, все давно уже расписано на бэм инфо

[Дима Долготер]

WapSter, я же сказал что читаю документацию и все логично, но сюда не могу применить

[Ankhena]

Это правильный БЭМ?

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

Обо всем, не только о БЭМ:

0. Используйте в разметке только БЭМ, а классы бутстрапа пишите в CSS как примеси. (row, d-flex, justify-content-center и т.д. это все идет в примеси в CSS)
1. div class="container" - вообще лишняя обертка, его стили нужно примешать к find_franchise
2. <div class="find_franchise__map"> </div> Пустые блоки с большой долей вероятности лишние. Если это ссылка на карту или кнопка ее открывающая, то это другой тег.
3. Форма это блок. Она может самостоятельно перемещаться по сайту и быть переиспользована. Т.е. получится микс из элемента и блока.
4. submit'ы лучше делать button'ами, так проще стилизовать, проще следить за доступностью.
5. Забыли label к инпутам.

[WapSter]

Дима Долготер, Ankhena, тут вообще нет бэма. find_franchise__text это что элемент модификатора, имена разделяются дефисом, а не пробелом. По этому я этого не до верстальщика отправил на БЭМ.инфо, ну или пусть сходит на курсы внимательного чтения.

[Ankhena]

WapSter, точно, черточки не такие.
Смотрела на запись и не могла спросонья въехать, что не нравится

[Дима Долготер]

Ankhena, 5. Забыли label к инпутам.
они обязательны?

[Дима Долготер]

WapSter, разве дефисом не состояния? типа -visited -active?

[WapSter]

Дима Долготер, ещё раз повторю прочти документацию, это блин первый абзац в ней.

[Ankhena]

Дима Долготер,

они обязательны?

Отвечу вопросом на вопрос. Вы доступные интерфейсы делаете или помойки?

[Дима Долготер]

Ankhena, ок, его по дизайну нет. куда его лепить?

[Ankhena]

Дима Долготер, гуглите "visually-hidden" и "доступное скрытие"

Answer 1

[approximate solution]

1. Разметка HTML у вас грязная, и так бутстрап обладает вырвиглазным неймингом на колбасу из названий, и вы туда еще БЭМ залепили.
2. container-fluid find_franchise_wrapper - зачем Вам тут container-fluid, когда для ограничения контента вам хватит просто контейнера, все остальное решается через CSS, не загрязняя разметку.
3. Если уж "гадить в код", то лучше уж в css, используя миксины и вары, чем добавляя justify-content-center в HTML

Ниже пример нейминга в bootstrap + bem
Микс БЭМ и bootstrap-сетки, это читабельно?

Comments

[Дима Долготер]

классы на то и классы чтоб их использовать, но спасибо за замечание про fluid, убрал его

[approximate solution]

Дима Долготер, Слышали про фразу "все хорошее - в меру"?

[Дима Долготер]

approximate solution, да. просто в некоторых случаях надо вводить доп классы, чтоб просто по центру выровнять, а так прописал и все.
Можете помочь плиз с моей проблемкой?
как правильно написать мой блок используя правильный бэм

[approximate solution]

Дима Долготер, Я вам скинул ссылку, плюс у вас есть гугл. Я бы с бутстрапом БЭМ вообще не использовал. Что бы у разработчика который придет после меня, глаза не потекли от говнокода.

Answer 2

[Realetive]

Нет. Писать классы через нижнее подчёркивание — это ещё не БЭМ.
БЭМ отображает структуру компонента (в виде блоков, элементов и их модификаторы).
Судя по скриншоту, структура такая (названия даю приблизительные, как вижу):

- section
  - text
  - search

text состоит из трёх элементов:

- text
  - icon
  - heading
  - subheading

search состоит из

- search
  - input
  - button

Объединяем:

- section
  - text
    - icon
    - heading
    - subheading
  - search
    - input
    - button

Что из этого самостоятельные блоки — зависит от проекта, по этой картинке это не понять. Но предполагаю, что иконка, поле ввода и кнопка — самостоятельные блоки.

block: section
  elem: text
    elem: icon
      block: icon
    elem: heading
    elem: subheading
  elem: search
    elem: input
      block: input
    elem: button
      block: button

«БЭМизируем»:

.section 
  .section__text
    .section__icon
      .icon
    .section__heading
    .section__subheading
  .section__search
    .section__input
      .input 
    .section__button
      .button

Вроде ничего сложного.

Теперь превращаем это в вёрстку (теги, семантика — не имеют отношения к БЭМ, поэтому сначала намеренно всё будет div'ами):

<div class="section">
    <div class="section__text">
        <div class="section__icon">
            <div class="icon"></div>
        </div>
        <div class="section__heading"></div>
        <div class="section__subheading"></div>
    </div>
    <div class="section__search">
        <div class="section__input">
            <div class="input"> </div>
        </div>
        <div class="section__button">
            <div class="button"></div>
        </div>
    </div>
</div>

Добавляем чуть-чуть CSS: https://codepen.io/Realetive/pen/ExKgJqL

Содержимое блока section отцентрировано — добавим вложенный элемент section__content, который будет содержать стили для этого позиционирования (перенесём их из .section{}, оставив только цвет).

section__heading и section__subheading тоже «обернём» в элемент section__headings, чтобы сгруппировать, отделив от section__icon: https://codepen.io/Realetive/pen/mdPrYJb

Можно сделать микс и объединить позиционирующие элементы с вложенными блоками, если хочется немного «сэкономить» на вложенности: section__icon и icon, section__input и input, section__button и button: https://codepen.io/Realetive/pen/KKzgLdq — внешне ничего не изменилось, ни одной строчки в CSS не правилось.

Вот и всё. Всё остальное — теги, семантика добавляются по мере необходимости — как я уже говорил: к БЭМ они не имеют отношения.