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

How to style React applications while the world burns around us (2020)

herbcaudill.com

Post reply on HN
Print view View original

11–17 of 17 posts

Re: How to style React applications while the world burns around us (2020)

#11

Post by danfritz »

I'm a long time material ui user and always disliked the tailwind approach of slapping classnames in a long string.

After reading the excellent article it hit me, I'm already doing the exact same :facepalm:

There is really no difference, instead of a string with classes I have a bunch of props. Time to look at tailwind again...

Re: How to style React applications while the world burns around us (2020)

#12

Post by SPBS »

TL;DR the author settled on Tailwind. I prefer Tachyons myself (less overhead). I agree that functional/atomic CSS is the way to go.

Separation Of Concerns (HTML CSS) is a LIE. Naming is one of the hardest things in computer science, and folks in the "Separation Of Concerns" camp repeatedly subject themselves to this torture by forcing themselves to come up with "semantic" names instead of just writing the damn styles and seeing which styles get repeatedly used together so that they can be condensed into a class.

Re: How to style React applications while the world burns around us (2020)

#13

Post by Mekkanox »

danfritz wrote: post #11

I'm a long time material ui user and always disliked the tailwind approach of slapping classnames in a long string. After reading the excellent article it hit me, I'm already doing the exact same :facepalm: There is really no difference, instead of a string with classes I have a bunch of props. Time to look at tailwind again...

As a long-time MUI user myself, I had the same "revelation" about Tailwind recently. Before MUI, I worked at a couple startups where we came up with our CSS franken-framework with homegrown utility classes.

It's just easier to do fast proto-typing with various Tailwind classes, and then refactor common sets of HTML tags with tailwind classes, they become reusable React (or Svelte) components.

Re: How to style React applications while the world burns around us (2020)

#15

Post by uhoh-itsmaciek »

beepbooptheory wrote: post #5

Maybe I'm the minority here, but with something like Vite I can import a css file directly into a given component's file and call it a day. Haven't worried about scoping in forever, and only need to manage a number of distinct, small, and comprehensible css files.

But they're still separate files. You still have your markup in one place and your CSS in another place, and you need to solve the hardest problem in computer science (naming things) any time you make substantial changes. I think Tailwind has some shortcomings, but I really like that styling and markup live together.

Re: How to style React applications while the world burns around us (2020)

#16

Post by CottonMcKnight »

junto wrote: post #9

When talking about CSS-in-JS I am reminded of the short lived escapade at Netscape around 1997/1998 when they launched JSSS, only be be shut out by Microsoft ignoring support for it in the increasingly dominant Internet Explorer as they favored CSS. As a result it died and disappeared. http://sunsite.uakom.sk/sunworldonline/swol-04-1997/swol-04-...

I remember JSSS, but a more vivid memory for me is LiveConnect: another Netscape-only project that was incredibly powerful and groundbreaking: it allowed Java and JavaScript code to communicate directly, e.g. plain JS could invoke the JDK and instantiate Java objects. In retrospect, also a truly terrible idea, but at the time, it was amazing.
Post reply on HN