prevent tags from being used without classes in scoped style definitions

Observed behavior

In some places in the codebase, we do things like

<template>
  <div>
    <h2>Title</h2>
    <p>paragraph</p>
  </div>
</template>

<style scoped>
  h2 {
    margin-top: 8px;
  }
</style>

This has a few issues:

1. According to the vue docs, using tags inside scoped style blocks “will be many times slower”
2. The DOM structure is coupled to the styling. For example, turning h2 to h3 would require changes on multiple lines

Expected behavior

We should add a stylelint rule to prevent this behavior, and update all existing instances to either use an inline style or a class.

Inline style:

<template>
  <div>
    <h2 style="margin-top: 8px;">Title</h2>
    <p>paragraph</p>
  </div>
</template>

Class:

<template>
  <div>
    <h2 class="title">Title</h2>
    <p>paragraph</p>
  </div>
</template>

<style scoped>
  .title {
    margin-top: 8px;
  }
</style>

User-facing consequences

• slower render performance
• code maintainability

Context

0.13.x

[indirectlylit]

Hi @rationality6 thanks for this! Yes please, let’s move forward with this.

In general there will be two options. You can use the following heuristic:

Does the style have more than one property?

• If yes, use a class with some simple, meaningful name (e.g. <h1 class="header">)
• If no, convert to an inline style in the template (e.g. <h1 style="margin: 0">)

We should never use ID-based styles.

[bjester]

This is guidance from the official vue docs: https://vue-loader.vuejs.org/guide/scoped-css.html#also-keep-in-mind

Yeah I saw that but I think it relies on the condition “will be many times slower when scoped (i.e. when combined with an attribute selector)”. From what I see, class selectors become combined with an attribute selector too.

Unfortunately the link “Here’s a playground where you can test the differences yourself” is broken…

Hmm if you scroll down, the the names of each test are links and launch each test which alerts the time it takes. I observed similar results to the table, although much slower for both.

Test 4 Test 20