CSS Modules

Into reading: https://css-tricks.com/css-modules-part-1-need/ (opens in a new tab)

Why?

• Allows us to automatically namespace our components.

Drawbacks

• Makes targeting selectors more difficult (see data aliases).

Understanding the structure

Because we use CSS Modules, the classNames property is actually an object, where each property refers to a specific usage.

So given a classNames object,

{
  "main": "class-for-main",
  "inner": "class-for-inner"
}

Passed into a component JSX index,

function = ( { classNames } ) => {
  return (
    <>
      <div class={ classNames.main } />
      <div class={ classNames.inner } />
    </>
  );
}

Allows us to apply any number of classes in our component.

<div class="class-name-for-main" />
<div class="class-name-for-inner" />