SpiderPigAndCat
@SpiderPigAndCat
занимаюсь салообразованием

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

как по бэму правильно сверстать? примеры смотрю но не могу применить на свою ситуацию
вот такой макет должен получиться b5b77e2aa0.jpg
<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>
  • Вопрос задан
  • 144 просмотра
Пригласить эксперта
Ответы на вопрос 2
approximate_solution
@approximate_solution
JS Developer. Angular\React\Vue\Ember
1. Разметка HTML у вас грязная, и так бутстрап обладает вырвиглазным неймингом на колбасу из названий, и вы туда еще БЭМ залепили.
2. container-fluid find_franchise_wrapper - зачем Вам тут container-fluid, когда для ограничения контента вам хватит просто контейнера, все остальное решается через CSS, не загрязняя разметку.
3. Если уж "гадить в код", то лучше уж в css, используя миксины и вары, чем добавляя justify-content-center в HTML

Ниже пример нейминга в bootstrap + bem
Микс БЭМ и bootstrap-сетки, это читабельно?
Ответ написан
Realetive
@Realetive
MODX Ambassador России, самозванный БЭМ-евангелист
Нет. Писать классы через нижнее подчёркивание — это ещё не БЭМ.
БЭМ отображает структуру компонента (в виде блоков, элементов и их модификаторы).
Судя по скриншоту, структура такая (названия даю приблизительные, как вижу):
- 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 не правилось.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы