Vuetify: title css class

[Christilut]

I noticed that since the latest minor release the css class title has some specific styles with !important

This has broken many of my components because I always use .title in my scoped CSS.

Is it necessary for vuetify to apply these styles to title?

I really like the ability to use very generic class names like title in scoped css, preferably without fear of them getting overwritten :)

[johnleider]

This is a risky one as they were changed due to the fact that helper classes should always trump. I can understand that a generic name such as title would conflict, but Vuetify is meant to be a standalone framework with no guarantee to work with your custom styles or integrations with other frameworks.

Due to this, I cannot recommend that we make this alteration.

[Christilut]

I don't know the internals of Vuetify but is it really necessary to use such generic names? Personally I think a framework should be compartmentalised and have no chance to accidentally interfere.

I understand Vuetify is a full featured framework but there is always going to be custom CSS.

[johnleider]

I'm simply following the designated naming convention specified by MD spec:
https://material.io/guidelines/style/typography.html#typography-styles

[Christilut]

I think it's probably best to change them rather soon than later because since the properties are suffixed with !important it really becomes difficult to manage which effectively means some generic CSS classes can't be used at all anymore in custom CSS.
Maybe change them to something like .md-title so if a developer wants to apply the title style manually, they can do so easely.

[johnleider]

I'm discussing with the team the potential to remove the explicit declaration of important. I don't disagree with your points, it's just a rabbit hole. If we add a prefix to the typography classes, then we add it to all, which isn't necessarily bad, but then helper classes like _.mt-5_ become _.v-mt-5_ which just feels weird to me.

Any thoughts?

[Christilut]

Yes I agree. The mt-5 works because its quite specific and unlikely to conflict with custom css. Adding v- prefix does make sense if you look at the rest of the framework, things like v-btn etc. And ultimately it would result in the framework being nicely compartmentalized and easy to reason with as everything starts with v-.
The only downside I see is that doing .v-mt-5 is a bit more work...

Perhaps another upside to the prefix is that when there is intellisense for vuetify, it will be easy to just type 'v-' and you will see a full list of available items. Without prefix someone would have to know the first character(s) before the list would appear.

[Christilut]

@johnleider any updates on this?

I got reminded about this issue when one of the latest updates (0.15.0 ?) added .flex which conflicts with on of my classes.

[johnleider]

Not particularly. Adding prefixes to all classes would not only be an extremely large consumption on time, but also an extremely large breaking change.

[nkoterba]

We've encountered a similar issue.

We are using some scoped scss and have defined some simple class names:

.warning {
 background-color: yellow;
 color: black;
}

However, the vuetify.css defines very generic class names and also uses important! which makes it difficult to override:

.warning {
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
}

Obviously we can go back and write better selectors in our own custom code but any library that forces a style on such common (and abused) class names seems likely to cause more issues than the time it would take to resolve them.

We are moving from an Angular1 Material Design framework (https://github.com/angular/material) and they prefixed all their classes with md- which worked wonderfully in our project and made it very easy to override styles when necessary (https://github.com/angular/material/blob/master/src/components/button/button.scss)

Just my 2 cents.

[johnleider]

Now that there is more time to devote to tasks like this, I will try to get it in for v1.0, at the very least v1.0.x

[KaelWD]

Removing this from the milestone as it's still closed. #1561 will take its place

[tomparle]

Hi, sorry if I missed something here, but it seems that the class title is still not prefixed and have !important flags, which indeed can bring up some issues when integrating with other CSS.
I thought it would be included in #1561 but it does not seem to be the case. Is it planned to be fixed ?

[daviesdoclc]

@tomparle I'm still seeing issues with this as well. Argh! What's the workaround? Rename all MY classes?

[tomparle]

Unfortunately I had to rename my classes, luckily I did not use a lot of .title classes, but since it's a quite common word, I think it should be prefixed. I would be glad to hear about it from a Vuetify developer !

[zeroarst]

Same here... recently just started using Vuetify and found this messes up my original style as the .title is very generic name...

[andymartinwork]

What is the point of scoped styles at all if Vuetify breaks them? Is there a list of all classes that Vuetify breaks or do we have to guess?

The very least a framework should do is prefix their styles - even if they didn't override all of your "scoped" styles!

[vegerot]

I agree with @andymartinwork. I understand your reasoning for calling it
title, but I was hoping scoped could save me from that

[tomparle]

Interestingly enough, the title typography element seems to have disappeared from Google MDL specs : https://material.io/design/typography/the-type-system.html#type-scale, which would solve our problems !