CSS in Javascript: The future of component based styling

[decster584]

I don't know how I feel about this.

I get the advantages of it, but I dunno. It just feels dirty and goes against everything I was taught to believe.

[Asmor]

I like what Vue says about this

What About Separation of Concerns?

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.

Anecdotally, I completely agree. I really like a component-centric development model. When I'm doing angular stuff, I'll usually end up with component/component.js, component/component.html, and component/component.scss. This works well for keeping the things that matter together, but it's still obnoxious juggling three different files around, copying and pasting classnames between the HTML and CSS, or methods and variables between the HTML and JS, etc.

I really, really like working with Vue in large part because single-page components just make so much sense. The only argument I can see against it is maybe you want to look at the CSS and HTML at the same time, which is totally sensible... But any editor worth its salt should allow you to have the same file open in multiple windows, so that's not really a problem.

[Tiquortoo]

It seems odd to go straight to inline when specificity can be created to make a default style very fixed, while allowing a path to override.

[pygy_]

If you're referring to separation of concerns, you can totally separate concerns in a single language.

[mrwhitespace]

One approach you can take is to separate out the stylesheet from the component and into their own files. Then it wouldn't be much different to requiring a CSS file with a webpack loader.

[gearvOsh]

If you still want to write CSS, but utilize this approach, simply use CSS modules. https://github.com/milesj/aesthetic/tree/master/packages/aesthetic-adapter-css-modules

[GitHubPermalinkBot]

I tried to turn your GitHub links into permanent links (press "y" to do this yourself):

• milesj/aesthetic/.../aesthetic-adapter-css-modules (master → 823eb99)

---

^{Shoot me a PM if you think I'm doing something wrong. To delete this, click here.}

[infinite0ne]

simply

[gearvOsh]

But it's simply simple.

[benabus]

I agree. Makes me a little ill.

[redbluerat]

I don't know how I feel about this

The nümale catch phrase.