Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Why I Write CSS in JavaScript

mxstbr.com

Post reply on HN
Print view View original

161–170 of 255 posts

Re: Why I Write CSS in JavaScript

#161

Post by woah »

iSnow wrote: post #73
mxstbr wrote: post #2

Author here, happy to respond to any questions. AMA!

Honestly, it sounds like you now have a write-only site, as you will have a hell of a time 5 years down the road when the CI changes. Personally, I find the Vue.js concept much nicer, but even given that, I define my styling in LESS (SASS...) to benefit from inheritance/mixins on the level of styling. Semantic approaches like BEM or Bulma make a lot more sense to me. It seems to me React has made a feature out of a f…

BEM is just a weird hand-cobbled way to add scoping to CSS

Re: Why I Write CSS in JavaScript

#162

Post by woah »

headcanon wrote: post #108

styled-components is not popular on HN it seems. Allow me to share my own positive experience: I have built websites in a variety of different ways, with a variety of different CSS schemes. I've worked with SASS, LESS, BEM, every major css framework, in both SPA and SSR environments. I have also built react SPAs with the above variety of CSS schemes, as well as CSS-in-JS libraries like Aphrodite and Styled Components…

I hated styled-components when I had to use it. It introduces a ton of unnecessary nesting and weird abstractions just to give devs something that is superficially similar to something they are familiar with. I keep it simple with styles in JS.

Re: Why I Write CSS in JavaScript

#163

Post by therealmarv »

cynicalreason wrote: post #75
dictum wrote: post #38

Earlier quoted context omitted.

You're right, but community support around a certain pattern often makes it the de-facto practice, so defaults matter even for a non-opinionated library (where "defaults" are essentially what tutorials and thought leaders point to)

I always thought css-modules is the de-facto practice

I know a ton of companies who did not even heard the memo about it.

Re: Why I Write CSS in JavaScript

#164

Post by raphaelrk »

I'm always surprised to find no mention of React Native in discussions around CSS in JavaScript.

They've got it figured out. Stick your styles at the bottom of your component. Vertical flexbox by default. And... that's about it. It just works beyond that point.

We liked it so much we ported our webapp from react to react-native-web. It's an amazing library. You can freely mix in regular react, but the styling story is so good with react-native-web that you'd never want to. It powers mobile.twitter.com and the author (same person who made normalize.css) recently joined Facebook, which hopefully means more development to come.

You'd have to pay me to go back to styling the web with css. It really is a hair-pulling experience.

Re: Why I Write CSS in JavaScript

#165

Post by therealmarv »

akuji1993 wrote: post #22
therealmarv wrote: post #9

In my opinion this is a workaround for a language flaw in the React concept. Look at this beauty for comparison: https://vuejs.org/v2/guide/single-file-components.html

Hm, I don't share your opinion on this matter, to be honest. You can easily avoid this in both Angular (which does it out of the box) and React by including CSS Modules ( https://github.com/css-modules/css-modules ) which, if you use create-react-app to build your projects, is a 5 minute change to your architecture. So there really is no reason to write that down as a con for React.

You can avoid many things by forcing yourself to use this and this practice. In my experience not all developers out there know what is "good" and what is "bad" practice and there are certainly many React developers out there who never heard about CSS modules. Let's say better it's not a flaw in React but a trap which can cause huge maintenance headache in my opinion.

Re: Why I Write CSS in JavaScript

#166

Post by pmlnr »

_ea1k wrote: post #154
pmlnr wrote: post #132

Earlier quoted context omitted.

CSS is not a programming language, and it shouldn't be viewed or compared as one. It has different functionalities.

That limitation is why people like the article writer often replace it with a programming language.

It's not a limitation. It's different.

Re: Why I Write CSS in JavaScript

#167

Post by Const-me »

patates wrote: post #159
Const-me wrote: post #153

Earlier quoted context omitted.

This is one of the reasons why I don’t like web development. Here’s how MS solved this in XAML, a markup language used in Windows world for GUI:

I find this extremely hard to read. I mean I can see the advantage, but there must be a better way?

I agree on readability, CSS is much more compact, and therefore easier to read. I think MS designed XAML to be mostly handled by tools not humans. Didn’t work because the tool (expression blend) is not quite good enough so humans have to deal with the source too. Experience helps for simple cases like this one but not for more complex cases like control templates or animations.

I’ve wrote the above example because it shows a possible solution to the stated problem, i.e. how to introduce namespaces for styles without also introducing a full-blown programming language with scopes and variables. The exact syntax can be replaced making it more compact and easier to read.

Compared to this mostly-immutable scoped dictionaries, way more things can potentially go wrong with code, regardless on the programming language.

Re: Why I Write CSS in JavaScript

#168

Post by jmull »

exogen wrote: post #128

Imagine a programming language that only had global variables. You have to carefully name your variables using complicated conventions in order to avoid any conflicts or unexpected behavior. Even your functions don't have local variables; there is no lexical scoping. Any function can overwrite or mutate what any other function is doing inside. There is no real encapsulation. After you've done this perfectly, your app…

I agree CSS has problems. What I don't see is how styles-in-JS addresses them.

Very typically, for a given app and page the styles of individual elements and components are not independent. They also depend the app theme, app section, layout area, component group, etc. The element fits the component. The component fits into the section, the section fits into the page. The specific relationships in a particular case are different of course. Styles are visual and the idea that a component on a page has nothing visually to do with the rest of the page is wrong.

The typical scoping rules of programming languages doesn't fit that well here.

To the extent some styling solution encourages you to treat styles that are dependent as independent, that's not a good or useful thing.

Re: Why I Write CSS in JavaScript

#169

Post by eleclady »

exogen wrote: post #128

Imagine a programming language that only had global variables. You have to carefully name your variables using complicated conventions in order to avoid any conflicts or unexpected behavior. Even your functions don't have local variables; there is no lexical scoping. Any function can overwrite or mutate what any other function is doing inside. There is no real encapsulation. After you've done this perfectly, your app…

On the flip side, after using CSS in large projects for years with many, many third party libraries, I've never once felt this urge... Rarely had any problems. At least none that the effort of styling everything in JS would merit!

Re: Why I Write CSS in JavaScript

#170

Post by cbdumas »

I got to web development pretty late (circa 2015) so my perspective may be skewed but CSS in JS seems much more natural to me than separating markup from style and then linking them up later with global class names.

It reminds me of when I was in college learning C where all of your code is just dumped into one namespace, and then later learning Python (or basically any other modern language) with actual modules and namespaces. After seeing it done that way it just makes no sense that it would ever be done the old way again.

Post reply on HN