Как правильно назвать сайдбар и основную часть страницы с учетом методологии БЭМ?

Как лучше всего организовать разметку для страницы, которая имеет шапку, содержимое и футер, включая возможность добавления галереи или миниатюр в основной области, и использования сетки grid или JS для их реализации? Также есть вопрос по поводу использования класса "filter" или "filters" для боковой панели.
  • 4 апреля 2024 г. 16:49
Ответы на вопрос 2
1. С учетом методологии БЭМ, сайдбар можно назвать, например, "sidebar", а основную часть страницы - "content".

2. Для организации разметки страницы с шапкой, содержимым, футером и возможностью добавления галереи или миниатюр в основной области, можно использовать следующую структуру:

```html
<div class="header">
    <!-- Шапка -->
</div>
<div class="content">
    <div class="gallery">
        <!-- Галерея или миниатюры -->
    </div>
</div>
<div class="footer">
    <!-- Футер -->
</div>
```

Для использования сетки grid или JS для реализации галереи или миниатюр в основной области, можно создать дополнительные классы или блоки внутри "content" и стилизовать их соответствующим образом.

3. По поводу класса "filter" или "filters" для боковой панели, рекомендуется использовать класс "filters", так как он лучше отражает множественный характер функционала панели (фильтры), в отличие от класса "filter", который может быть воспринят как отдельное действие или элемент.
Твой вариант с точки зрения семантики неверный. Ты в header вложил aside и main, а также page__wrapper. Тег header служит для отделения вводного содержимого страницы или блока, которое располагается вверху. footer, соответственно, для отделения того, что располагается внизу. А тег main отвечает за основной контент страницы. А page__wrapper вообще обертка страницы, она, по идее, должна быть выше всех. Однако в данном случае она тебе не нужна. То есть изначально правильнее будет написать так: 

<header class="header">
    <!-- Шапка -->
</header>
<main class="main">
    <!-- Основной контент -->
</main>
<footer class="footer">
    <!-- Подвал -->
</footer>


Если сильно нужна обертка того же header, то пишешь вот так:

<header class="header">
   <div class="header__inner">
       
   </div>
</header>


Опираясь на свой опыт, мне больше нравится использовать вариант с __inner в данной ситуации, чем с __wrapper. Хотя иногда нужно выбирать другой вариант, потому что wrapper - внешняя обертка, а inner - внутренняя, зависит от задачи. В общем, такие контейнера обычно служат для выравнивания, то есть margin: 0 auto; то есть центрировать и далее задать ширину фиксированную. Кто-то и без margin работает, если ширина большая, достаточно задать padding. родительскому контейнеру, то есть самому header.

Продолжая отвечать на твой вопрос - далее берем aside, который обычно используется для боковой колонки. Никто не мешает назвать их фильтрами, это нормально, хотя кто-то спорит, что нужен div. Также, ты почему-то список фотографий сделал div. В общем, вот два возможных варианта, хотя их больше. На твоей схеме у тебя нет ни header, ни footer на странице. Поэтому предпочтительнее из первого варианта удалить их и его использовать.

<!-- Вариант 1 -->

<header class="header"></header>
<div class="gallery">
    <aside class="gallery__filters filters-gallery"></aside>
    <main class="gallery__results results-gallery">
        <ul class="results-gallery__list">
            <li class="results-gallery__item">
                <a class="results-gallery__link" href="#">

                </a>
            </li>
        </ul>
    </main>
</div>
<footer class="footer"></footer>

.gallery {
    display: grid;
    grid-template-columns: 290px 1fr;
    column-gap: 40px;
}

<!-- Вариант 2 -->

<div class="container">
    <header class="header"></header>
    <aside class="filters"></aside>
    <main class="results">
        <ul class="results__list">
            <li class="results__item picture">
                <a class="results__link" href="#">

                </a>
            </li>
        </ul>
    </main>
    <footer class="footer"></footer>
</div>

.container {
    display: grid;
    grid-template-areas:
    "header header"
    "aside main"
    "footer footer";
}
Похожие вопросы