Styles scoped by default?

[jaredreich]

Perhaps this is a conceptual question rather than an issue. I find myself writing scoped for nearly every single component I make, except maybe App. Following web component standards logic, shouldn't a component's style be scoped by default? I feel like the side effects of styles being global by default are worse than scoped by default.

Perhaps if this was implemented, a global attribute can be used in components that specifically intend to have their styles applied globally.

<style lang="scss" global></style>

Thoughts?

[v-stein]

LGTM

[znck]

I use module on every <style> element. Using scoped by default would discourage use of CSS modules (which are better than scoped style IMO).

[jaredreich]

I have never used CSS modules. How exactly is this different from scoped styles?

[znck]

https://github.com/css-modules/css-modules

[jaredreich]

Right so "A CSS Module is a CSS file in which all class names and animation names are scoped locally by default."

Again, how exactly is this different from scoped styles? Sounds like this further improves my point. I disagree that using scoped by default "discourages" anything. If one wants to use CSS modules, then by all means they should use CSS modules with the module setting.

[znck]

Descendent selector + recursive components with scoped style could be tricky.

Also, it feels like .foo-xxxx would more performant compared to .foo[_v-xxxx].

It should be your choice to use scoped or module or none.

[znck]

Making scoped default would break lots of components!

[qm3ster]

@znck do you happen to know why div[_v-xxxx] is used instead of div.v-xxxx?
Sure, .div-v-xxxx would have even better performance, but it's a less trivial rewrite.
Attribute seems like an odd choice.

[drwpow]

I have never used CSS modules. How exactly is this different from scoped styles?

@jaredreich Aside from differences in implementation, practically I’ve found scoped isn’t isolated. I ran into an issue where I was using a .container class in both Component A and B, nested inside each other. I found that 2 different elements in different components got the same data-xxxx attribute applied to both, because the .container class more-or-less was “owned” by the parent.

In other words, scoped forces you to use unique class names across multiple components, among your entire nested component tree, which IMO invalidates it as a sensible option. Whether this is a bug or design decision I’m not sure, but for my purposes I could only use module.

[jaredreich]

@znck what's an example of how "making scoped default would break lots of components"?

[qm3ster]

@jaredreich Any normal (not scoped) component that either:

1. Gets styled with styles from outside (applies classes that aren't declared global) (normal)
2. Wishes to style other things in the project (crazy, but possibly happening somewhere)

will change its behavior.

Anyhow, making it by default adds extra indirection and makes picking up .vue harder.
You want to use a scoped style? Great, I hope it keeps being developed. But the default for newcomers should be classically behaving css, just like I don't advocate for setting the default <template lang= to pug
Maybe a per-project setting for both is in order?

[jaredreich]

Thanks for the information all, guess the majority disagrees and has good points, closing!

[qm3ster]

I just realized that we already have this ungodly power, in a way, using loaders option on the webpack loader initialization as following:

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          html: 'WHATEVER PUG LOADER IS, maybe impossible because https://github.com/vuejs/vue-loader/blob/8f9524ae2996cb38c49698a645c26b860ed844e0/lib/template-compiler/preprocessor.js',
          css: 'stylus-loader'
        }
      }
    }
  ]
}

Note, that this will shadow the default lang names instead of changing the default, so you would have to define your own "raw-html" lang and such if you wished to use it in some places.
Also as I said above this probably doesn't work with templates since they are pulled through consolidate and not webpack loaders.

[trusktr]

Is there a way to specify project defaults yet? I'd like to avoid writing lang="stylus" in every component.