5 ms·
Everytime I see Tailwind/Tachyons/Functional CSS at the top of HN I die a little inside. I've said it before and I'll say it again: if you actually like this ki
by jacamat 8y ago
Everytime I see Tailwind/Tachyons/Functional CSS at the top of HN I die a little inside. I've said it before and I'll say it again: if you actually like this kind of CSS, you probably don't work on large websites. And when you do, the reason people hate it so much will become abundantly clear to you.
Functional CSS makes for an unscaleable, inconsistent, unmaintainable dumpster fire of styles that is objectively worse than just writing regular CSS.
<sarcasm>
But it's convenient, right? So who cares! AirBnB, Facebook, Walmart, Github, and Twitter are all probably wrong anyway.
</sarcasm>
- Giorgi 8y agoI have hard time understanding what are you talking about? github and twitter have their own framework, what's bad with that? why would not it scale?
- adamwathan 8y agoGitHub has been switching to functional CSS over the last couple of years: https://primer.style/ https://primer.style/ I interviewed Diana Mounter who leads their design systems team about this a while back: http://www.fullstackradio.com/75 http://www.fullstackradio.com/75
- jacamat 8y agoI'll definitely respond to this more later. ;)
- syropian 8y agoSmall snippet pulled right from the GitHub dashboard source code - https://d.pr/i/j99Y4C https://d.pr/i/j99Y4C Check your facts ;)
- Isofarro 8y agoAtomic CSS was used on Yahoo sites, since the Marissa Meyer level. Apparently on a few of their properties. Hard to assess whether it was a failure or not. Considering their websites were a negative asset, I doubt the use of Atomic CSS was a major component of that, there were definitely bigger problems.
- adamwathan 8y agoThese are the CSSStats.com stats for the companies you mentioned: Airbnb (332kb, 54 text colors, 72 background colors, 48 font sizes): https://cssstats.com/stats?url=http%3A%2F%2Fairbnb.com&ua=Browser%20Default https://cssstats.com/stats?url=http%3A%2F%2Fairbnb.com&ua=Br... Walmart (178kb, 32 text colors, 22 background colors, 64 font sizes): https://cssstats.com/stats?url=http%3A%2F%2Fwalmart.com&ua=Browser%20Default https://cssstats.com/stats?url=http%3A%2F%2Fwalmart.com&ua=B... Twitter (630kb, 36 text colors, 50 background colors, 46 font sizes): https://cssstats.com/stats?url=http%3A%2F%2Ftwitter.com&name=Twitter https://cssstats.com/stats?url=http%3A%2F%2Ftwitter.com&name... GitHub (658kb, 157 text colors, 141 background colors, 55 font sizes): https://cssstats.com/stats?url=http%3A%2F%2Fgithub.com&name=GitHub https://cssstats.com/stats?url=http%3A%2F%2Fgithub.com&name=... These are not stylesheets I want to emulate. As I mentioned in my other reply, GitHub is actively moving towards a more utility-based approach to solve this problem. Compare this to a fairly large app where the CSS and markup were completely rewritten using Tailwind by a friend of mine recently: https://cssstats.com/stats?link=https%3A%2F%2Fapp.churchsocial.com%2Fcss%2Fapp.css https://cssstats.com/stats?link=https%3A%2F%2Fapp.churchsoci... 41kb (8.1kb gzipped), 15 text colors, 44 background colors, 22 font sizes. Pretty good, no?
- necolas 8y agoTwitter PWA (30 KB, 11 colors, 32 bg colors, 15 font sizes): https://cssstats.com/stats?link=https%3A%2F%2Fgist.githubusercontent.com%2Fnecolas%2F5b1944d36dcf7443bf0ef367153d8434%2Fraw%2F32c905204855703f3364ebbebeaaa74f79d8a199%2Fstyles.css https://cssstats.com/stats?link=https%3A%2F%2Fgist.githubuse... This is all the CSS needed to render almost the entire app from mobile to desktop widths, in both light and night themes. The "utility CSS" is generated by a framework and not something engineers have to be concerned with when writing components.
- necolas 8y agoUpdated link https://cssstats.com/stats?link=https%3A%2F%2Fgist.githubusercontent.com%2Fnecolas%2F2a174ef5884ae8b24c48180093f61e35%2Fraw%2Fd3362647163d826d738c327339ab434b5070f14c%2Fpwa.css https://cssstats.com/stats?link=https%3A%2F%2Fgist.githubuse...