[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