
CSS min() and max() functions are counterintuitive - SimeVidas
https://webplatform.news/issues/2020-05-07
======
uberman
This is completely not true.

CSS min() and max() do exactly what is intuitive. The author's confusion is
not understanding how to apply the results.

to be clear:

max(10px, 12px) === 12px

min(10px, 12px) === 10px

exactly as one would expect.

~~~
SimeVidas
CSS spec editor: “If that confuses you, congrats, it confuses me too, which is
why I wrote that note…”

[https://twitter.com/tabatkins/status/1254149169905725440](https://twitter.com/tabatkins/status/1254149169905725440)

You can pat yourself on the back for finding it intuitive, but many people
aren’t. If it were just me, I would not have written about it.

Also note that in your examples you’re using two literal values that share the
same unit (something that wouldn’t happen in real code). I think it’s fairly
clear what the functions do in that case, but it’s less clear if the units are
different:

max(80%, 200px)

Can you describe what the above value means?

~~~
uberman
Yes it returns what is expected. The maximum of those two values. I'm not
trying to be smug, but honestly if max(a, b) actually returned the minimum of
those arguments do you really think that would be better?

The confusion seems to stem from the uncertainty of how to apply these
functions when you want to ensure a minimum threshold for a width, padding or
something similar.

When you want to ensure that the width is at _least_ some size (but
potentially larger) then you might want to take the maximum of the current
width and some given threshold.

Conversely, when you want to ensure that the width is no larger than some
threshold (but potentially smaller) you might take the minimum of of the
current width and your threshold.

In either case what min() and max() do is clear.

Perhaps the demos on:

[https://developer.mozilla.org/en-
US/docs/Web/CSS/max](https://developer.mozilla.org/en-US/docs/Web/CSS/max)

might help make it more clear for some.

I'm sure you understand the issue as you wrote this article. Perhaps a better
title might be something about the being careful about when to use min() vs
max() rather than stating that these functions are themselves counter
intuitive.

~~~
SimeVidas
> Yes it returns what is expected. The maximum of those two values.

What is the maximum of those two values?

~~~
uberman
Really?

Without context it is impossible to say what 80% translates into. However,
with context it will be absolutely clear what max(80%, 200px) is. It will be
the greater of those two values. If you want to wish it to be the least of
those two values then go ahead and wish.

Alternatively, feel free to try it out at:

[https://developer.mozilla.org/en-
US/docs/Web/CSS/max](https://developer.mozilla.org/en-US/docs/Web/CSS/max)

Up until this very moment I have given you the benefit of the doubt. Do _you_
even understand what 80% means? I'm beginning to suspect that min() and max()
are the least of your issues if the concept of the CSS percentage datatype has
you baffled.

~~~
SimeVidas
You’re right. Context would be useful. Let’s use this:

.elem { width: max(80%, 200px); }

The goal is to explain what this declaration does.

~~~
uberman
We are going in circles. Without knowing anything about the lineage of an
element with this class it is not possible to say.

Conceptually an element with this class will have a width of 80% of its parent
or 200px whichever is larger. Hypothetically a simple parent with a width of
400px would result in this element having a width of (0.8 X 400) 320px as
320px is larger than 200px

What do you think this does if not that?

~~~
SimeVidas
> a width of 80% of its parent or 200px whichever is larger

Alternatively, “…but at least 200px” to make it more clear that 200px
represents the minimum width.

Based on the linked discussion on Twitter, I suspect that most people cannot
interpret this declaration correctly, at least not at first glance (i.e.,
instinctively).

For example, someone’s thought process could be like this: “Ok, it’s a width,
and there is a max function, and the absolute value is 200px. So, something
about max width being 200px?”

The person sees “max” and 200px, and they then have to deduce that the
_minimum_ value is 200px, not maximum. This is what’s counterintuitive about
it.

width: max(X, 200px) → minimum width is 200px

If you are not affected by this at all, than that’s great for you, but if most
people are, then we can say that the feature is counterintuitive.

The only thing that matters is how actual people interpret the feature
instinctively. If their gut-instinct interpretation is incorrect (or even if
they’re just unsure), then we have a problem.

~~~
uberman
The documentation that you link to states that there is an "occasional
misinterpretation", that sometimes people don't understand how to apply max
and min correctly in certain situations. That is thankfully, not "most people"
nor do I believe it is even some significant number of people most of the
time.

People who can't understand max() probably can't see that -10 is less than -9
either. That does not make the "<" operator counter intuitive. This actually
has nothing to do with CSS and to me demonstrates a crazy fundamental mis-
understanding of math and logic.

For someone confused about what max() might do, you should be clearly stating
that it does exactly what is expected, however you might caution a
particularity novice coder that they might want to double check that they
truly want the greatest of two numbers rather than the least of two numbers.
Framing these functions as counter intuitive when they are crystal clear makes
it more likely that a novice gets it wrong.

"That person on hacker news told me that max does not work like I expect. I
should use it to get the least of two numbers"

With advice like that I guess I can see where novices might be confused. I'm
sure you believe at this point that I am some sort of ass, but truthfully I
would never hire someone who could not intuit what max() did.

~~~
SimeVidas
(Of course I don’t think you’re an ass. You’re arguing your point quite well.
I couldn’t ask for more.)

I think you’re overestimating how flawless people are mentally.

Take a look at this:
[https://twitter.com/mxstbr/status/1038073603311448064](https://twitter.com/mxstbr/status/1038073603311448064)

This is absolute HTML and CSS basics, and yet only 43% of over 14 thousand
people got it right. What gives? Are most of these voters a bunch of amateurs?

I don’t think so. My explanation is that people make mistakes. Constantly.
Basic mistakes. That’s part of being human. Our brains aren’t machines that
produce flawless results. We forget things. We get confused.

Is this a problem? Should all of these people be fired? No. As long as they
can find and correct their mistakes, and produce a correct result in the end,
it’s fine.

The first sentence in my first reply to you was a quote from the CSS spec
editor: “If that confuses you, congrats, it confuses me too, which is why I
wrote that note…”

This is Tab Atkins. A Googler. The main CSS spec editor. Probably one of the
most knowledgeable people about CSS in the world.

How is it possible that min()/max() confuses him? Is he secretly a noob that
doesn’t understand basic math? My explanation is the same. He’s human. His
brain doesn’t work perfectly.

I am not suggesting that most people don’t understand max(). I’m saying this:

* When people see something like max(80%, 200px), they get confused, even if it’s just for a moment.

* I have explained in my previous comment why that is (max() + absolute value = minimum value)

* Then, after they look at the code for a few seconds or more, look up max() on MDN, etc., they eventually figure it out. How many do? Most? I don’t know.

But in that first moment, _instinctively_ , most people get confused.

I have wasted a bunch of time on these comments, but I’m not going to let some
IQ 200 genius convince me that min()/max() isn’t counterintuitive in this
specific scenario.

