Vuetify: [Feature Request] Too many !important

[SuperDJ]

New Functionality

There are so many declerations of !important you need more and more of them when chaning something for contributong. Not only that but for endusers who might want to overwrite something with their own css need even more !important. I mean looking at my own attempt of creating a Material Design CSS framework I only needed 1 !important compared to over 1600.

Improvements

Well you don't need to write !important after every property

Bugs or Edge Cases it Helps Avoid

Unexpected behaviours where a !important isn't overwritten where is should be so you would need another !important. It makes the output CSS a lot smaller which benefits load times.

[johnleider]

Could you elaborate on something specifically? This is intended for helper classes.

[SuperDJ]

If it's for helper classes wouldn't that mean that they can be at the bottom of the CSS file? I mean anything that is at the bottom will be read last meaning it will overwrite the default making !important redundant.

I would like to elaborate on the cause of this issue however I can't remember the exact HTML I had. Nontheless I still think you don't need all the !important. Was thinking about making a PR for this but couldn't really find how to test it easilly.

[KaelWD]

anything that is at the bottom will be read last meaning it will overwrite the default

That isn't how css works. The helpers are all simple, single-class selectors; so without !important they won't be able to override anything with higher specificity.

[johnleider]

As stated above by @KaelWD , the important is needed to break css specificity as all helper classes are considered to be Trumps in ITCSS.

[jacekkarczmarczyk]

!important is used not only in trumps though

[trollepierre]

Hi,
Here is an example

.btn--flat {
    background-color: transparent!important;
    box-shadow: none!important;
}

I thing Vuetify should be using not !important. Maybe Vuetify can use more specific CSS selector, but as !important is very annoying to surcharge for developers, that is why Vuetify should avoid it if possible.

[ivanseidel]

I cant change the font when using dist/vuetify.min.css because eveything has a !important and overrides all my changes to body, .application, etc... Using font Roboto should NOT be hardcoded into the style, and if it is it should not have !important all over it.

[johnleider]

You need to be more descriptive. Depending upon what you are using, it might be intended to be !important. For example, all helper classes are important because they fall under the trumps category of ITCSS.

[trollepierre]

@johnleider : why not using Vuetify trumps in vuetify code to avoid falling under the other trumps?

[ivanseidel]

I guess that the font is not actually a helper, and should be dynamic
during initializatin just like the custom colors.

I dont see why it should be hardcoded into the styles as font is really
common to be replaced and forcing people who uses custom fonts to recompile
assets should be avoided as it takes more time.

My case is: I had a trumps of font family in vuetify 0.17 and was using it
without any trouble.

Maybe, just removing trumps for font family would solve the issue as it
would allow me and others to add its own font family with !important
without interrupting vuetify other trumps...

On Mon, Jul 2, 2018, 4:14 AM Pierre Trollé [e-mail] wrote:

@johnleider https://github.com/johnleider : why not using Vuetify
trumps in vuetify code to avoid falling under the other trumps?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/3400#issuecomment-401693130,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AC9Vr1l7rNOWpShTX2cAY0ZV164mhjp7ks5uCchagaJpZM4SUp-I
.

[KaelWD]

I still haven't seen anyone post an actual example of where this is a problem. Complaining about things is just a waste of everyone's time if you aren't going to help fix it.

[trollepierre]

.btn--flat {
    background-color: transparent!important;
    box-shadow: none!important;
}

Here I need to surcharge .btn-flat because I want to use a different background-color.

[trollepierre]

@johnleider : could you ask question about the info you need?

[MajesticPotatoe]

Thank you for the Feature Request and interest in improving Vuetify. with our 2.0 update, we will grooming over each and every component and updating/cleaning up their styles.

If you have any additional questions, please reach out to us in our Discord community.