Войти с помощью github

Not Found

Этой страницы не существует.

Самые последние публикации

Добрый день!

Очень часто сталкиваюсь с делемой, как мне классифицировать элементы в тексте, которые нужно как-то по особенному выделить, например сделать текст красным или сделать его больше? Например в такой конструкции:

<div class="block">
  <p class="block__text">Lorem <span class="">ipsum</span> dolor sit amet consectetur adipisicing elit. Sapiente voluptatum ipsam recusandae eum tempora quasi quae sequi modi illo dicta error animi quia, quibusdam odit praesentium ut assumenda? Iure, rem.</p>
</div>

Как мне классифицировать span по БЭМ? По документации, я не могу назвать блок как red-text. Отлично, тогда наверное это модификатор! Но вместе с модификатором, я также должен продублировать имя элемента, или блока... но я не могу для span'a, присвоить класс его родителя. Тогда как же быть? Не было бы проблем, если бы я мог просто написать:

<span class="block__text--red">ipsum</span>

Так как в этой ситуации поступить?

Ситуация: хочу чтобы в двух разных страницах загружались разные блоки, но блоки почему-то не подключаются.

Дано: блок logo-OC и logo-w-OC и код:

block("footer")(
    content()(function () {
      return this.ctx.content.map(function (item) {
        let footerLogo;
        if (item.footerLogoBlack) {
            footerLogo = [
                {   
                    block: "logo-w-OC",
                },
          ];
        }
        if (item.footerLogoWhite) {
            footerLogo = [
                {   
                    block: "logo-OC",
                },
          ];
        }

        return [
            {
                cls: "container",
                content: [
                  { 
                    elem:'row',
                    content: [
                      {
                        elem:'col',
                        elemMods:{mb:'md-20'},
                        content: [
                          {
                            cls: "row",
                            content:footerLogo,
                        ],
                      },
                    ],
                  },
                ],
              },
        ];
      });
    }),

  );

и, странно, что в html они добавляются, но блоки не подключаются.(классы logo-w-OC и logo-OC, но блока нет)

хотелось бы обойтись одним шаблоном, чем делать два разных блока, типа footer-1 и footer-2

Есть ли возможность заставить bem-xjst генерировать HTML в таком виде:

<button class="b-button b-button_size_large">Label</button>

вместо:

<button class="button button_size_large">Label</button>

Приветствую! Не понимаю. Подскажите пожалуйста, допустимо ли применение нескольких элементов БЭМ на одном теге?

.block-a
  .block-b
    .block-a__elem.block-b__elem

Ну, и попутно вопрос по вложенности. Допустимо ли такое:

.block-a
  .block-b
    .block-a__elem.block-c
      .block-b__elem
        .block-c__elem

Предположим, у меня есть блок header, в нем есть блок search, который, в свою очередь, содержит кнопку "закрыть". Данная реализация с такой кнопкой предполагается только в хедере и нигде более.

Отсюда вопрос:

  1. Как мне оформлять данную кнопку с точки зрения БЭМ, как элемент блока header или как элемент блока search?
  2. Допустимо ли во вложенном блоке использовать элементы блока родителя?

Заранее, благодарю.

<header class="header">
    <div class="search header__search">
        <form class="search__form" action="/" method="post">

                    <button type="submit" class="search__submit">
                        <i class="icon icon--search"></i>
                        <span>Найти</span>
                    </button>

                    <input class="search__input" placeholder="Поиск товаров" type="text" name="search">

                    <a class="search__extended" href="#">
                        <i class="icon icon--gear--outline"></i>
                        <span>Расширенный поиск</span>
                    </a>

                    <!-- Кнопка ЗАКРЫТЬ -->
                    <button class="header__search-close">
                        <i class="icon--cancel"></i>
                    </button>

                </form>
    </div>
</header>

Cuprite — ещё одно open-source решение, разработанное нашей командой. Это драйвер для Capybara, который позволяет использовать Ferrum без переключения между API. Ferrum + Capybara = Cuprite Cuprite — это драйвер для Capybara, который использует Ferrum — драйвер на чистом Ruby с минимальным количеством зависимостей для запуска headless Google Chrome.

О том, как:

  • Начать работать с Cuprite
  • Управление браузером
  • Запуск теста в ограниченной среде
  • Cuprite API

...читайте в статье на нашем сайте.

Репозиторий проекта и инструкции к инсталляции на Github.

Вот на практике я столкнулся с несколькими вопросами по БЭМ и, хотя, я пересмотрел, наверное, все БЭМ-митапы и многие другие видео по БЭМУ, для меня ответы на, казалось, такие очевидные вопросы остались не совсем очевидными.

Допустим, у меня есть такая структура:

...
<body>

<header class="header">
  <span class="header__logo">LOGO</span>
</header>

<h1>Its home page</h1>

<div class="some-block">
  <p class="some-block__text">Some stuff</p>
</div>

<div class="some-block">
  <p class="some-block__text">Some another stuff</p>
</div>

</body>
</html>

И CSS:

.header {
  background-color: orangered;
}

.some-block {
  background-color: orange;
}

.some-block__text {
  margin: 0;
}

Первый вопрос. Что если мне нужно для блока Header поставить margin-bottom: 10px? Так как это блок и я хочу его переиспользовать, то для него задать я не могу. В таких случаях идеально должны подойти миксы, те сделать Header элементом другого блока, НО какого?

...
.???__header {
  margin-bottom: 10px;
}

Второй вопрос. Вот у меня на этой странице есть 2 блока Some Block и для них мне нужно сделать margin: 15px, те мне опять же нужно сделать его элементом какого-то блока (какого и как я пойму из первого ответа) и опять же сделать:

...
.???__some-block (или?) {
  margin: 10px;
}

Но что если для второго такого-же блока мне нужно, чтобы правый внешний отступ был 20px: margin-right: 20px (и это исключительно особенность его расположения на этой страницы, как и внешние отступы по 10px, просто для второго такого-же блока правый отступ нужен в 20px).

Третий вопрос. Что если у меня появились еще 3 дополнительных страницы, например, About, Contacts и Policy на каждой из которых (КРОМЕ Contacts) у блока Header как и на странице Home margin-bottom: 10px, а на странице Contacts margin-bottom: 15px (это чисто дизайнерская особенность этой странице и этот отступ для блока Header в 15px зависит только от того, что он находится на странице Contacts).

Четвертый вопрос. На каждой странице, как в примере со страницей Home у меня есть заголовок (h1), который показывает на какой странице я нахожусь и стили которого я до этого момента оставлял базовыми, но вот теперь я решил задать, что на всех этих страницах он будет размером в 27px, те мне его нужно выделить в отдельный блок? Или же на каждой странице сделать его элементом какого-то другого абстрактного блока (какого я пойму из первого вопроса)?

И вот я выделил как-то этот заголовок, но что если на странице Home (что является особенностью этой страницы) этот заголовок имеет размер 30px и color: green? Что сделать в этом случае?

Решил начать изучать bem пользуясь enb. Попутно хочу научится применять sass. Пользовался в осномном этой статьей. Там они, к слову не создавали элементы, но писали стили элементов блоков прям в стилях блоках. И вот что получилось: Создаю блок и элемент к нему, даю им по scss:

bem create -l desktop.blocks -b some-block -T scss
bem create -l desktop.blocks -b some-block -m some-elem -T scss

Далее говорю sass следить за все делом в папке desktop.blocks что бы тот формировал css

sass --watch desktop.blocks/

И далее идет некоторая магия enb (я еще не добрался до этого, в документации немного неясно описывается принцип сборки бандлов) и формируется наш готовый бандл

desktop.bundles/index/index.css

Собственно вопрос. Делают ли так вообще? Sass бы заиграл более ярко, если бы я писал все стили елементов в блоках. Например:

.some-block {
   &__some-elem {
      /* Стили элемента */
   }
}

Но тогда зачем нужно отдельно создавать элементы? Заранее спасибо

Всем привет!

Пытаюсь разобраться как правильно использовать БЭМ для заголовков и пока не могу найти правильное решение.

Поясню на примере: Есть блок title

.title {
    padding: 18px 0;
    font-size: 36px;
    font-weight: bold;
}

который используется так

<h1 class="title">Some text</h1>

Тут на моей странице меняется семантическая структура и тот же самый заголовок семантически становится h2. И теперь у него другие внешние отступы поэтому блок на странице выглядит иначе.

  • Делать глобальный CSS-reset противоречит БЭМ (поскольку это глобальные стили и могут меняться от проекта к проекту)
  • Сбросить внешние отступы в самом блоке я не имею права (поскольку это внешняя стилизация)
  • Вариант который я сейчас вижу кажется мне очень костыльным
    <div class="title">
      <h2 class="title__text">Some text<h2>
    </div>
    
    .title__text {
      margin: 0;
      padding: 18px 0;
      font-size: 36px;
      font-weight: bold;
    }
    
    То есть сам блок это пустая обёртка а уже h1 или h2 - это элемент блока, который я могу стилизовать как мне нравится.

Очень хочу услышать ваше мнение поэтому поводу. Как правильно сделать это по БЭМ?