[Feature Request] Prevent Vuetify from conflicting with other styles or components of user application (Vuetify css scope).

[Winns]

Problem to solve

First of all thanks for a great framework.

I was using Vuetify for a few weeks in my test projects.
During this test a found a critical issue which could limit or completely abandon the usage of this framework for me.

Vuetify css is written in a very dangerous manner, it's using global scope without respect to any other css of your app. Most of the files in this folders contain a styles without a proper scope protection.

generic
elements
trumps

Reserving a popular selectors like ".title" (in my opinion selectors like this can be used only inside a scope or in very small projects) or controlling a styles of your whole app _reset.styl.
Isn't it against a concept of reusable components that Vue.js is teaching us?

In result, it could be hard or impossible to integrate Vuetify in any project that is not limited to Vuetify.

Would it be possible to push Vuetify to another level and make it non conflicting with other styles or components ?
Currently to make it production ready I should manually wrap (.vuetify) all the styles of Vuetify and hope that all Vuetify components are inside this scope and work correctly.

Proposed solution

All Vuetify components should have a global class (.vuetify or whatever),
and most of the the styles inside this files generic, elements, trumps should be written relative to that class scope with respect to others styles of user application.

[frank-orellana]

Thanks for the solution, I am actually doing this for my project which have existing styles, I cannot just break everythin else. So I updated the vuetify.css file to some things like this (in a many more lines of course):

.vuetify *,
.vuetify ::before,
.vuetify ::after {
  box-sizing: inherit;
}
.vuetify ::before,
.vuetify ::after {
  text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}
.vuetify * {
  background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements */
  padding: 0; /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

But so far I have not tried to alter the code that would add the class and instead, I add the class myself to the vuetify elements that really need these styles, for example:

<v-combobox class="vuetify" v-model... />

As of now it is all working like a charm this way (I was about to change libraries before this), I guess I will have to update more lines in the css as my project grows but seems manageable. If someone would point me to where I would have to update the js to make it add the class automatically that would be great too, and then I would be able to submit a Pull Request if you want me to.

[frank-orellana]

Also... shouldn't all these styles belong on a theme css? Having them on the default css causes a lot of trouble, If the default css would only have the most basic and required styles, people could opt-in to use a theme, even if it is the default theme.

[johnleider]

An update on this issue.

generic: In v2 this consists of our reset file, elevation and colors. Adding a prefix to colors is something we may consider for the next major version but not for v2.0. Elevation is for all intents and purposes a utility (previously trump) class (it will probably be moved for clarity in the future) in which I'll touch on utility classes in a minute. The reset file is not something we intend to change as it is intended to normalize the framework to allow a blank slate for adding features/functionality and new components.

utility: Utility classes are intended to be absolute overrides and follow the same concept as other popular frameworks such as bootstrap. We have no intention of changing or scoping these at this time.

elements: I completely agree and is something we will change. I'll see if it's still possible to get into v2.0 (no guarantees).

Beyond these 3 areas, we have properly scoped the rest of the framework and will continue to make improvements in the future. Thank you to everyone for your patience on this one!

[johnleider]

With the inclusion of c5dae24 I am going to call this ticket resolved as far as what we plan to implement at this time. This scopes the styles of our helper classes only live within v-app. This will ship with v2.