@dilyaraaf

Изучила принцип верстки БЭМ, не уверенна что правильно выполнила?

<body>
    <header class="header">
        <button class="header__btn">Предложить новость</button>
        <div class="header__search">
            <a class="header__search__number" href="tel:+73513651711">8 (3513) 65-17-11</a>
            <img class="header__search__img" src="img/search.svg" alt="">
        </div>
    </header>

    <div class="nav">
        <ul class="nav__items">
            <li class="nav__items__item"><a href="">Новости</a></li>
            <li class="nav__items__item"><a href="">Телепроекты</a></li>
            <li class="nav__items__item"><a href="">Реклама</a></li>
            <li class="nav__items__item"><select  name="nav__items__item">
                <option value="" class="nav__items__item__select">Онлайн</option>
                <option value="1" class="nav__items__item__select">new</option>
                <option value="2" class="nav__items__item__select">new</option>
            </select></li>
            <li class="nav__items__item"><a href="">Программа передач</a></li>
            <li class="nav__items__item"><select  name="nav__items__item">
                <option value="" class="nav__items__item__select">Ещё</option>
                <option value="1" class="nav__items__item__select">new</option>
                <option value="2" class="nav__items__item__select">new</option>
            </select></li>
        </ul>

        <ul class="nav__contacts">
            <p class="nav__contacts__contact">Подписывайтесь на нас:</p>
            <li class="nav__contacts__contact"><img src="img/Facebook - Negative.png" alt=""></li>
            <li class="nav__contacts__contact"><img src="img/вк.png" alt=""></li>
            <li class="nav__contacts__contact"><img src="img/однокласники.png" alt=""></li>
            <li class="nav__contacts__contact"><img src="img/inst.svg" alt=""></li>
            <li class="nav__contacts__contact"><img src="img/YouTube - Negative.png" alt=""></li>
        </ul>
    </div>
</body>
  • Вопрос задан
  • 105 просмотров
Пригласить эксперта
Ответы на вопрос 2
delphinpro
@delphinpro
frontend developer
Кнопка - это отдельный блок
Поиск - блок

<header class="header">
    <div class="header__btn">
        <button class="btn">Предложить новость</button>
    </div>
    <div class="header__search search">
        <a class="search__number" href="tel:+73513651711">8 (3513) 65-17-11</a>
        <img class="search__img" src="img/search.svg" alt="">
    </div>
</header>


В навигации то же самое
Кроме того внутри UL могут быть только LI
OPTION не стилизуются, им не нужен класс

<div class="nav">
    <ul class="nav__menu menu">
        <li class="menu__item"><a href="">Новости</a></li>
        <li class="menu__item"><a href="">Телепроекты</a></li>
        <li class="menu__item"><a href="">Реклама</a></li>
        <li class="menu__item">
            <select name="">
                <option value="">Онлайн</option>
                <option value="1">new</option>
                <option value="2">new</option>
            </select>
        </li>
        <li class="menu__item"><a href="">Программа передач</a></li>
        <li class="menu__item">
            <select name="">
                <option value="">Ещё</option>
                <option value="1">new</option>
                <option value="2">new</option>
            </select>
        </li>
    </ul>

    <div class="nav__contacts contacts"
        <p class="contacts__title">Подписывайтесь на нас:</p>
        <ul class="contacts__list">
            <li class="contacts__item"><img src="img/Facebook - Negative.png" alt=""></li>
            <li class="contacts__item"><img src="img/вк.png" alt=""></li>
            <li class="contacts__item"><img src="img/однокласники.png" alt=""></li>
            <li class="contacts__item"><img src="img/inst.svg" alt=""></li>
            <li class="contacts__item"><img src="img/YouTube - Negative.png" alt=""></li>
        </ul>
    </div>
</div>


Подобных имен файлов лучше избегать img/YouTube - Negative.png. Используйте для имен файлов только символы латинского алфавита в нижнем регистре, цифры и символы _-, и ничего другого, включая пробелы.
Ответ написан
Комментировать
MrDecoy
@MrDecoy
Верставший фронтендер
Так как Вы не предоставляете дизайн, то ответ будет основан на опыте и предположениях:
  • <button class="header__btn"> маловероятно что эта кнопка уникальна. То есть тут должен быть базовый класс btn и как микс, если нужно спозиционировать кнопку внутри шапки или задать ей внешнюю геометрию, например margin, header__btn.
  • <a class="header__search__number"> у Вас получается что это элемент элемента, так как 3 слова разделённых двумя нижними подчёркиваниями. Элементов элементов быть не может. Это либо дочерний блок для search(то есть про header__search то же что и в первом пункте), либо имя должно быть что-то типа header__search-number.
  • Аналогично про картинку, nav__items__item и тд.
  • Задавать class для option практически бессмысленно. Так там ещё и батарея слов через 2 нижних подчёркивания стала болье, так ещё и заканчивается на слово select. Почему, если это option а select выше?
  • <ul class="nav__contacts"><p class="nav__contacts__contact">Подписывайтесь на нас:</p>
    - не валидная вёрстка. Для списком прямыми потомками могут быть только элементы списка.
  • пути до картинок не должны содержать пробелов и заглавных буквы.
  • почему div class nav а не nav class nav?
  • Почему навигация вне шапки?


P.s.
Все вопросы риторические.
Ошибаться нормально.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы