Варианты обработки Bootstrap с ITCSS

Я хотел бы обсудить это, чтобы узнать разные мнения и подходы к работе с Bootstrap с помощью ITCSS (с использованием SCSS).

Мой подход соответствует следующим требованиям:

  1. По возможности избегайте использования класса Bootstrap непосредственно в моем HTML (независимо от инфраструктуры SPA), если что-то изменится в Bootstrap, я смогу обработать их непосредственно в моем ITCSS, и мой HTML никогда не пострадает.
  2. По возможности повторно используйте все артефакты Bootstrap, такие как классы, миксины и функции. Во избежание повторного построения колеса.

Мой подход:

  1. По возможности обрабатывать зависимость от ITCSS как абстракции для моего уровня представления.
  2. Тематическая начальная загрузка на уровне Generic ITCSS выглядит следующим образом:
      @forward "~bootstrap/scss/bootstrap" with (
    // ... all my settings to override required Bootstrap variables
);
  1. Если необходимо определить какой-либо класс, который воплощает (частично или полностью) любой класс Bootstrap, я использую @extend, Например:
      .o-btn {
    // my own style properties

    &--primary {
        @extend .btn-primary;
    }

    &--light {
        @extend .btn-light;
    }
}

Это хороший подход? есть другой способ увидеть это?

0 ответов

Другие вопросы по тегам