Варианты обработки Bootstrap с ITCSS
Я хотел бы обсудить это, чтобы узнать разные мнения и подходы к работе с Bootstrap с помощью ITCSS (с использованием SCSS).
Мой подход соответствует следующим требованиям:
- По возможности избегайте использования класса Bootstrap непосредственно в моем HTML (независимо от инфраструктуры SPA), если что-то изменится в Bootstrap, я смогу обработать их непосредственно в моем ITCSS, и мой HTML никогда не пострадает.
- По возможности повторно используйте все артефакты Bootstrap, такие как классы, миксины и функции. Во избежание повторного построения колеса.
Мой подход:
- По возможности обрабатывать зависимость от ITCSS как абстракции для моего уровня представления.
- Тематическая начальная загрузка на уровне Generic ITCSS выглядит следующим образом:
@forward "~bootstrap/scss/bootstrap" with (
// ... all my settings to override required Bootstrap variables
);
- Если необходимо определить какой-либо класс, который воплощает (частично или полностью) любой класс Bootstrap, я использую
@extend
, Например:
.o-btn {
// my own style properties
&--primary {
@extend .btn-primary;
}
&--light {
@extend .btn-light;
}
}
Это хороший подход? есть другой способ увидеть это?