Как использовать нескольких css-фреймворков в одном проекте, не прибегая к помощи SASS/SCSS?

Question

[nekritik]

Данный вопрос для меня актуален именно для Angular но способы реализации не используя ангуляр тоже приветствуются.Так вот,я бы хотел в своём приложении на Angular использовать 2 css-фреймворка - Bulma и Materialize. У этих фреймворков совпадает часть селекторов, поэтому просто добавить 2 css-файла не получится. Я пробовал искать в гугле и мне попалась вот эта статья. В этой статье приведён пример, как сделать, что-то вроде "неймспейса", то есть, сделать с помощью SASS/SCSS так чтобы все селекторы фреймворка Picnicss (это пример из статьи) были доступны всем элементам в классе picnicss,

<div class="picnicss">
  
  <p>every styled element must be included inside the above div to be styled with the patched picnicss framewrok </p>
  
</div>

Я бы хотел добиться подобного эффекта, использую "обычный" CSS, потому что не пользуюсь SASS/SCSS.
Какие есть варианты реализации данной задачи?

Comments

[Rustam Bainazarov]

Чем SCSS на выходе отличается от CSS? Ничем.

Answer 1

[Антон Швец]

Сделать как написано в статье, скомпилить стили с помощью препроцессора, получившийся CSS подключить к проекту.

Answer 2

[strelok011]

1. Не рекомендую скрещивать два фремворка из-за сброса дефолтных стилей и переопределения некоторых стилей прямо для тегов в обход классов.
2. Материалайз подразумевает подключение своего js, активно используемого при оформлении различных анимашек, для тех же форм, к примеру. Можно это обойти, но зачем тогда его использовать?
3. Если Вы все же решитесь продираться через колоссальный ворох проблем в результате скрещивания ежа и ужа (в дрожь кидает), то почему отказываетесь от использования препроцессоров? Можно вытащить материалайз в виде npm-пакета и импортировать из него только необходимую часть стилей, да еще и докрутить на эти стили модификатор, который позволит хоть как-то разделить влияние фреймворков.

Я бы предложил использовать тот фреймворк, в котором больше плюшек, а из второго простой копипастой тащить нужное.
Ну и - учите препроцессоры. Это реально киллерфича.
В ангуляр проекте всё это не сложно настроить по примерам. Равно как и подключить вместо css фреймворка тяжелую артиллерию типа MaterialUI

Answer 3

[Евгений]

Почему бы не использовать 1 фреймворк? Ведь завтра вам может понравится кнопка из другого фреймворка, вы и его подключите?

Comments

[Евгений]

Причем каждый фреймворк как правило делает reset стандартных браузерных стилей, что в принципе выбривает, то что обстайлил предыдущий фреймворк, т.е. по факту будет стиль только последнего по порядку подключения, и куча ненужных сотен килобайт, в виде css файлов, скаченых на сторону клиента >_