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

31–40 of 255 posts

Re: Why I Write CSS in JavaScript

#31

Post by scottrepreneur »

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.

Works out of the box for the most recent version of CRA, as well.

Re: Why I Write CSS in JavaScript

#32

Post by tobr »

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.

In practice, I think a lot of people have found that you can rarely do a complete overhaul of a website’s design using only CSS. Even if you could, it would be impossible to feel confident that your changes look reasonable across all uses of said CSS. So if you’re doing a big redesign you will usually have to work with logic anyway.

I think there’s truth to your second point though - reusing styles in parts of a project that does not use the same framework. Something like Tailwind CSS can be a good option then.

Re: Why I Write CSS in JavaScript

#34

Post by arethuza »

LocalPCGuy wrote: post #19

I understand the "pit of success" idea, particularly when it comes to more junior devs. But I don't necessarily agree that you need stringent processes to get most of the gains you cite from using something like SCSS or even regular CSS these days. It's really easier than ever. 1- append only? No, each module/feature/widget gets its own CSS file, imported to the main app CSS file. Delete the widget? Delete the file.…

In case anyone else was wondering what BEM is:

http://getbem.com/

Re: Why I Write CSS in JavaScript

#35

Post by daniel_warner »

mxstbr wrote: post #2

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

Your reasons sound similar to those given for standardizing on in-line styles as much as possible. Both methods are ways to subvert or work around the cascade. I would like to hear from you why you think the cascade works the way it does, and what aspects should be preserved so as to not 'throw the baby out with the bathwater' while adopting these new methods. Thank you!

Re: Why I Write CSS in JavaScript

#36

Post by bastawhiz »

CiPHPerCoder wrote: post #3
mxstbr wrote: post #2

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

How do you plan to accommodate NoScript users?

It doesn't really matter how the JS components are styled if NoScript users aren't loading JS, though I assume you know that and are just trying to make a point that sites shouldn't be using JavaScript.

Re: Why I Write CSS in JavaScript

#37

Post by madeofpalk »

osrec wrote: post #7
CiPHPerCoder wrote: post #3

Earlier quoted context omitted.

How do you plan to accommodate NoScript users?

I know this will be unpopular, but after a certain point, noscript users just get a bad experience and that can't be helped. If a developer wants to provide a rich experience, then there will always be certain platform requirements. Without them, you will have a lacklustre experience. It's like saying "I want to have all the whizzy functionality of your app, but I want to access it using a standard, run of the mill,…

noscript users certainly signed up for a subpar internet experience, but its not just them that should be thought about.

Slow internet connections are a reason to think about the experience when loading JS is slow and/or failed. It's not just 'poor people' who have slow internet - 'rich people' on inflight wifi or on the internet on the train can result in things not loading.

Re: Why I Write CSS in JavaScript

#38

Post by dictum »

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'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)

Re: Why I Write CSS in JavaScript

#39

Post by jakelazaroff »

denysonique wrote: post #11

While Styled Components, Styled JSX or Linaria (which doesn't require a JS runtime for production) are nice solutions, the fact that I can no longer use the colour picker and other tools to live edit CSS from the styles pane in the Elements tab in Chrome Dev Tools, sometimes makes me want to go back to plain CSS to get this functionality back.

You can! I do this all the time.

Re: Why I Write CSS in JavaScript

#40

Post by maaaats »

I've been using elm-css on a project lately. Pretty cool with typesafe CSS. Also inline, but since everything is functions it's easy to compose/reuse as well when needed. (Compared to the string templating shown in this article)
Post reply on HN