Как правильно добавить в данном примере сайдбар и main по бэм?
Пример страницы:
Галерея с фильтрацией
Шапка и футер также будут использоваться. Возможен ли такой вариант?
<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> |
<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>
Дополнительно:
Как правильно по бэм назвать сайдбар и main?
Так и назвать: sidebar или aside и main или main-block
// класс filter или filters?
По-русски это фильтр или фильтры? А по-английски?
Кстати, фильтр, это не очень aside.
А вот как вы бы сделали?
По-русски это фильтр или фильтры? А по-английски?
Ну по-английски filters)
А если на какой-то странице будет один фильтр?
Кстати, фильтр, это не очень aside.
Получается без aside?
В целом правильно у меня сделано?)
В целом правильно у меня сделано?)
Заморачиваться с БЭМ, но забить на семантику? Сложно оценивать это с точки зрения правильности.
Зачем нужен БЭМ или любая другая методология? Чтобы было быстро понятно и удобно.
Вы имеете ввиду про тег aside?
P.S. Мог бы отметить ваше решение.
Но начните подбирать теги по смыслу. Можно называть вслух. Например: это список фото. Используем ul.
Обертка фотки или картинка + её описание? В первом случае берем div, во втором figure и figcaption
https://doka.guide/html/
В своё время, я просто примерно раз в месяц перечитывала справочник тегов и свойств. Помню - не помню. И помню ли разные нюансы.
Мне главное понять структуру, допустим есть сайдбар и контент.
Можно же wrapper перед сайдбаром и main добавлять?
Можно же wrapper перед сайдбаром и main добавлять?
Можно же div перед aside и main добавлять?
Правила вложенности тегов регламентируются спекой.
div используется там, где нет подходящих по смыслу тегов. Я выше дала ссылку на спеку, где это написано.
Возможно у вас все будет гораздо проще чем у меня))
На фрипике это кнопки. Ну а кнопки это теги button.
Если это какие-то метки для пользователя, то должен быть текст. Сами иконки фоном или псевдиками.
Если это кнопки, то текст тоже должен быть. Хотя бы в aria-label.
Где конец у ссылки неизвестно.
Зачем заголовку обертка? Заголовки это теги h1-h6. Если это подпись к картинке, то это figcaption.
Опять же gallery__thumbnail-name как-то связан с теми двумя иконками? Иконки две, но заголовок у них один?
Про список уже сказала.
Про то что фильтр не aside тоже сказала. Тут фильтр скорее выступает в роли навигации и, вероятно, формирует урл (так обычно бывает). Поэтому нельзя сказать, что он не имеет отношения к происходящему.
Выше я написала тактику: называйте вещи своими именами.
Чтобы писать разметку нужен конкретный макет из которого можно определить что чем является. У вас он есть, а у меня нет. На основании вашего кода я не могу сделать однозначного вывода, что было в макете. Только весьма приблизительно.
Про то что фильтр не aside тоже сказала. Тут фильтр скорее выступает в роли навигации и, вероятно, формирует урл (так обычно бывает). Поэтому нельзя сказать, что он не имеет отношения к происходящему.
Там будет ajax фильтрация с чекбоксами в виде кнопок.
Чтобы писать разметку нужен конкретный макет из которого можно определить что чем является.
Просто думал, что вы примерно покажите структуру без фильтра с сайдбаром и с одной картинкой при наведении на нее)
при наведении на картинку должны появиться иконки как на фрипике.
На фрипике это кнопки, а не иконки.
Ну пусть так
<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> |
<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 в блок.
А вот с фильтрами как быть?
Там тоже ul нужно использовать?
И там кнопки в виде чекбоксов (кнопки как на фрипике), может есть готовые примеры компонентов с фильтрацией по бэм?
А вот с фильтрами как быть?
Ну так и быть
Фильтр - filters или form form--filters
Филдсет - form__group, form__fieldset, form__item.
legend - __title, __legend
список параметров внутри филдсета - __list
один параметр __characteristic, __parameter
инпут - __input, __field
label - __label
Короче, словарь в руки и вперед.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для добавления сайдбара и основного контента (main) по методологии БЭМ (Блок-Элемент-Модификатор) в HTML и CSS, вам следует следовать определенным шаблонам и правилам.
Прежде всего, создайте блоки для сайдбара и основного контента. Назовем их sidebar и main соответственно.
HTML:
<div class="sidebar"> <div class="sidebar__item">Item 1</div> <div class="sidebar__item">Item 2</div> </div> <div class="main"> <div class="main__content">Main Content</div> </div><div class="sidebar"> <div class="sidebar__item">Item 1</div> <div class="sidebar__item">Item 2</div> </div> <div class="main"> <div class="main__content">Main Content</div> </div>
CSS:
.sidebar { width: 25%; float: left; } .main { width: 75%; float: right; } .sidebar__item { padding: 10px; background-color: #f2f2f2; } .main__content { padding: 20px; }
В данном примере мы создали два блока - sidebar и main, каждый из которых имеет свои элементы. Sidebar занимает 25% ширины экрана и выравнивается слева, в то время как main занимает 75% ширины и выравнивается справа.
Элементы внутри сайдбара и основного контента стилизованы соответственно через элементы блоков (sidebar__item и main__content).
Помните, что важно следовать конвенциям БЭМ и давать понятные имена классам, чтобы ваш код был читаемым и поддерживаемым.