Hacker News Reader

Comment by ddoolin | Hacker News Reader

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

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.

View on HN

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

Just going to chime in with 'CSS Modules' - this approach of scoped-css generalised to use with whatever framework (but most commonly, React)

I'm going to nth this! I really enjoy Vue's way of managing these separate but together.

Agreed. I really enjoy the way Vue handles this.

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

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

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

Fully 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

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

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

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

Reply on news.ycombinator.com