What is the best practice of using css in CRA ?

Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a .Button CSS class in <AcceptButton> and <RejectButton> components, we recommend creating a <Button> component with its own .Button styles, that both <AcceptButton> and <RejectButton> can render . Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition.

This paragraph comes from the section Adding a CSS Preprocessor (Sass, Less etc.). I am confused about how to avoid nesting of classname. For example, I have a CustomComponent:

class CustomComponent extends React.Component {

  render() {
    <div className="customComponent">
        <h1 className="title">This is title</h1>
        // ... other elements
    </div>
  }
}

The css file for CustomComponent:

.customComponent{ }

.customComponent .title { }

In order to avoid conflict of class name，I still need to nest class names like .customComponent .title . Could anyone give me an example that using component composition to replace nesting?

[xuchaobei]

@miraage @Timer I know of BEM and styled-component. I am just trying to understand what the paragraph means. If I use Less, I can define the css styles in a easy nesting way:

.customComponent {
  .title {
   }
 }

But the paragraph said Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition. I don’t see how the component composition can replace nesting feature of CSS preprocessors . I hope there is a more detailed example.

[adambowles]

CSS Modules will hopefully be coming in the future: #2285