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