[Feature Request] Avoiding CSS manipulation of standard HTML elements

Problem to solve

Currently, Vuetify changes some style properties of (very few) standard HTML elements, like p for example in /src/stylus/elements/_typography.styl.

While I understand the intention behind this, it adds a lot of issues and headache if used together with custom components or other libraries, which expect “default” (usually still reset) css styles for all standard HTML elements.

In conclusion, a non-Vuetify component may either be unexpectedly influenced because of these adjustments (which increases the maintaining cost for us, as we need to adjust preexisting components) or is (unnecessarily) entangled with Vuetify, even if it doesn’t use its components (but still has to address/reset these styling adjustments).

Furthermore, it also seems to be inconsistent, as for example $headings.h1 (within /src/stylus/elements/_typography.styl) is not bound to the h1 tag, but rather .display-4.

Proposed solution

As a solution, I would propose to use css classes to style all these elements, preferably prefixed with v- and to completely avoid opinionated styling of standard HTML elements. While there is usually some kind of styling like css resets involved, I assume that this is somehow a more common ground, many frameworks (whether other public library or internal components) can work with.

Given that this is without a doubt a mayor change, I believe the upcoming 2.0 release would be a great opportunity to introduce a cleaner css styling/naming convention, where all library-specific changes are within their own css class, preferable (even if not required to resolve this particular issue) prefixed with a v-.

[davydnorris]

This is very confusing right now.

I have just spent the past day tracking down why only some of my defined styles are not working after following the documentation to the letter, and after looking through the presets, and now I have read a bunch of bug reports that seem to indicate that the sass customisation for h1…h6 does not actually get applied to the header elements, but that they get added to the display-* classes?

It’s enormously confusing that the variables are still called h1…h6 but they don’t apply.

At the very least, can the documentation be clarified please?

[weotch]

I found a workaround for this using this PostCSS plugin: https://github.com/AoDev/css-byebye. I’m using Vuetify with Nuxt. Besides adding the package to my project, here’s what I added to my Nuxt config to get this to work:

{
  build: {
    postcss: {
      plugins: {
        'css-byebye': {
          rulesToRemove: [
            /\.v-application (p|ul|ol)/,
            /\.v-application \.(headline|title)/
          ]
        }
      }
    }
  }
}