CSS in JavaScript is like replacing a broken screwdriver with your favorite hammer

Re:CSS in JavaScript is like replacing a broken screwdriver ... by ddoolin on Monday September 11, 2017 @11:16AM (#15219110)

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.

[ Parent | on HN ]

Re:CSS in JavaScript is like replacing a broken screwdriver ... by codegeek on Monday September 11, 2017 @11:40AM (#15219334)

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.

[ Parent | on HN ]

Re:CSS in JavaScript is like replacing a broken screwdriver ... by madeofpalk on Monday September 11, 2017 @01:18PM (#15220208)

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

[ Parent | on HN ]

Re:CSS in JavaScript is like replacing a broken screwdriver ... by orillian on Monday September 11, 2017 @02:09PM (#15220696)

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

[ Parent | on HN ]

Re:CSS in JavaScript is like replacing a broken screwdriver ... by Barreljack on Monday September 11, 2017 @11:41AM (#15219342)

Agreed. I really enjoy the way Vue handles this.

[ Parent | on HN ]

Re:CSS in JavaScript is like replacing a broken screwdriver ... by talmand on Monday September 11, 2017 @12:21PM (#15219656)

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.

[ Parent | on HN ]

Re:CSS in JavaScript is like replacing a broken screwdriver ... by ddoolin on Monday September 11, 2017 @02:25PM (#15220830)

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.

[ Parent | on HN ]

Re:CSS in JavaScript is like replacing a broken screwdriver ... by werber on Monday September 11, 2017 @12:14PM (#15219597)

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.

[ Parent | on HN ]

Re:CSS in JavaScript is like replacing a broken screwdriver ... by waibelp on Monday September 11, 2017 @12:25PM (#15219697)

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

[ Parent | on HN ]

Re:CSS in JavaScript is like replacing a broken screwdriver ... by madeofpalk on Monday September 11, 2017 @01:20PM (#15220231)

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.

[ Parent | on HN ]

Re:CSS in JavaScript is like replacing a broken screwdriver ... by v512 on Monday September 11, 2017 @12:30PM (#15219749)

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.

[ Parent | on HN ]

Re:CSS in JavaScript is like replacing a broken screwdriver ... by pier25 on Monday September 11, 2017 @01:15PM (#15220190)

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.

[ Parent | on HN ]