Задать вопрос
Пользователь пока ничего не рассказал о себе

Наибольший вклад в теги

Все теги (2)

Лучшие ответы пользователя

Все ответы (4)
  • Как правильно добавить в данном примере сайдбар и main по бэм?

    @came_up
    Твой вариант с точки зрения семантики неверный. Ты в 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";
    }
    Ответ написан
    Комментировать