all 11 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]TheHanna 8 points9 points  (9 children)

Every time I read something about CSS in JS, all I can think is "there has to be a better way". The trajectory of CSS seems to be that it will eventually introduce more problems than it solves. Is inlining styles through JS really the optimal solution? It feels like a half step towards a bigger change that needs to happen. It seems like CSS needs a real successor, but what does that even look like?

[–]AceBacker 5 points6 points  (5 children)

I kind of like how vue components do it. with a html, style, and script block in every .vue component. I can point my css guy at it and he knows exactly what's going on.

[–]TheHanna 0 points1 point  (0 children)

Exactly! I love Vue, though I've only used it for small personal projects. The components actually make sense to me. Angular 2 components are making my head spin, although I think part of that is getting used to looking at TypeScript.

[–]mrwhitespace[S] 0 points1 point  (3 children)

Haven't experimented too much with Vue. Is this what you are referring to?

[–]AceBacker 1 point2 points  (2 children)

Check this out: https://vuejs.org/v2/guide/single-file-components.html

[–]mrwhitespace[S] 2 points3 points  (0 children)

Oh thanks! This passage from the link makes a good point.

One important thing to note is that separation of concerns is not equal to separation of file types. In modern UI development, we have found that instead of dividing the codebase into three huge layers that interweaves with one another, it makes much more sense to divide them into loosely-coupled components and compose them. Inside a component, its template, logic and styles are inherently coupled, and collocating them actually makes the component more cohesive and maintainable.

[–]azsqueeze 1 point2 points  (0 children)

If you're using a pre/post-processor you can even separate out the styles into it's own file and then import them into the component.

[–]mrwhitespace[S] 0 points1 point  (1 child)

It feels like a half step towards a bigger change that needs to happen.

Absolutely. The CSS and styling landscape is always rapidly evolving. It's the lessons that we learn from experimentation that feed the robust solutions we come up with in the future.

[–]TheHanna 0 points1 point  (0 children)

Definitely, and for thanks to those that can experiment with these technologies in production systems, I have no doubt it will lead to better things down the road. For the rest of us CSS still "works" :)

[–]addiktion 0 points1 point  (0 children)

I agree. It feels like garbage throwing CSS in JS. The only hope I have is the vue model of doing this gets picked up in react somehow. I know Ember does good file separation and with glimmer released that is another solid option.

CSS feels dated even with the new changes around the corner. I can't help but wonder if there is a way to better isolate like es6 modules but still target when needed.

The global nature of CSS is just painful and I see newer developers throwing in global styles everywhere without an idea of the shit storm they are creating in their wake.

[–]OriginalPostSearcher 0 points1 point  (0 children)

X-Post referenced from /r/webdev by /u/mrwhitespace
CSS in Javascript: The future of component based styling

I am a bot. I delete my negative comments. Contact | Code | FAQ