How to prevent CSS conflicts when creating a UI component using Quasar app extension?
-
I am creating a Quasar App Extension for a UI component that I plan to distribute via NPM. I have created the UI component. However, when I place it on various websites then the CSS conflicts are leading to a broken UI. I am familiar with VueJS and I have used Quasar for building applications.
As we can use Quasar in existing project, I believe, that someone must have faced this issue.
How to develop a UI App Extension that can be used on multiple websites without breaking existing UI?
What I am planning?
- Append some text to all the CSS rules. This will change the names of all the rules and likely prevent CSS conflicts
- I need suggestions for a smart way to do this
- Write the whole plugin from scratch just using VueJS and CSS
- Append some text to all the CSS rules. This will change the names of all the rules and likely prevent CSS conflicts
-
Update on the first plan: I am using a PostCSS plugin to append some text to all the CSS rules. Will update further.
-
Just very curious of what you’re doing. So you are building a standalone Quasar App Extension, with a UI component.
So does that mean that your Quasar extension can be used outside of Quasar Apps?
If so then why did you choose to create your standalone ‘UI widget’ as a Quasar App extension instead of using Quasar’s UMD to avoid css conflicts?
-
@dobbel said in How to prevent CSS conflicts when creating a UI component using Quasar app extension?:
So does that mean that your Quasar extension can be used outside of Quasar Apps?
Yes, this component can be used outside of Quasar applications.
@dobbel said in How to prevent CSS conflicts when creating a UI component using Quasar app extension?:
If so then why did you choose to create your standalone ‘UI widget’ as a Quasar App extension instead of using Quasar’s UMD to avoid css conflicts?
- Familiarity with Quasar, and
- to get started quickly in presence of fair amount of complexity in the plugin
are the reasons why I chose Quasar.
When we build the plugin and use the UMD version generated by the build, then we have to use Quasar’s UMD CSS and scripts in order to get the plugin working.
-
@greenzone Quasar and official App Extensions follow (for the most part) the BEM methodology for CSS naming. It helps prevent collisions.
Here are some links:
https://css-tricks.com/bem-101/
http://getbem.com/naming/
