[prograhammer]

I'm completely dumbfounded how everyone has missed that the simple problem of scoping in CSS is naming.

I work with Vue and Stylus. You already have to give your JS components a name. Your styles can use that name. I don't need my styles inside the .vue files. I just keep them in a separate file: /styles/components/foo.styl. At the top of your Stylus file you give the name of the component (.foo) once. Even further, you can prefix it (.my-foo). That's the namespace. Then all your styles can be written under that with a methodology like BEM. Now you get scoping AND you can still load up your variables/settings first, via a main.styl. Otherwise, if you put styles in your .vue files then you need to remember to import variables each time. Also it becomes an issue to discern which classes in the component are from you and which are from a vendor (ie. Bulma, Boostrap). Then think about libraries. You can't work with styles that are in the vendor's .vue files (without adding more specificity). I wish that library would have provided me its separate SCSS/Stylus styles instead. Am I missing something here Rich? (btw, love your work in Rollup!)

[rich_harris]

I personally prefer the co-location of styles and markup, because it means I'm context-switching a lot less. And it's essential that the compiler can analyze the styles in the context of the markup to which it applies in order to do things like dead code elimination.

But support for external files and preprocessors is on our roadmap.

[arxpoetica]

I have setup my own methodology for loading external files and preprocessing (ala postcss and whatnot) which works to my preference. As well, one can still namespace to match. Win-win.

[prograhammer]

Alright, this discussion got me thinking. I think this is the way to go now. The bullet list:

-- All separate style files (for non-vue-component styling, such as variables, functions, and CSS-only components) use BEM. All styles inside Vue components also use BEM. Consistency!

-- Use Stylus in the Vue components. Vue-loader supports preprocessors. Why a preprocessor? Mainly for theming. Why Stylus? It’s just so beautiful.

-- Using BEM inside vue components means I don’t have to worry about collisions (with global, or children, or vendors).

-- Mental context-switching is reduced now since component styling lives inside the .vue files.

-- I don’t mind using #app to override vendor component styling.

-- Better scenario for Dead Code Elimination to work with when putting styles in .vue files.

-- I don’t mind importing variables/functions/theming to each component until this is solved in the future. Plus, I could create a bootstrap.styl (not to be confused with Twitter Bootstrap) to import everything I need so I’m only adding a single file to each Vue component. Any changes made are made within boostrap.styl and Vue components would not need to be updated.

[prograhammer]

Looks like Stylus has a way to add all your variables/functions to all modules: https://github.com/shama/stylus-loader#using-nib-with-stylus