Задать вопрос
Realetive

Realetive

MODX Ambassador России, самозванный БЭМ-евангелист
Ответы пользователя по тегу Sass

  • Где убрать БЭМ-примеси?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Вы, наверное, неправильно поняли — «с БЭМ нет необходимости в миксинах». Т. е. ваша вёрстка вполне соответствует БЭМ (если я правильно понял и container используется для задания ширины макетной сетки). Это просто микс: https://ru.bem.info/methodology/key-concepts/#микс и беглого взгляда на классы достаточно, чтобы понять структуру. А если вы спрячете это за SCSS-миксин, эта нагляднсть «потярется», но вы ничего не «выишраете» с этого — ни уменьшите код на выходе, ни упростите понимание сущностей коллегам (себе через пару месяцев).
    Ответ написан
    5 комментариев
    5 комментариев

  • Как лучше писать отступы для BEM блоков?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    То, что написал Сергей delphinpro, не имеет отношения к БЭМ — из-за таких «советов» у Егор Живагин потом куча проблем и ложное представление о методологии.
    Как советует Михаил — посмотрите на Tailwind — там куча примеров готовых компонентов с уже расставленными классами. Так вот, Tailwind к БЭМ тоже не имеет никакого отношения, хотя именно там используются «атомарные стили» вида mt-40 / pd-20 / и т. д. Понимание концепции БЭМ стоит начинать с bem.info, а если останутся или появятся вопросы — в официальный канал @bem_ru.
    Ответ написан
    2 комментария
    2 комментария

  • Как правильно оформить второй header для других страниц?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    В первую очередь мы смотрим в дизайн и пытаемся понять, кто «диктует» различия у одинаковых или схожих блоков. Тут, похоже, есть две «темы», которые модифицируют подложку (цвет фона) у родительского блока и цвет текста у заголовка. Возможно (без дизайна тут можно бесконечно гадать), что по-БЭМ это будет выглядеть как-то так:

    <header class="header header_theme_dark">
  <div class="header__heading">
    <h1 class="heading heading_size_xxl heading_theme_dark">
      Hello kitty
    </h1>
  </div>
</header>


    <header class="header header_theme_light">
  <div class="header__heading">
    <h1 class="heading heading_size_xxl heading_theme_light">
      Hello kitty
    </h1>
  </div>
</header>


    — у .header_theme_* описан цвет «подложки» (background-color), а .heading_theme_* в свою очередь «знает», какой нужно задавать цвет текста (color).
    Ответ написан
    6 комментариев
    6 комментариев

  • Как научиться делать сборки для автоматизации процесса разработки Webpack?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Советую тогда TARS — в нём уже есть заявленные инструменты. И, как и написано в документации, лучше использовать в совокупности с его cli-инструментом для создания компонентов — это увеличит скорость и поможет избежать некоторых ошибок.

    P. S. наверняка, это не единственный инструмент, но тут хорошая документация и довольно плавный порог вхождения, мне года 4 назад он очень помог.
    Ответ написан
    Комментировать
    Комментировать

  • Первичный родитель через амперсанд (SASS). Как?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Попробуйте pobem. Он позволяет прозрачно работать в контексте методологии и правильно воспринимает вложенность:

    block(select) {
  max-width: 100%;
  vertical-align: bottom;

  .elem(button) {
    width: 100%;
    vertical-align: top;
    text-align: left;
  }

  block(button).elem(text) {
    display: block;
    padding-right: 2em;

    &:empty:before {
      content: '\00a0'
    }
  }

  .elem(tick) {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-image: url('../icon/_symbol/icon_symbol_chevron-down.svg');
    transition: transform 0.1s ease-out;
    width: 2em;
    padding: .5em;

    &:empty:after {
      content: none
    }
  }

  .mod(opened) .elem(tick) {
    transform: rotate(-180deg)
  }

  .mod(width available) {
    width: 100%
  }

  .mod(has-error) {
    block(button) {
      border-color: red
    }

    .elem(tick) {
      display: none;
    }
  }
}
    Ответ написан
    1 комментарий
    1 комментарий