4 ms·
I think Vue's single-file component approach is a good solution here, allowing you to keep all three separate but in the same file with the additional option to
by ddoolin 9y ago
I think Vue's single-file component approach is a good solution here, allowing you to keep all three separate but in the same file with the additional option to keep the CSS scoped and add a preprocessor to it.
https://vuejs.org/v2/guide/single-file-components.html https://vuejs.org/v2/guide/single-file-components.html
About CSS in JS, though, it mostly just seems like a different way of getting the same thing on the page, changed only by the idea of scoping it to some component and maybe some needed flexibility when building dynamic CSS rules. I'm still not convinced any of those CSS approaches propped by the author are necessary or even necessarily that helpful. They can be confusing to developers not familiar with it and burdensome when truly not needed. I'm open to other opinions, though.
- deleted 9y ago[deleted]
- codegeek 9y agoI am really digging Vuejs and its single file components. The <style scoped> part makes it even better for me. No more searching through codebase for where the css came from vs. where the JS is coming from.
- Barreljack 9y agoAgreed. I really enjoy the way Vue handles this.
- madeofpalk 9y agoJust going to chime in with 'CSS Modules' - this approach of scoped-css generalised to use with whatever framework (but most commonly, React)
- orillian 9y agoI'm going to nth this! I really enjoy Vue's way of managing these separate but together.
- werber 9y agoI completely agree, I put global styles in my front most component and scoped ones in smaller very specific ones. It's been a really great change for my workflow.
- talmand 9y agoI too am often confused by things I'm not familiar with, but I don't blame the things for that. Although I reserve the right to blame them for other things once I am familiar with them.
- ddoolin 9y agoSnark aside, I meant as it relates to developers new to a project, it certainly increases ramp-up time and overall cognitive load, to use the author's words.
- deleted 9y ago[deleted]
- waibelp 9y agoFully agree, VueJS is great! I always asked myself why someone would need different styles in just one component and not globally: * Is there any special usecase for that kind of feature? I mean a button is a button and should always look the same (except maybe size and color)... * Aren't components always looking the same way and a simple naming/clustering-strategy like BEM is enough to be flexible to change the style of some specific component? [Edit] formatting
- v512 9y agoThere are few applications like lets say the component renders a D3 graph and all you need is style contained only to that but I tend to always place my styles globally than keeping it in each Vue file.
- madeofpalk 9y agoC++ added scoped variables and it was generally regarded as a good thing. Is a 'naming strategy' a reason not to have scoped variables in regular programming languages? Scoped CSS (like CSS Modules, or whatever Vue has) is just taking BEM, building that into the language and handling it for you automatically without having to worry about silly Block__object--modifier rules.
- pier25 9y agoI agree. I'd like to add that IMO the right approach is to use CSS that belongs to a component in the .vue file, but also keep a global CSS project for utility classes.