Create-react-app: What is the best practice of using css in CRA ?

[xuchaobei]

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 and components, we recommend creating a component with its own .Button styles, that both and 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?

[miraage]

If you ask me I'd name them like CustomComponent and CustomComponent__Title (e.g. similar to BEM way).

On the other hand, if you have such kind of title to be very similar across the pages/components - extract it to the separate component.

// EDIT

BTW, your question is out of scope of CRA itself.

[Timer]

The solution here would be to use more descriptive class names 😄.

You could try out a CSS solution, there's a number which don't require you to eject like styled-components.

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

[ZoeDreams]

if you aren't use pre-processors, using camel case and chaining class names together can become sloppy. its best to use lower case and hyphenate. Uppercase the first letter of styles that cascade with inheritance.

.btn-small-search-title Dark Bold where you have the first part be the xpath of the component, and Dark and Bold be generic style modifiers that should work for any type of component

This is called Modular CSS Naming here is an article explaining it. This is utilized by GWT, and can be found on any google webpage. This convention becomes more apparent when you start dealing with complex UI component layouts. GLHF

[adambowles]

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