Как правильно добавить в данном примере сайдбар и main по бэм?

Question

[Genri_Rus]

Пример страницы:

Галерея с фильтрацией

Шапка и футер также будут использоваться. Возможен ли такой вариант?

<header class="header"></header>
<div class="page-wrapper">
  <div class="d-flex container-fluid">
    <aside class="sidebar">
      // класс filter или filters?
      <div class="filter">
        <div class="filter__item"></div>
      </div>
    </aside>
    <main class="main">
      // тут должна быть галерея (возможно такой дизайн в будущем будет поторяться) или миниатюры? 
      // Возможно использовать обычную сетку grid или лучше на js реализовать?
      <div class="gallery">
        <a href="#" class="gallery__item">
          <img src="" class="gallery__image">
          <div class="gallery__thumbnail-info">
            <div class="gallery__thumbnail-group">
              <div class="gallery__thumbnail-icon"></div>
              <div class="gallery__thumbnail-icon"></div>
            </div>
            <div class="gallery__thumbnail-group">
              <div class="gallery__thumbnail-name"></div>
            </div>
          </div>
      </a>
  </div>
  </main>
</div>
</div>
<footer class="footer"></footer>

Comments

[Ankhena]

Как правильно по бэм назвать сайдбар и main?

Так и назвать: sidebar или aside и main или main-block

// класс filter или filters?

По-русски это фильтр или фильтры? А по-английски?

Кстати, фильтр, это не очень aside.

[Genri_Rus]

Ankhena, доброго времени суток)
А вот как вы бы сделали?

По-русски это фильтр или фильтры? А по-английски?

Ну по-английски filters)
А если на какой-то странице будет один фильтр?

Кстати, фильтр, это не очень aside.

Получается без aside?

В целом правильно у меня сделано?)

[Ankhena]

Genri_Rus,

В целом правильно у меня сделано?)

Заморачиваться с БЭМ, но забить на семантику? Сложно оценивать это с точки зрения правильности.

Зачем нужен БЭМ или любая другая методология? Чтобы было быстро понятно и удобно.

[Genri_Rus]

Ankhena, а что неправильно в семантике?
Вы имеете ввиду про тег aside?

[Ankhena]

Genri_Rus, спека

[Genri_Rus]

Ankhena, а могли бы показать ваше ведение на этот счет?
P.S. Мог бы отметить ваше решение.

[Ankhena]

Genri_Rus, по вашему скрину мало что можно сказать.
Но начните подбирать теги по смыслу. Можно называть вслух. Например: это список фото. Используем ul.
Обертка фотки или картинка + её описание? В первом случае берем div, во втором figure и figcaption

https://doka.guide/html/

В своё время, я просто примерно раз в месяц перечитывала справочник тегов и свойств. Помню - не помню. И помню ли разные нюансы.

[Genri_Rus]

Ankhena, мне нужно что-то похожее как тут: ссылка
Мне главное понять структуру, допустим есть сайдбар и контент.
Можно же wrapper перед сайдбаром и main добавлять?

[Ankhena]

Genri_Rus,

Можно же wrapper перед сайдбаром и main добавлять?

Можно же div перед aside и main добавлять?
Правила вложенности тегов регламентируются спекой.
div используется там, где нет подходящих по смыслу тегов. Я выше дала ссылку на спеку, где это написано.

[Genri_Rus]

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

[Ankhena]

Genri_Rus, еще раз: я без понятия кто такие у вас gallery__thumbnail-icon. Почему у картинки две иконки? Почему иконки это дивы? Почему они называются превьюшками?
На фрипике это кнопки. Ну а кнопки это теги button.
Если это какие-то метки для пользователя, то должен быть текст. Сами иконки фоном или псевдиками.
Если это кнопки, то текст тоже должен быть. Хотя бы в aria-label.

Где конец у ссылки неизвестно.

Зачем заголовку обертка? Заголовки это теги h1-h6. Если это подпись к картинке, то это figcaption.
Опять же gallery__thumbnail-name как-то связан с теми двумя иконками? Иконки две, но заголовок у них один?

Про список уже сказала.

Про то что фильтр не aside тоже сказала. Тут фильтр скорее выступает в роли навигации и, вероятно, формирует урл (так обычно бывает). Поэтому нельзя сказать, что он не имеет отношения к происходящему.

Выше я написала тактику: называйте вещи своими именами.

Чтобы писать разметку нужен конкретный макет из которого можно определить что чем является. У вас он есть, а у меня нет. На основании вашего кода я не могу сделать однозначного вывода, что было в макете. Только весьма приблизительно.

[Genri_Rus]

Ankhena, при наведении на картинку должны появиться иконки в виде кнопок как на фрипике.

Про то что фильтр не aside тоже сказала. Тут фильтр скорее выступает в роли навигации и, вероятно, формирует урл (так обычно бывает). Поэтому нельзя сказать, что он не имеет отношения к происходящему.

Там будет ajax фильтрация с чекбоксами в виде кнопок.

Чтобы писать разметку нужен конкретный макет из которого можно определить что чем является.

Просто думал, что вы примерно покажите структуру без фильтра с сайдбаром и с одной картинкой при наведении на нее)

[Ankhena]

Genri_Rus,

при наведении на картинку должны появиться иконки как на фрипике.

На фрипике это кнопки, а не иконки.

Ну пусть так

<ul class="gallery">
  <li class="gallery__item picture">
    <a class="picture__link">
      <img class="picture__img" src="" alt="">
    </a>
    <div class="picture__more-info">
      <h2 class="picture__title">Название фото</h2>
      <p class="picture__description">Текст</p>
      <ul class="picture__action-list">
        <li>
          <button class="picture__action">
            <span class="visually-hidden">В избранное</span>
          </button>
        </li>
        <li>
          <button class="picture__action">
            <span class="visually-hidden">Сохранить</span>
          </button>
        </li>
      </ul>
    </div>    
  </li>
</ul>

Можно раздробить еще на блоки. Или наоборот, не выделять picture в блок.

[Genri_Rus]

Ankhena, спасибо большое, очень хороший пример!
А вот с фильтрами как быть?
Там тоже ul нужно использовать?
И там кнопки в виде чекбоксов (кнопки как на фрипике), может есть готовые примеры компонентов с фильтрацией по бэм?

[Ankhena]

Genri_Rus,

А вот с фильтрами как быть?

Ну так и быть
Фильтр - filters или form form--filters
Филдсет - form__group, form__fieldset, form__item.
legend - __title, __legend
список параметров внутри филдсета - __list
один параметр __characteristic, __parameter
инпут - __input, __field
label - __label

Короче, словарь в руки и вперед.

[Genri_Rus]

Ankhena, доброго времени суток.
Так правильно?

<aside class="sidebar">
  // класс filter или filters?
  <div class="filters sidebar__filters">
    <form action="" class="filters__form">
      <div class="filters__item">
        <div class="filters__title">Заголовок фильтра</div>
        <ul class="filters__list">
          <li class="filters__item-field">
            <input type="checkbox" name="name-filter" class="filters__checkbox" id="name-filter">
            <label for="name-filter" class="filters__btn">Векторы</label>
          </li>
        </ul>
      </div>
    </form>
  </div>
</aside>

[Ankhena]

Genri_Rus, нет

[Genri_Rus]

Ankhena, а как будет правильнее с вашим примером?

[Ankhena]

Genri_Rus, правильнее использовать теги по назначению.
Я немножко устала писать одно и тоже. Уже всё расписала, теги назвала.
Но если вам так неудобно, то пишите дивами и плевать там на всех.

[Genri_Rus]

Ankhena, извиняюсь, про теги забыл.
Изменил дивы на вашу рекомендацию:

<form action="" class="filters__form">
  <fieldset class="filters__item">
    <legend class="filters__title">Заголовок фильтра</legend>
    <ul class="filters__list">
      <li class="filters__item-field">
        <input type="checkbox" name="name-filter" class="filters__checkbox" id="name-filter">
        <label for="name-filter" class="filters__btn">Векторы</label>
      </li>
    </ul>
  </fieldset>
</form>

[Ankhena]

Genri_Rus, осталось вытащить из aside

[Genri_Rus]

Ankhena,

осталось вытащить из aside

А есть статья на эту тему?
Просто на многих сайтах используют фильтрацию внутри aside.
Или aside больше относится к статьям?

Можно раздробить еще на блоки. Или наоборот, не выделять picture в блок.

Т.е. можно просто класс gallery использовать?

[Ankhena]

Genri_Rus,

Просто на многих сайтах используют фильтрацию внутри aside.

Спека разрешает. Даже для nav.
Нравится - оставьте.

А есть статья на эту тему?

Полно. Гуглите.

[Genri_Rus]

Ankhena, понял, спасибо вам большое!

Спека разрешает. Даже для nav.

Вы предлагаете сделать внутри aside фильтр в виде nav?

[Ankhena]

Genri_Rus, нет, такого я не предлагаю

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

У тебя в gallery от бэм только начало. Потом обычное употребление классов. Перечитай концепцию.

[Genri_Rus]

Александр Васильев, доброго времени суток.
А могли бы показать свой вариант?
P.S. Мог бы отметить ваше решение.

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

Genri_Rus, нет.
Объясни логику наименования классов

[Genri_Rus]

Александр Васильев, а почему?
На скриншоте есть пример.

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

Genri_Rus, что «почему»?
Логику наименования классов внутри «gallery”. Что там блок, что элемент, а что модификатор.