Ответы пользователя по тегу БЭМ
  • Правильно ли я понимаю БЭМ?

    Get-Web
    @Get-Web
    Front-End Developer
    Чтобы ваша разметка была более корректной, правильнее будет использовать миксы вместо модификаторов.
    А модификаторы в вашем случае лучше использовать для описания общих стилей повторяющихся в разных местах.
    <div class="main">
        <section class="lead">
            <div class="lead__wrap wrap">
                <div class="lead__row row">
                    <div class="lead__column column column_xs_2">
                        <div class="lead__header"></div>
                        <div class="lead__txt"></div>
                    </div>
                </div>
            </div>
        </section>
        <section class="about">
            <div class="about__wrap wrap">
                <div class="about__row row">
                    <div class="about__column column column_md_5">
                        <div class="about__header"></div>
                        <div class="about__txt"></div>
                    </div>
                </div>
            </div>        
        </section>
    </div>

    Сложно сказать насколько это будет жизнеспособно, но такое имеет место быть.
    Ответ написан
    Комментировать
  • Какими инструментами пользоваться для БЭМ?

    Get-Web
    @Get-Web
    Front-End Developer
    Изучайте методологию БЭМ. Сам БЭМ более чем актуален, а вот инструментарий меняется, в частности BEMJSON, i-bem.js и прочие технологии это по большей части используется только внутри яндекса.
    Ответ написан
    Комментировать
  • Не могу понять, как правильно задавать классы большим вложенностям по методологии бэм?

    Get-Web
    @Get-Web
    Front-End Developer
    Надо смотреть дизайн, чтобы более точно сказать как лучше, но в любом случае вы делаете не правильно.
    Задавайте короткие лакончиные названия, если у вас это не получается, значит вы свернули не туда.
    Чтобы получалось дробите блоки на более мелкие блоки.
    Вместо этого ужаса communication__forms-wrapper-create-recall-form-buttons-send создайте отдельно блок кнопку button или любое другое не зарезервированное название. Кнопку вы можете модифицировать так button_clear button_send, хотя лучше конечно дать более общее название или вообще делить по типу например button_type_1 button_type_2. Затем если в контекте кнопка другая используте микс

    <button class="communication_button button button_type_1">Очистить</button>

    Очень аккуратно и понятно

    то же самое с формой, создайте блок form и используйте как независимую структуру в нужном месте.

    ну и вообще вы только вдумайтесь у вас есть якобы элемент communication__forms-wrapper-create-recall-form и вы наследуетесь от него все глубже и глубже communication__forms-wrapper-create-recall-form-name так нельзя делать, вы косвенно пытаетесь делать элемент элемента, каждый элемент должен наследоваться от блока и редких случаях можно немного разбавить связями по типу el__price el__price-old el__price-new
    Ответ написан
    8 комментариев
  • БЭМ: Может ли блок быть собственным элементом?

    Get-Web
    @Get-Web
    Front-End Developer
    Нет, так нельзя. Для блоков есть модификаторы, а элементы блока являются его содержимым. Ваш пример без контекста проблемы не понятен, тем не менее смысл БЭМ не только в переиспользовании, но и в возможности модифицировать, дорабатывать и обновлять согласовано с методологией. И да, если вам нужна внутренняя обертка, а её нет, то придется её добавить во всех блоках, либо придумать способ модифицировать блок под конкретную задачу в конкретном месте.
    Ответ написан
  • Как правильно написать классы БЭМ для кнопок?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Блок_модификатор_значение

    button_theme_ghost
    button_size_small

    <button class="button button_theme_ghost button_size_small">
    Ответ написан
    3 комментария
  • Насколько хороша эта верстка?

    Get-Web
    @Get-Web
    Front-End Developer
    Никакого reset.css , максимум normalize и то переделать так, чтобы не повышать специфичность
    Ни в коем случае не применять стили ко всем элементам body * , мало того что ко всем элементам, так еще и вложенный селектор повышающий специфичность.
    По разметке более-менее, но вот кнопка это ужас какой-то:
    <div class="button__wrapper">
                        <div class="button capab__more">
                            <a href="#">
                                <button class="button__btn">All Services</button>
                            </a>
                        </div>
                    </div>

    Да и вообще вы все теги "a" как-то недооцениваете, в первую очередь надо описывать их, навешивать на них классы и стили, равно как и button, а не делать кнопки из оберток этих тегов, это не тот случай

    input__input у вас не вызывает сомнения?, тут было бы более уместно задать например вместо news-signup__form отдельный блок form, а еще лучше subscribe, а там уже и subscribe__input, subscribe__field, subscribe__button да что угодно и будет это красиво и просто.
    Тоже самое с соц сетями, это отдельный блок должен быть, можно просто social и микс если надо footer__social
    Вообще с футером тоже большие проблемы footer-main / footer-part / footer-part-company / footer-part-links / footer-part-contact это безумие какое-то, вы либо делайте отдельные блоки без привязки к футер, либо делайте их элементами футера
    Ответ написан
    2 комментария
  • Как сделать различие секций, грамотное по БЭМ?

    Get-Web
    @Get-Web
    Front-End Developer
    Ну если уж по БЭМ, то в данном случае не вижу смысла делать так section:nth-child(2n), это повышает специфичность, которую следует избегать., можно просто миксовать блок с классом который будет красить нужные блоки. В любой момент может понадобиться добавить еще какой-то блок, который например должен быть белым после белого и что тогда? Зато если будет отдельный класс, можно например сделать так, чтобы через админку устанавливать цвет любого блока..
    Ответ написан
    Комментировать
  • Как лучше выставлять вешнюю геометрию для блоков bem?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Внешние отступы и позиционирование относительно родительских блоков необходимо делать при помощи модификаторов либо миксов. Модификаторами определяем базовые стили, миксами переопределяем стили в контексте текущего блока.
    Ответ написан
    3 комментария
  • Как правильно делать БЭМ модификаторы?

    Get-Web
    @Get-Web
    Front-End Developer
    Никаких вложенных селекторов, если этого можно избежать, поэтому либо .nav__link--light/.nav__link--dark,
    либо использовать css переменные:
    Ответ написан
    4 комментария
  • Как будет правильно по правилам БЭМ использовать повторяющийся элемент?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Оба варианта приемлемы.
    Второй вариант почти всегда подходит. Я обычно делаю отдельного logo и у меня стили с картинками для лого лежат в отдельной папке logo, а там уже либо в зависимости от контекста делаю микс header__logo footer__logo, либо модификатор, например для уменьшенной копии можно сделать logo_size_small
    А в случае если лого относится только к конкретному блоку, то можно без проблем сделать его элементом, одно другому в таком случае не помешает никак.
    Ответ написан
    Комментировать
  • Верны ли эти правила БЭМ?

    Get-Web
    @Get-Web
    Front-End Developer
    1)Блок - универсален и независим (в идеале). Он может располагаться в любом месте сайта без ущерба для собственного вида. Поэтому блокам не задаются стили, влияющие на позиционирование.

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

    2)Элемент - неотъемлемая часть блока, не существующая вне его. Поэтому элементу можно задать позиционирование в пределах своего блока (различные отступы).

    Да.

    3)Модификаторами в БЭМ задают блокам внешний вид, состояние и поведение.

    Да, и блокам, и элементам, чтобы не прибегать к вложенности и не повышать специфичность.

    4)Миксы позволяют совмещать поведение и стили нескольких сущностей без дублирования кода

    Миксы больше подходят для переопределения стиля блока или элемента в контексте другого блока, но совмещать никто не запрещает
    Ответ написан
  • Похоже ли то, что я написала, на код, написанный по БЭМ?

    Get-Web
    @Get-Web Куратор тега HTML
    Front-End Developer
    Это совсем не БЭМ. У вас должно было получится что-то вроде этого:
    <div class="main-container">
        <img class="main-container__picture" src="images/bg.png" alt="Background">
        <!-- main-container__block-1 block-1 - Это микс, блок который модифицируется элементом другого блока или другим блоком  -->
        <div class="main-container__block-1 block-1">
            <div class="block-1__content">
                <div class="block-1__text">
                    <p>Your Title Goes Here Make It Long & Maybe 3 Lines</p>
                </div>
                <div class="block-1__buttons">
                    <!-- block-1__btn btn - Это тоже микс  -->
                    <div class="block-1__btn btn"><a class="btn__link" href="#">explore</a></div>
                    <div class="block-1__btn btn"><a class="btn__link" href="#">Add to cart</a></div>
                </div>
            </div>
        </div>
    </div>
    Ответ написан
    24 комментария
  • Как обратиться к элементу элемента в бэме?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    возможно надо этот элемент сделать блоком, типо: list-headet или как?

    Да, блоком, но не надо приплетать header. Блок должен называться таким образом, что-бы было понятно что он делает, а не где он расположен. А в последствии можно смиксовать блок, например:

    <div class="header">
        <h1 class="header__title">Title</h1>
        <p class="header__desc">Description</p>
        <ul class="header__list list">
          <li class="list__item"><a href="#" class="list__link">link</a></li>
          <li class="list__item"><a href="#" class="list__link">link</a></li>
          <li class="list__item"><a href="#" class="list__link">link</a></li>
        </ul>
      </div>
    Ответ написан
    5 комментариев
  • Как правильно сделать микс в бэм?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Если это позиционирование надо менять именно в конкретном блоке и больше повторять не будет, то можно миксовать так:
    <div class="main-block__title welcome__title"></div>

    В css блоки которые находятся внутри, должны быть записаны выше чем блок родителя, в такой последовательности миксы делаются легко. Если же у вас блок родитель идет
    раньше и стили надо переопределить, тогда в вашем случае будет лучше использовать модификатор.
    Ответ написан
  • Как избавиться от копипасты?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Миксы нужны для того чтобы внести корректировки в конкретный блок, если такие корректировки повторяются в разных блоках, значит это модификатор
    Ответ написан
    Комментировать
  • БЭМ. Как разметить текст, если часть предложения выделена другим цветом?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Чтобы помочь вам разобраться нужно видеть дизайн и понимать контекст проблемы, а то что я вижу в вашем наименовании это какая-то тавтология от которой у новичков и возникает неприязнь к БЭМ

    Как бы вы отнеслись к решению, оставить спан без класса и обратится к нему по тегу, через класс родителя?

    Только потому что вы не можете продумать название или структуру? Очень плохо.

    я в последнее время избегаю давать такие имена, типо item-title )

    И правильно делаете, то что вам предложили это дичь полная, блоки и элементы БЭМ не должны быть прилагательными и отвечать на вопрос какой, какая, какие и т.д.. это работа модификаторов.

    А теперь по делу. Если взять за основу вашу разметку, то тут несколько вариантов. Например проработать структуру. Вам правильно подсказали вы в цену обернули и цену и вес, а значит вы явно что-то делаете не так. Ваш код может быть таким:
    <td class="table__col shop-col">
        <p class="shop-col__info">
            <span class="shop-col__weight">1,2 кг</span>
            х
            <span class="shop-col__price">200 руб.</span>
        </p>
    </td>

    И можете без проблем модифицировать любой элемент.

    Еще возможны миксы с классами отвечающими за цвет, у вас может быть заранее определены классы с конкретными цветами, которые повторяются в макете:
    <td class="table__col shop-col">
        <p class="shop-col__info">
            <span class="shop-col__weight">1,2 кг</span>
            х
            <span class="shop-col__new-price color-accent">199 руб.</span>
            <span class="shop-col__old-price color-grey">200 руб.</span>
        </p>
    </td>
    Ответ написан
    5 комментариев
  • Два вопроса по БЭМ - как называть и выносить ли отдельно класс container?

    Get-Web
    @Get-Web
    Front-End Developer
    .header-top и .header-lower

    Так лучше не делать. Старайтесь не использовать прилагательные. Смысл БЭМ в переиспользовании и то что сегодня было вверху, может оказаться внизу и наоборот, после таких преобразований, когда top окажется где-то в центре как минимум возникнет диссонанс.
    Логичнее вынести в 2 независимых блока, прекрасно подойдут названия такие как panel, bar, info, navigation, если хотите зарезервировать эти имена для других целей, то можно использовать префиксы и сочетания ibar, i-bar, info-panel. Оба эти блока можно обернуть в единый header и миксовать class="header__panel panel", хотя я бы их полностью разделил, так как верхняя панель, явно может быть переиспользована где-то в футере.

    2) Есть любой блок, у которого структура по своей сути - это container > row > col*(items). Как лучше её организовать с т.з. БЭМ?

    Тут нужно видеть с чем работать, но в таком контексте лучше использовать микс:
    <div class="news">
      <div class="news__container container">
        <div class="news__row row">
          <div class="news__item">
            <!-- контент -->
          </div>
        </div>
      </div>
    </div>

    Таким образом мы можем модифицировать row и container в контексте необходимого блока и понимать назначение классов.
    Ответ написан
    3 комментария
  • Какой вариант именования более правильный (БЭМ)?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Второй вариант более правильный, но вы вложили в него неправильный смысл, вы косвенно привязали main-nav к контексту main и это очень заметно в 3-м примере, где вы эту проблему гиперболизировали, 3-й пример ужасен, никогда так не делайте. 1-й пример правильный по именованию, но не всегда будет правильный по структуре, так как навигация это скорее всего отдельный блок. В результате более правильно, коротко и лаконично будет примерно так:
    <div class="main">
      <nav class="main__nav nav">
        <ul class="nav__list">
          <li class="nav__item">
            <a href="#" class="nav__link">Home</a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">Work</a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">About us</a>
          </li>
        </ul>
      </nav>
    </div>


    Вам правильно сказали про миксы, но более правильно делать элемент-модифиткатор с названием блока к которому миксуем, то есть main__nav nav и если делать микс по вашей схеме, то получится вот такая тавтология main__main-nav main-nav, а если сделать 2 микса (что иногда тоже бывает) в 3-ем примере, то становиться плохо main__main-nav-list main-nav__main-nav-list main-nav-list и возможно на таком примере вам станет более понятено, почему не надо так делать и какую задачу решает БЭМ

    каждый пишет как ему удобно?

    Обычно такое происходит, когда не до конца понимают концепцию, либо просто не хотят правильно структурировать так как это может занять больше времени чем хотелось бы, в итоге входит привычку упускать некоторые моменты и получается свой БЭМ с блекджеком..
    Ответ написан
    Комментировать
  • Когда использовать микс, а когда модификатор?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    В целом вы правильно мыслите, но пришли немного к неправильному выводу.

    - Миксы лучше использовать для позиционирования блока либо модификации блока в контексте другого блока. Например у нас есть contacts и помещая его в header, даже если ничего не менять, желательно сразу задать ему header__contacts потом может пригодиться.

    - Если необходимо менять элементы блока внутри контекста другого блока, блока то можно миксовать элементы. Например: contacts__img header__contacts-img немного тавтология, но в небольших порциях уместно

    - Но если модификации могут быть неоднократными, то нужно модифицировать сами элементы: contacts__img contacts__img_type_1, тут уже нужно смотреть на контекст проблемы, например если у вас иконка и она где-то слева и где-то справа, то можно задать ей правила с отступами слева и с права в независимости от того какой тип блока: contacts__ico_margin-right_small или contacts__ico_margin-left_large. Это модификатор КЛЮЧ-ЗНАЧЕНИЕ где в ключе мы указываем что у нас существует отступ _margin-left и такой отступ может быть только один, а значение, это размер отступа _large

    Придерживаясь правил выше можно полностью решить практически любую задачу, но и такое иногда приходиться применять .card_type_1 .card__img, но обычно это хотелки заказчика/бекендщика, мол хочу чтобы я добавил класс и все изменилось, тут как бы выбора не остается.
    Ответ написан
  • Как правильно использовать модификаторы в методологии BEM?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Зависит от ситуации, если есть возможность, лучше использовать модификатор.
    БЭМ хорошо решает проблему специфичности, благодаря чему поведение становится более предсказуемое.
    Например у нас есть какой-то блок(или элемент, не важно) .box__item и мы хотим первому добавить отступ слева, например так:
    .box__item:first-child {
        margin-left: 10px;
     }

    Все весело и прикольно пока нам не понадобилось переопределять стили... К примеру нам надо на экране выше 720px задать всем box__item одинаковые отступы:
    @media (min-width: 720px) {
    .box__item {
        margin-left: 20px;
     }
    }

    И тут то и начались проблемы, специфичность первого .box__item повышена и простой класс его не переопределит, первый блок так и останется с 10-ю пикселями, теперь нужно либо повысить специфичность всех .box__item, либо к каждому переопределению .box__item цеплять :first-child
    .box__item,
    .box__item:first-child {
        margin-left: 20px;
     }

    Уже не так красиво? Конечно тем кто привык к вложенным селекторам это кажется обычным делом, но значит они еще не вкусили всего кайфа БЭМ, когда ты переопределяешь что хочешь и где хочешь не ожидая подвоха.
    Простой модификатор может легко решить эту проблему и следующее переопределение .box__item без подводных камней задаст именно те стили какие мы хотели, можно даже не задумываться о том, что что-то пойдет не так
    Ответ написан
    4 комментария