This is not counter intuitive. It literally follows the exact same logic that you cited above “For all programming languages… what matters is the order of the calls to the functions.”

What is really happening is that you have two declarations and they are BOTH being applied but the last one is overwriting the first.

The problem is you are thinking about CSS like how you would a procedural language. CSS is not a procedural language.

CSS is complicated and it is very easy to write confusing rules that don’t do what you think they should. This article has a lot of good ideas on how to avoid that but even more helpful is to have an appropriate mental model of how CSS works.

A better way to think of CSS is as a stack based rules engine. Rules engines have orders of precedence and care about rule declaration order. The order of precedence is literally what the C in CSS stands for.

When you define a style you aren’t defining a function or procedure, you are setting a rule in the rules engine.

When you set a class (or use any other selector) you aren’t calling a function you are setting a flag that the rules engine will use to apply the rules you previously defined.

If you use the right mental model and understand the “Cascading” rules it is much easier to write clean efficient CSS