N
N
nekritik2020-01-09 14:53:54
css
nekritik, 2020-01-09 14:53:54

How to use multiple css frameworks in one project without resorting to SASS/SCSS?

This question is relevant for me specifically for Angular, but implementation methods without using Angular are also welcome. So, I would like to use 2 css frameworks in my Angular application - Bulma and Materialize. These frameworks have the same part of the selectors, so just adding 2 css files will not work. I tried to search on Google and I came across this article . This article gives an example of how to do something like a "namespace", that is, using SASS / SCSS so that all the selectors of the Picnicss framework (this is an example from the article) are available to all elements in the picnicss class,

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

I would like to achieve a similar effect using "regular" CSS because I don't use SASS/SCSS.
What are the options for this task?

Answer the question

In order to leave comments, you need to log in

3 answer(s)
A
Anton Shvets, 2020-01-09
@nekritik

Do as it is written in the article, compile the styles using the preprocessor, connect the resulting CSS to the project.

S
strelok011, 2020-01-09
@strelok011

1. Не рекомендую скрещивать два фремворка из-за сброса дефолтных стилей и переопределения некоторых стилей прямо для тегов в обход классов.
2. Материалайз подразумевает подключение своего js, активно используемого при оформлении различных анимашек, для тех же форм, к примеру. Можно это обойти, но зачем тогда его использовать?
3. Если Вы все же решитесь продираться через колоссальный ворох проблем в результате скрещивания ежа и ужа (в дрожь кидает), то почему отказываетесь от использования препроцессоров? Можно вытащить материалайз в виде npm-пакета и импортировать из него только необходимую часть стилей, да еще и докрутить на эти стили модификатор, который позволит хоть как-то разделить влияние фреймворков.
I would suggest using the framework in which there are more goodies, and dragging the necessary from the second with a simple copy-paste.
Well, learn preprocessors. It's really a killer feature.
In an angular project, all this is not difficult to set up using examples. As well as connecting heavy artillery like MaterialUI instead of css framework

E
Eugene, 2020-01-09
@iamd503

Why not use 1 framework? After all, tomorrow you might like a button from another framework, will you connect it too?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question