[RFC] Consider renaming xs breakpoint

• 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 https://github.com/mui/material-ui/pull/26135#discussion_r626396190. 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',
      },
    }}
  />

Benchmarks

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

[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.

[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.