[RFC] Change usage of the term "pseudo-class" across documentation

Summary 💡

Change the term “pseudo-class” to “conditional class” when referring to classes such as Mui-disabled, Mui-checked, etc.

Motivation 🔦

The discussion started in https://github.com/mui-org/material-ui/pull/26688/files#r659219539.

The term “pseudo-class” has a well-known meaning in context of CSS. The classes that we apply to components in certain states are technically ordinary CSS classes (and should be targeted using ., not : as CSS pseudo-classes).

These classes, however, have a special meaning in context of Material-UI. They should not be styled directly, but only with the corresponding “static” classes. To emphasize the difference between these classes and the ones that are applied to elements regardless of their state (such as MuiButton-root, I propose to use the term “conditional classes”.

[michaldudak]

Let’s vote for the options:

🚀 conditional classes ❤ common classes 👀 shared classes 🎉 state classes 😕 pseudoclasses

[oliviertassinari]

I have voted for “state classes” because the MDN docs of a :pseudo-class uses

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

I also think that it matches with the Bootstrap terminology, where if we apply to us, we get:

• .MuiButton-root: is a base class (we have one per element)
• .MuiButton-outlined: is a modifier class (we get one per specific variation of the styles). Maybe we could call this a variant class for consistency with theme.components.MuiXX.variants.
• .Mui-disabled: is a state class (we get one for the most important states)