The "most Hated" CSS Feature: Cos() and Sin()
Key topics
The article discusses the CSS `cos()` and `sin()` features, sparking a discussion about their usefulness and the challenges of implementing trigonometry in CSS, as well as nostalgia and varying levels of comfort with mathematical concepts.
Snapshot generated from the HN discussion
Discussion Activity
Very active discussionFirst comment
2h
Peak period
27
3-6h
Avg / period
7.5
Based on 75 loaded comments
Key moments
- 01Story posted
Sep 16, 2025 at 4:10 PM EDT
4 months ago
Step 01 - 02First comment
Sep 16, 2025 at 6:15 PM EDT
2h after posting
Step 02 - 03Peak activity
27 comments in 3-6h
Hottest window of the conversation
Step 03 - 04Latest activity
Sep 18, 2025 at 2:20 AM EDT
4 months ago
Step 04
Generating AI Summary...
Analyzing up to 500 comments to identify key contributors and discussion patterns
Want the full context?
Jump to the original sources
Read the primary article or dive into the live Hacker News thread when you're ready.
what's up with the magazine in general... is it doing ok?
The css-tricks website was basically dormant for a few years.
Chris (the original creator of css-tricks) sick of seeing his creation stagnate tried to get Digital Ocean to get the website going again but it looked like Digital Ocean didn't know enough about the site to resume posting.
At some point the website's editor (Geoff) who had been let go as part of the layoff came back to work on the website and their was much rejoicing.
---
You can read more about it here: https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-...
---
CSS-trick's content had a bit rocky at the start of its comeback, but it's feels much better now than it did when it first resumed.
The vibe is a little bit different now, but I think that's because so many webdev writers are experimenting and writing in the open on mastodon before posting on their own blogs and larger platforms like css-tricks.
We didn't get as much of a peak behind the curtain before.
Uhhh, that reminds me of the super duper helpful way YouTube automatically enables dubbing and/or subtitles based on the last video I watched, my browser language, my account language, where I am in the world, phase of the moon, the colour of my shirt...
- A good designer will be able to produce a page whose looks are appropriately engaging, complementary to the content, unique, and easy on the eyes. For every abrasive CSS (or lack thereof) justfuckingusehtml.com, there's a masterpiece like acko.net, many of which just aren't in the mainstream.
- If everything ends up looking the same wouldn't that get... boring? I get the desire to avoid obnoxious design choices, but those obnoxious design choices are part of the web, and they should be embraced as part of the decision-making process about if and how you want to keep reading a site. A bit of friction is, IMO, a good thing when browsing the web. It's the minimum level of keeping the web an interactive medium rather than just a content pipe.
That said, you do you. You're well within your rights to browse the web how you want, up to and including using automation to re-style sites with extreme prejudice.
I just checked with some code that I wrote a while back to rotate a faux-3D pyramid, to see how I did it. The trigonometry was the easy part, it was the backface culling that was the hard part. Anyway, I decorated my elements with CSS variables in script and used lots of Math.sin/cos/tan. Also present were lots of radian conversion things and the fun that goes with animating things the 'right way'. Basically oodles of extra stuff that took me the best part of a week to do, to result in something that memory leaks if left running for a few hours.
Now I have seen this article, I might just have to mix and match JS and CSS, so I build out the elements in code and add the CSS variables to them, for everything else to be done in CSS. I will obviously need an intersection observer to trigger the CSS rather than my JS, and so it goes on!
Either way, the trigonometry is the easy part, fixing that memory leak the hard part, but CSS is the way to go because that will work perfectly, unlike with JS.
> Note: This step will become much easier and concise when the sibling-index() and sibling-count() functions gain support (and they’re really neat). I’m hardcoding the indexes with inline CSS variables in the meantime.
The inline links there go to https://css-tricks.com/almanac/functions/s/sibling-index/, which is pretty nifty honestly.
Oh and I guess negative b plus or minus b squared something something four a c over two a. I think there’s a square root to shove most of that into.
And by God, I never have. Thanks Mr. Wilkinson.
SOHCAHTOA.
Your order is cosine, sine, tangent - CST. A quick look at the other examples here seem to prefer SCT - as do I but only because that is what I was taught.
I also note your mnemonic is very different to the one I learned in having the function name last. So AHC vs CAH.
There is no right or wrong here but I'm sure we can agree that there are loads of mnemonics for these basic trig formulae and nationality isn't involved.
I also went to a lot more schools than normal, thanks to living in multiple countries and my dad (army) moving every 18 months or so!
sohcahtoa is nearly a word.
"Spitfire or Hurricane come and hurry to our aid"
This works for me as the order of the functions matches the order shown on my trusty FX82A. Your version is kind of messed up.
I am giving this AI thing a wide birth, however, could we ask a LLM to invent a new aide memoire for this? We have got the silent generation and the boomers covered, but is there something we can do for kids today? Maybe it references Cinnamoroll, Hello Kitty or Octonauts characters that actual kids know, without it being ultra-violent.
A - Adjacent T - Tangent C - Cosine
I guess this is the version we use in Australia.
And the quadratic equation...yeah, I don't remember that one.
Translation: I'm not handsome, if I were handsome, Tipah (our principal) would like me"
25 years ago and I still remember it clearly. Also it was middle school education on how to solve problems in a different space; this one solving math in a second language space lol
For example, knowing that cosine and sine are the exact same wave, just 90 degrees out of phase, it's trivial to know that sin(angle) = cos(angle + 90)
cos(a)^2 + sin(a)^2 = 1 is easy to show, too. If you use a=0, it's trivial. But try using 45 degrees. It turns into (sqrt(2)/2)^2 + (sqrt(2)/2)^2 which simplifies to 0.5 + 0.5 = 1.
Many of the others can be derived by just manipulating the Law of Sines or Law of Cosines. Fun fact: The Pythagorean Theorem is actually just a special case of the Law of Cosines:
c^2 = a^2 + b^2 - 2*a*b*cos(C)
Recall that in the Law of Cosines as I've written it, the lowercase letters are the sides, and the large C is the angle opposite that side. So if you choose your hypotenuse to be c, then the opposite angle, C, is 90 degrees. cos(90) is 0, so that whole last term gets cancelled out and you're left with the equation known as the Pythagorean Theorem.
I really wasn't kidding when I said I enjoyed trig.
Knowing that cos(45) == sqrt(2)/2 seems like something you would need to memorize, but if you just draw an isosceles right triangle with sides equal to 1 and use the Pythagorean Theorem you'll find that the hypotenuse is sqrt(2)/2.
If it was clickbait it wouldn't say what the 'most hated' css feature is to bait you into clicking it to find out what the feature is.
> The “Most Hated” CSS Feature
> The “Most Hated” CSS Feature: cos() and sin()
filter also had some randomness support (via svg <feTurbulance>
x = distance * cos(angle)
y = distance * sin(angle)
Screw the rest. I learnt these as a kid writing a 2D computer game years before coming across them in high school maths.
I don't even know how to begin parsing this sentence.
Keep in mind it's only 9.1%, or 1 in 11, that actually had a "negative opinion" of it. This makes the phrasing/focus on "hated" seem a bit forced.