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

211–220 of 255 posts

Re: Why I Write CSS in JavaScript

#211

Post by tracker1 »

LaserToy wrote: post #129
LocalPCGuy wrote: post #110

Earlier quoted context omitted.

> I never was able to learn how the damn thing works People not taking the time to learn is not a reason to throw an entire building block of the web out. (Yes, I realize there are a lot of people who know CSS and still choose CSS-in-JS, but I'm specifically referencing the point re: not learning CSS.)

I didn’t say I did not spend time, I said - could not. Same applies for most people in the team. I think we had coupe folks who were spending a lot of their time explaining CSS. My theory is that CSS was something that was treated as a task. Make a lot of client/server side development and then make these freaking lines align perfectly. So, most of time engineers were avoiding styles, applying them was the most tedio…

And these are the same types who take on JS tasks without really knowing JS (or the DOM), writing what is often layers of garbage JS with extensions, addons and jQuery in what could have been 5-10 lines of JS.

I don't claim to be an expert on the DOM, and I might be close to expert in JS itself... there's something to be said for knowing at least enough to know what is possible and what to look for BEFORE working around a problem and introducing a bunch of crap.

I am one of those that knows CSS well enough and still chooses JSS, as imho it's easier to coordinate a set of theme values and configuration across a project. IMHO react-jss and material-ui do things VERY right in terms of what works for not only components, but a larger project.

Re: Why I Write CSS in JavaScript

#212

Post by tracker1 »

antoineMoPa wrote: post #25

The down-side with this is very high coupling between UI logic and style. If style becomes out of fashion, you have to modify files that contain logic. If framework (react/vue) becomes out of fashion, keeping styles will be difficult. The other down-side is thousands of web developers having to re-learn CSS and the tooling behind your app instead of just changing CSS files.

If you're building a complex UI that uses components as a cohesive library, there will always be some coupling. Even with the classic bootstrap example, once you've built an application and introduced any number of third party components, it gets messy to change things.

Better to have a cohesive set of theme/rules and get them to work together as best possible. I've been a big fan of material-ui and react-jss and is imho about the best option I've used in over two decades of working on web based applications.

Re: Why I Write CSS in JavaScript

#213

Post by jandrese »

gmanley wrote: post #207
jandrese wrote: post #186

Earlier quoted context omitted.

People implement Doom in CSS. It's clearly more than just some style notes for the browser.

I think you may be confusing that with something else. You can't create a complex game with just CSS. I'd love to be wrong but provide a link.

https://codepen.io/chrissimmons/pen/bqBabr

It's off brand, but the technology is roughly the same.

Another game: https://thenextweb.com/dd/2018/05/08/some-madman-built-a-mar...

Re: Why I Write CSS in JavaScript

#214

Post by gmanley »

jandrese wrote: post #213
gmanley wrote: post #207

Earlier quoted context omitted.

I think you may be confusing that with something else. You can't create a complex game with just CSS. I'd love to be wrong but provide a link.

https://codepen.io/chrissimmons/pen/bqBabr It's off brand, but the technology is roughly the same. Another game: https://thenextweb.com/dd/2018/05/08/some-madman-built-a-mar...

The first one looks like a big part of the functionality is from the JavaScript file. It's crashing my iPhone so I'm having trouble digging into it too much. The second link, however, does seem to be done in pure css. Impressive! Thank you for the links. I stand corrected.

Re: Why I Write CSS in JavaScript

#215

Post by crooked-v »

Const-me wrote: post #153
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…

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:

You can get basically the same thing from rebass in JS:

  
    Box
It uses a CSS-in-JS library under the hood to translate that into a CSS class for each unique combination of styling props.

Re: Why I Write CSS in JavaScript

#217

Post by exogen »

leerob wrote: post #183
jakelazaroff wrote: post #174

Earlier quoted context omitted.

Am I misinterpreting something? In my app that uses CSS-in-JS, if I go to the "Elements" tab of my browser developer tools and select an element, I have the option to inspect, add, remove and change styles — including using the color picker and bézier curve editor — and have it reflected live on the page.

When my styled-components app is in prod, the styles are non-editable. When developing, I can use Chrome Dev Tools. On prod, I have to copy paste. Maybe I'm doing something wrong?

I believe this is a result of it using the "CSSOM" browser APIs for speed in production. Unfortunately, browsers apparently haven't figured out how to make such styles editable yet.

It's definitely a limitation of certain CSS-in-JS implementations, but unfortunately one that inherently comes from "using the platform."

Re: Why I Write CSS in JavaScript

#218

Post by exogen »

zelphirkalt wrote: post #197
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…

This is sad. All because people are not able to think of one simple prefix and stick with it when naming CSS classes. How hard can it be? Just use some part or abbreviation of the company name and be done with it. Or better yet: Let third party do that. I always hated that, when someone used Bootstrap on a website and Bootstrap f'ed up all future styling, by assuming it was the only one player in the game. So stupid.…

I'm happy that just prefixing things is working for you. I don't typically have problems on smaller projects.

But I've also been writing CSS since 1997. I've deployed CSS to sites like walmart.com, nfl.com, mlb.com, starbucks.com, twitch.tv, etc. Some of these sites have a lot of third-party widgets on them. I can confidently say that the (multiple) issues with CSS are not a "just do " type of problem.

Re: Why I Write CSS in JavaScript

#219

Post by pvorb »

YorickPeterse wrote: post #99
black-alert wrote: post #98

Earlier quoted context omitted.

> Why don't we have more : "We tried it, it is the worst, especially for products which lifespan is more than two months" Because that last sentence is just rubbish, CSS in JS is great. I'm using it for large projects already 4 years. If your experience is bad you must be doing something wrong. CSS in JS is almost the same as working with (S)CSS, except for extra power to control dynamic elements without having to ju…

Clearly when somebody has a bad experience, they are just doing it wrong. Or perhaps there's something to it, and the idea is not as good as one might claim it to be.

Or they are solving other problems and that's the reason why one believes a solution is bad and another one thinks it's the best.

Re: Why I Write CSS in JavaScript

#220

Post by pvorb »

I wonder what impact CSS-in-JS has on rendering performance and code size.

I bet that browsers are very efficient at parsing and applying CSS directives to elements. Parsing and executing the JS and additional DOM manipulations could have a massive negative impact on performance, at least intuitively. Does anybody know of a performance benchmark that compares CSS-in-JS to regular CSS?

Post reply on HN