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.
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.
-- 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.