F
Frontstuff
frontstuff.io · Personal blog · on HN since 2018
Sarah Dayan writes about front-end development, especially CSS architecture, utility-first CSS, and handling money in JavaScript.
What HN saysHN commenters cite her posts as a Tailwind-friendly rebuttal to the idea that utility classes equal inline styles, and discuss her advice on avoiding tag selectors.
20HN people shared it
10linked it in comments
16stories submitted
286story points
3 years agolast shared
2018people per year2026
Most-shared posts
- 1How to Handle Monetary Values in JavaScript7 people · 137 points · first shared 2018 · 108 comments on HN
- 2In Defense of Utility-First CSS (2018)7 people · 99 points · first shared 2018 · 62 comments on HN
- 3Utility classes aren't the same as inline styles (2021)7 people · 48 points · first shared 2021 · 53 comments on HN
- 4Build a Shopping Cart with Vue and Dinero.js1 people · 1 points · first shared 2018 · discussion on HN
- 5How I dropped 250 KB of dead CSS1 people · 1 points · first shared 2018 · discussion on HN
- 6You need to stop targeting tags in css1 people · first shared 2022
What HN people wrote when they linked it
ayushnix · 2022-09-12
I came across this blog post which talks against styling HTML tags and using classes for performance reasons and scalability. I'm not sure if the impact is noticeable on web browsers, I'd love to see an objective comparison.
https://frontstuff.io/you-need-to-stop-targeting-tags-in-css#performan…
jgalt212 · 2023-08-16
Relevant post from a Tailwind CSS endorser.
No, Utility Classes Aren't the Same As Inline Styles
https://frontstuff.io/no-utility-classes-arent-the-same-as-inline-styl…
andrewingram · 2021-07-30
There's a pretty good article by Sarah Dayan about this, which was written in response to one of the more recent Tailwind dramas on Twitter:
https://frontstuff.io/no-utility-classes-arent-the-same-as-inline-styl…
le-mark · 2021-07-30
I’m sorry but this discussion is startling. Currency calculations and accuracy are critical, why would anyone use this if there’s even a chance it gives incorrect results? Once you research the topic you’ll see why JavaScript based languages haven’t been used generally. There are solutions for currency math in js like dinero.js:
https://frontstuff.io/how-to-handle-monetary-values-in-javascript
bengtan · 2020-07-21
> It takes care of carry over values in division, i.e. consider 1 dollar divided by 3, it'll return 3 currency instances with 34, 33, 33 as the values instead of 33.3333.
I think the proper/common name for this is 'allocation', not 'division'.
For example, see https://frontstuff.io/how-to-handle-monetary-values-in-javascript and look for the subheading 'Pitfall #3: Percentage vs. allocation'.
dsego · 2020-02-15
There are libraries, such as Dinero.JS [0] or Decimal.js (handles decimals as strings). Alternatively, don't use decimals and always convert everything to cents.
[0]https://frontstuff.io/how-to-handle-monetary-values-in-javascript
jarmitage · 2018-04-16
This post by the author discusses "How to Handle Monetary Values in JavaScript" and how this library relates to that issue https://frontstuff.io/how-to-handle-monetary-values-in-javascript
sarahdayan · 2018-04-16
The amounts must be specified in cents, as floats can’t be relied upon to perform calculations. That was my #1 reason to design the library using solely integers. I wrote all about it here: https://frontstuff.io/how-to-handle-monetary-values-in-javascript
yurishimo · 2023-08-16
I don't think is accurate. While it might not be built in currently, the same is also true of something like SASS or even plain CSS.
The article describes a strategy for loading CSS in the most performant way given a variety of interconnected factors (mainly JS).
You could generate the Tailwind file, and then split it when the media queries start (they're all grouped in order of screen size) with a small bash script into separate files as a part of your build process.
You could have multiple build steps that analyze your component architecture and generate separate CSS bundles for each component. This is already done w/ most JS frameworks.
If your argument is one of the final CSS file size, that is not an issue. Tailwind only generates classes that you write in your markup. Most Tailwind bundles I have seen, are dramatically smaller than their CSS counterparts, and it makes sense when you think about how CSS is written.
Say you have a two UI elements; an article preview image and a user avatar. Say you want them to mostly display the same, but with some tweaks to the avatar to add a fancy filter on hover. Okay easy enough. Maybe you start with some sort of base mixin and then overwrite add behavior for the avatar. Over time, you add more and more tweaks to the avatar until one day, you get a call from the head of Design Department that the articles are getting their own special CSS filter. Okay, so now you extend the article. Over time the two continue to drift until…
likortera · 2022-06-12
> The commit will now contain 10000 non html structure changes to an html
It's an acceptable trade off. Nothing is perfect. In exchange you're guaranteed those changes only affect this markup, and not some other li > ul > a whatever somewhere else.
> Might as well go back to doing inline styles
No, it is not. This has been explained thousands of times anyone says "tailwind is like inline styles". You can do responsive, you're limited to a consistent subset of rules, minimal output css file, caching, etc, etc. For example, here [1] is an explanation why it is not the same, but there are thousands.
By reading your answers I deduce you've not used it yet. And this is exactly what is being discussed here. Fanatics closed inward looking people will never like it, nor anything that defies what they've been taught for years. Like religion almost. You have to try it for real to see the benefits. It is not perfect, but the net result is very positive for a lot of people as you can see from the usage statistics. Just be a bit more open minded to new tech and give it a try. At least you'll understand why it is not the same as inline styles which is a pretty basic thing you understand after 1 hour of using it.
[1] https://frontstuff.io/no-utility-classes-arent-the-same-as-inline-styl…