An interesting topic when doing Web Development and nowadays not only Web Development is choosing how your Application will be styled. In today's p...
For further actions, you may consider blocking this person and/or reporting abuse
I much prefer Scss stylesheets to css in JS. You get basically everything you could need out of Javascript, but with better reusability and performance. Additionally, it keeps the cascade which is good for learning and can easily be used to your advantage.
I see Tailwind as more of a problem in search of an audience than a solution in search of a problem.
I love styled-components in react!
The problems with non-semantic frameworks are pretty well-documented. Having a set of utility classes like
big 10pxpadding widemargin blacktext otherspecificthingin your HTML is not better than using inline styles. If your website has - for example - a Christmas takeover where things are restyled to be red and green and festive, you're in for a long, boring job rewriting all your components.In my current use case I'm mixing both approaches, using Cascading for the things that can be cascaded and CSS in JS for the things that are capable for that. Let's see where it will end. I will keep you guys posted. :)
I understand how CSS in JS could be useful when creating an app like a spreadsheet or something - the same way I understand why people like non-semantic "utility" frameworks.
For use in general websites and apps I think it has no real redeeming qualities, because of the cascade. It's not just noise, it's like throwing away the entire point of stylesheets.
I can't think of any time I'd want to take a component and drop it onto another site with a completely different appearance and not want to style it to fit in. With CSS, and with sensible semantics, that's no issue; with CSS-in-JS it's more duplication of effort.
It also reduces your ability to drop the same component into different parts of the site. A component fitting in the header might display differently to one in a sidebar, for instance, and might behave differently when the browser resized or changed orientation or switched fro LTR to RTL reading directions. Managing that in JS is going to be a pain in the butt, but I expect people will come out with some over-engineered solution if they haven't already in order to reinvent the wheel.
I know what you're saying. My distaste for Tailwind, however, isn't an "initial" reaction, and it's not specific to Tailwind. I've been aware of variations on these ideas for years, and think they're a very bad direction for development to go.
I'm drawing the comparison between utility classes in general and the idea of CSS-in-JS, because I think that it's a similar fad, and that - barring some kind of AI revolution - it's going to cause a lot more problems as time goes by.
Maybe a better example would be comparing either to the use of tables for layout. You can see pros and cons for that, too - but people aren't making the case for switching to tables in 2020.
Without styled system like Chakra UI or Rebass, I don't really like CSS-in-JS much. I prefer PostCSS with Tailwind.
Didn't know about Rebass. Really cool component libraries! Thanks for sharing!
In my current use case I'm mixing both approaches, using Cascading for the things that can be cascaded and CSS in JS for the things that are capable for that.
I'm fairly sure I'm never going to like Tailwind. When I say it's in search of an audience, I mean it pretty much exists because it was low hanging fruit, a quick way to make something popular. People like it, yes, but people like mayonnaise too, so people can be wrong.
CSS in JS when using CSS syntax, and injection of style tags, as in styled components, is great to take advantage of components hiding implementation details. When using JSX for example, the style becomes part of the JSX declaration!
As a consumer of a stylesheet API you gain tremendously over having to learn a map (class -> node) where, for instance, all the decisions made by the creator matter. Of course one can churn out wrapped components with already assigned class names, but that's just duplication of both CSS and JSX.
The low performance of CSS in JS is a major issue for big applications, especially for mobile devices. Let's not also forget that today, more of half the internet traffic comes from mobiles devices.