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

91–100 of 255 posts

Re: Why I Write CSS in JavaScript

#91

Post by dmitriid »

nek4life wrote: post #90
dmitriid wrote: post #76

Earlier quoted context omitted.

> a language flaw in the React concept. What language are you talking about? React is Javascript > Look at this beauty for comparison Meanwhile Vue is neither HTML [1], nor strictly speaking CSS [1], and has a very wierd concept of how objects work in JS. [1] It's a templating system with its own rules and mini-DSLs that ends up being compiled into JS.

> and has a very wierd concept of how objects work in JS. What is so weird about it? I personally find Vue vastly more approachable than React is, especially once you have to start writing all the plumbing to get all the libraries you need to go along with it to write a real world app. > ] It's a templating system with its own rules and mini-DSLs that ends up being compiled into JS. Vue has the option to use Webpack…

> What is so weird about it?

I go a bit in depth here: https://news.ycombinator.com/item?id=17471199

> Vue has the option to use Webpack to compile html compliant templates to JS functions just like JSX

Vue's templates are not HTML-compliant. They are just that: templates. That get compiled to JS anyway.

> JSX (which BTW is not JavaScript and not HTML compliant and is also a separate concept that needs to be learned as well.)

JSX is a very thin DSL on top of Javascript. It's just function calls: https://reactjs.org/docs/react-without-jsx.html

Once you understand that, everything falls into place.

> CSS is just another add-on through Webpack when using Single File Components.

It's not a webpack add-on. It's a part of Vue's templating engine that is essentially CSS-in-JS, they just give you a template to work in.

Re: Why I Write CSS in JavaScript

#92

Post by douglaswlance »

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

Vue's single file components are incredible. They're so great for the developer experience, which is Vue's entire ethos.

Add in Tailwind utility classes and you've got a great design system that can be built on the fly with consistent standards.

Re: Why I Write CSS in JavaScript

#93

Post by LocalPCGuy »

dmitriid wrote: post #71
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.…

> using something like SCSS > adopt a simple naming structure and suddenly > I still don't see CSS-in-JS as more of a bandaid for people that like CSS Why are SCSS or poor-man's-substitute-for-modularity in the form of naming conventions fine, and why JS-in-CSS is bad?

Because one is an extension of the underlying technology, and the other one changes the technology out altogether. I still believe CSS is a vital part of the web ecosystem, and we should work to fix the underlying issues rather than just try to work around it via JS.

Re: Why I Write CSS in JavaScript

#95

Post by LocalPCGuy »

ravenstine wrote: post #56
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.…

> 2- Specificity issues? Never use IDs, stop using tag names and simple classes and adopt a simple naming structure I have one exception to that in my own work, which is to only ever use IDs for styles that affect the layout of a block/component on a specific page. This makes sense since parts of a page layout are usually very specific and not that dynamic(in which case class names might be more appropriate). At the…

That's an interesting use case for IDs. I'll have to keep that in mind.

Re: Why I Write CSS in JavaScript

#96

Post by overgard »

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.

Ok, but, the average startup web dev stays at a company for like two years? And then the thing eventually gets rewritten anyway in the latest flavor of the week, because nobody is using the same tools as two years ago.

I guess the concern for longevity most devs have is amusing when most software, if its not like systems level stuff, or problems most devs dont want to solve, tends to get disposed pretty frequently.

By the way, most of the software that actually sticks around was written in C and generally solves a problem most people wont tackle. Like zlib or sqlite or nginx or the linux kernel. You can almost pretty much judge the longevity of a piece of software based on how hard the problem it tackles is. Like encryption or compression? Those libraries are going to be around forever, because how many coders do you know that can write a semi compitent encryption library? And how manu coders can write a templating engine?

Like most of web dev is throwaway code. It just is. Arguments based on like "will they be able to restyle it in 10 years?" Well are they even going to be around?

Re: Why I Write CSS in JavaScript

#97

Post by zeveb »

pmlnr wrote: post #66

> Why I Write CSS in JavaScript tl;dr because it's convenient. It's also redundant, goes completely against the features of CSS (the cascading part), doesn't utilize the possibility of selectors, children, etc, ugly, and computationally heavy. But yeah, why not.

Not to mention that it doesn't work without JavaScript enabled on the client (unless he's generating CSS in server-side JavaScript). That's fine for a true web app (and web apps do have their place), but it's completely not fine for a web page, which should display just fine without JavaScript.

People should not be forced to grant you permission to execute code in order to read text & view images.

Re: Why I Write CSS in JavaScript

#98

Post by black-alert »

abderrahmane wrote: post #82
Yabood wrote: post #47

We built a relatively large social media management platform, and for one of our major features (a streams page that shows social media activities from different sources), we put a lot of our css in JS including all the logic for stream sizing/resizing and page responsiveness. I can honestly say that this approach is terrible. It is a maintenance nightmare. Even the smallest changes require a ton of time. We're now r…

Why can't we see more of these stories surfacing on the internet. All I see when I search for CSS-in-JS on google is how, CSS-in-JS is so great. Why don't we have more : "We tried it, it is the worst, especially for products which lifespan is more than two months"

> 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 juggle with classnames.

Re: Why I Write CSS in JavaScript

#99

Post by YorickPeterse »

black-alert wrote: post #98
abderrahmane wrote: post #82

Earlier quoted context omitted.

Why can't we see more of these stories surfacing on the internet. All I see when I search for CSS-in-JS on google is how, CSS-in-JS is so great. Why don't we have more : "We tried it, it is the worst, especially for products which lifespan is more than two months"

> 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.

Re: Why I Write CSS in JavaScript

#100

Post by apazzolini »

preommr wrote: post #87
cageface wrote: post #65

Earlier quoted context omitted.

You can do this with styled-components in react too. https://www.styled-components.com/

Yea, but this isn't out of the box. This is some 3rd party solution for a pretty major part of an application.

I understand your preference for frameworks, but I actually appreciate that it's not out of the box.

I'd rather have libraries focus on one thing and do it well - the Unix philosophy. This lets me compose the appropriate libraries for the problem at hand.

Post reply on HN