Vuetify Application Styles

It takes time to figure out where styles are coming from in any framework. Here are some notes related to Vuetify.

Avoid accidentally duplicating styles

It's irritatingly easy to accidentally duplicate your styles many times when loading CSS into a framework like Vuetify/Nuxt. Part of the reason for this is that the abstraction can make it difficult to determine how your styles are loaded. Some general rules of thumb:

1. Distinguish functions/mixins/variables files from CSS style rule files.

2. Load global functions/mixins/variables files as often as you want — they can be prepended to all of your components via Webpack's sass-loader prependData/additionalData (depending on version) option. The Vuetify Nuxt module automatically maps customVariables to additionalData in the loading process. There are no side effects in appending these files multiple times unless you have /* Comments defined this way */.

3. Global CSS styles rules must be loaded one time — this can be tricky depending on the entry point. Many examples require them as part of the Vuetify plugin setup, but global styles may need to be required in a different location (such as the css property in the Nuxt config).

Vuetify's architecture

File	Type	Description	Prints rules?
components	Rules		✔️
elements	Rules	Defines various global rules such as blockquotes, headings, and application typography	✔️
generic	Rules	Defines local mixins and prints rules related to colors, animations/transitions, elevation, etc.	✔️
settings	Variables	Defines variables related to color, themes, elevation, etc.	⛔
tools	Mixins	Defines mixins and functions related to color, elevation, etc.	⛔
utilities	Rules	Defines various global rules for breakpoint displays, screen reader displays, etc.	✔️
main.sass	Rules	Combines all rules	✔️
styles.sass	Variables/Mixins	Combines all variables ("settings") and mixins ("tools")	⛔

Example

In the past I have attempted to import files like _typography and @extend them like so:

@import 'vuetify/src/styles/elements/_typography'

h1
  @extend .display-2

I was successful but there were side-effects from the import because these files do not house mixins, but actual styles to be printed. This can lead to unwanted duplication when you are really trying to re-use existing styles. It's probably better to either create mixins that reference the same variables or copy/paste the properties (YEAH I KNOW). If it's a mixin or a collection of variables you can import it as often as you need to reference it. This is definitely an honorary "imports can be evil" issue.

Here is an example of a custom mixin to re-create heading styles:

=op-extend-heading($name)
  @if $name == 'display-4'
    $name: 'h1'
  @else if $name  == 'display-3'
    $name: 'h2'
  @else if $name == 'display-2'
    $name: 'h3'
  @else if $name == 'display-1'
    $name: 'h4'
  @else if $name == 'headline'
    $name: 'h5'
  @else if $name == 'title'
    $name: 'h6'

  font-size: map-deep-get($headings, $name, 'size') !important
  font-weight: map-deep-get($headings, $name, 'weight')
  line-height: map-deep-get($headings, $name, 'line-height')
  letter-spacing: map-deep-get($headings, $name, 'letter-spacing') !important
  font-family: map-deep-get($headings, $name, 'font-family') !important

In use:

h1
  @media #{map-get($display-breakpoints, 'xs-only')}
    @include op-extend-heading('display-1')

This is also why I am not a fan of using the tag names as class names.

Mixins

Theme

When styling components you should ideally use the theme mixin like so:

+theme(op-component-name) using ($material)

This will apply light and dark classes to your components, which is why the Vuetify source uses it a lot. $material is the $material-light and $material-dark palettes from variables and both will be applied with use of this mixin. Doing so will make it easier to implement a light/dark theme overall.

Application styles

File	Notes
components/VApp/VApp	v-application background color and text colors
styles/utilities/_text	v-application font-weight class
styles/elements/_global	v-application font-family and line-height
styles/elements/_typography	v-application typography styles (not H1-H6 tags, only old display class names)
styles/generic/_colors	v-application text and background color-based classes

I need to dig more, but I believe other styles and CSS :root variables may get applied at runtime via JavaScript?