CSS per ReactJS Component

css-per-component.md

MyComponent.less

@import '../variables.less';

.MyComponent {
  background: @primary-color;

  &-list {
    max-width: @max-content-width;
    margin: 0 auto;
  }
  
  &-item {
    color: rgba(255, 255, 255, .6);

    &--selected {
      color: rgba(255, 255, 255, 1);
    }
  }
}

MyComponent.js

import { withCss } from './decorators';

@withCss
class MyComponent {
  render() {
    return (
      <div className={this.classNames()}>
        <ul className={this.classNames('list')}>
          <li className={this.classNames('item')}>Hello</li>
          <li className={this.classNames('item--selected')}>Hello</li>
        <ul>
      </div>
    );
  }
}

export default MyComponent;

Output in DEBUG mode

<div class="MyComponent">
  <ul class="MyComponent-list">
    <li class="MyComponent-item">Hello</li>
    <li class="MyComponent-item MyComponent-item--selected">Hello</li>
  </ul>
</div>

Output in RELEASE mode

<div class="FJ">
  <ul class="FK">
    <li class="FL">Hello</li>
    <li class="FL FM">Hello</li>
  </ul>
</div>

---

Ref React Starter Kit, React Style Guide