What do multiple css classes do?-CodePudding

My application uses multiple classes using CSS modules.

open is a boolen variable to determine if Paper should shift or not.

        <Paper className={`${classes.paper} ${open && classes.paperShift}`}>

Question: Why are multiple classes being used, and how can they render differing results?

Note, I looked at this other post: using css modules how do I define more than one style name

CodePudding user response：

The rules of each CSS class are simply combined together by the browser and all the rules are applied to the element. (If any of the rules contradict each other, the browser will decide which has precedence - if you learn more about CSS you can start to understand how that works in detail).

So, multiple classes can be used to apply various different styles to an element at the same time. Those rules might be split up into different classes to make the visual design more flexible and the rules more re-usable.

Classes defined on an element can potentially also be used by JavaScript code to select certain elements (or groups of elements) in order to perform actions on them or get information from them.

CodePudding user response：

Those are HTML classes, not CSS classes.

It just means that the element is a member of multiple classes.

Anything (CSS, JS, anything else) that tries to reference the element by either class will find it. Anything that tries to reference by both classes will find it.

console.log(Array.from(document.querySelectorAll('.one')));
console.log(Array.from(document.querySelectorAll('.two')));
console.log(Array.from(document.querySelectorAll('.one.two')));

.one {
  font-family: monospace;
  font-size: 1.5em;
}

.two {
  background: yellow;
}

<div >one</div>
<div >two</div>
<div >one two</div>