M
M
MyQuestion2021-05-10 22:04:11
BEM
MyQuestion, 2021-05-10 22:04:11

BEM: Can parent block elements be child block elements?

Let's say we have a form:

<form class="filter-form" action="">
    <fieldset class="filter-form__item sort">
      <legend class="filter-form__title">
        Сортировка:
      </legend>
      <div class="filter-form__field filter-form__field--arr-down">
        <select class="sort__select" name="sort">
          <option value="">some text</option>
          <option value="">some text</option>
          <option value="">some text</option>
          <option value=""> some text</option>
        </select>
        <!-- <i class=""></i> -->
      </div>
    </fieldset>
    <fieldset class="filter-form__item price-range">
      <legend class="filter-form__title">
        Цена:
        <span class="price-range__label">
          <output class="price-range__lower-cost" name="lower-cost">500 руб.</output> –
          <output class="price-range__upper-cost" name="upper-cost">1000 руб.</output>
        </span>
      </legend>
      <div class="filter-form__field price-range__slider">
      </div>
    </fieldset>
  </form>

For filter-form__item , I set the outer geometry, within the form.
For filter-form__field , I set a common background for all similar ones.
For filter-form__title , the title values ​​in all form blocks.

I understand that the nesting of a BEM tree works differently and does not depend on the nesting of blocks. But here, except for item, the rest of the listed blocks somehow stand out unpleasantly. It's like the logic is broken.
Then, maybe it would be more correct to name such blocks that I will reuse as field-title , field-wrapper ? It's just that all their indents are the same, the rules are the same, and no matter how you twist it, it's an element of some block...

Is it normal to write BEM like that?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question