[RFC] Consider renaming "xs" breakpoint to "base"

[oliviertassinari]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

In order for the system to work well, it requires the first breakpoint to be 0px. This is required in order for the min-width media query logic to trigger correctly.

The use of xs to name this baseline might be wrong, evermore to allow developers to customize it.

Motivation 🔦

The discussion started at #26135 (comment). We noticed the current customization demo is wrong:

const theme = createMuiTheme({
  breakpoints: {
    values: {
      tablet: 640,
      laptop: 1024,
      desktop: 1280,
    },
  },
});

https://mui.com/material-ui/customization/breakpoints/#custom-breakpoints

It misses the mobile: 0 breakpoint.

Maybe it would make sense to remove xs from the theme and rename it differently, like _, or base.

It's also to be noted that xs is the anagram of sx, which can create confusion when reading it: #34948.

---

Another request from a user:

While using breakpoints object like this, How do we specify bgColor for devices less than xs?

<Box
    sx={{
      bgcolor: {
        xs: 'primary.light',
        sm: 'secondary.light',
      },
    }}
  />

Complains

• https://twitter.com/ivanfc0o/status/1653956210968625152

Benchmarks

• https://styled-system.com/responsive-styles: _

[eps1lon]

I think just naming it zero and making it non-customizeable is the way to go here. Makes these types of customization mistakes impossible and is not ambigious.

[oliviertassinari]

• 👍 for non-customizeable
• zero. I'm not so sure it will work if we move forward with: [system] Allow max-width breakpoint instead of min-width #25846, but maybe it will 🤔

[mnajdova]

Maybe min as a name for the breakpoint?

[eps1lon]

min adds ambiguity again in my opinion. If the value is 0 and will always be 0, I'd just name it zero. Leaves no room for interpretation.

[vicasas]

I remember that at the beginning it happened to me a couple of times when I was migrating the demos to the emotion that I made a mistake when writing. I was confused between xs and sx. Maybe init? 👀

[mnajdova]

I remember that at the beginning it happened to me a couple of times when I was migrating the demos to the emotion that I made a mistake when writing. I was confused between xs and sx.

I can't count know how many times I typed sx insted of xs 😄

[oliviertassinari]

From what I understand, so far, we have two valid keys proposals for the name: _, base

❌ I think that min or zero wouldn't work because they assume a specific breakpoint direction (min, so can't go lower, and with zero, the width would be 0, both break #25846).

[eps1lon]

zero wouldn't work because they assume a specific breakpoint direction

1. how does zero assume a direct?
2. why is this assumption bad
3. how does base not assume a direction
4. what is _ supposed to mean?

[oliviertassinari]

@eps1lon Sorry for the late reply

1. In [system] Allow max-width breakpoint instead of min-width #25846, we have left the user feedback with the "waiting for upvotes" to signal that we might implement it. Let's assume we do implement support for it and use zero. Does it mean that we would write:

<Paper sx={{ padding: { zero: 1, md: 8 } }}>

and translate it to this CSS?

padding: 8px;
@media (max-width: 899.95px) {
  padding: 64px;
}

From my perspective, what we read in the code doesn't match the behavior. When I read the code, it suggests to me that for a large screen, padding is 8px. zero: 1 I fail to guess its outcome by only reading the code.

2. From my perspective the issue is with sending a contradicting signal. I mean, in the same way as if I was asking which color is this text?

3. base would suggest that this is the baseline value without media queries. At least, it's how we could teach it in the documentation.
4. _ doesn't say much on its own. If we search for its usage on our codebase, we will find it used for values we don't care about. I have mentioned it because it's used by styled-system to solve this problem. I personally prefer base.

---

I have added the v6 milestone, but if we move forward, we could likely move in smaller, without breaking changes first.

[eps1lon]

I have no idea why we talk about a change in behavior here. This is about giving xs a better name. Not changing the CSS we produce.

[oliviertassinari]

@eps1lon Ok, I think that we can take a step back. Do you think that we should implement #25846?

Maybe we will need it, eventually. If we don't, then zero, min, base, _, I think that they could all potentially work.

I vote for using base over xs as the option that seems to work in most contexts.