CSS Modules Examples

animations_generated.css

@keyframes text__blue-green-text___1AJCb {
  0%   {color: blue;}
  100% {color: green;}
}

.text__blue-green-text___1AJCb {
  animation: text__blue-green-text___1AJCb 5s infinite linear alternate;
}

.text__flashy-text___YkPNd {
  /* Other rules */
}

animations_text.css

@keyframes blue-green-text {
  0%   {color: blue;}
  100% {color: green;}
}

.blue-green-text {
  animation: blue-green-text 5s infinite linear alternate;
}

.flashy-text {
  composes: blue-green-text;
  /* Other rules */
}

composition_button.css

/* button.css */ 

.common {
  /* Very basic rules common to all buttons */
}

composition_buttonColor.css

/* buttonColor.css */

.green {
  /* Rules for green buttons */
}

.red {
  /* Rules for red buttons */
}

composition_buttonSize.css

/* buttonSize.css */ 

.large {
  /* Specific size rules */
}

.small {
  /* Specific size rules */
}

composition_largeButton.css

/* largeButton.css */

.primary {
  composes: common from "./button.css";
  composes: large from "./buttonSize.css";
  composes: green from "./buttonColor.css";
}

.cancel {
  composes: common from "./button.css";
  composes: large from "./buttonSize.css";
  composes: red from "./buttonColor.css";
}

composition_smallButton.css

/* smallButton.css */

.primary {
  composes: common from "./button.css";
  composes: small from "./buttonSize.css";
  composes: green from "./buttonColor.css";
}

.cancel {
  composes: common from "./button.css";
  composes: small from "./buttonSize.css";
  composes: red from "./buttonColor.css";
}

composition_vanilla.css

.button {
  /* Rules common to all buttons */
}

.button.large {
  /* Specific size rules */
}

.button.small {
  /* Specific size rules */
}

.button.primary,
.button.large.primary,
.button.small.primary {
  /* Rules for primary buttons */
}

.button.cancel,
.button.large.cancel,
.button.small.cancel {
  /* Rules for cancel buttons */
}

global-rules_generated.css

.title {
  /* Global title class rules */
}

.heading .button__avatar___2hVJ5 {
  /* Modular avatar class rules inside any heading class */
}

global-rules_title.css

:global .title {
  /* Global title class rules */
}

:global .heading :local .avatar {
  /* Modular avatar class rules inside any heading class */
}

locally-scoped-styles_button.css

/* button.css */

.primary {
  /* Rules for primary buttons */
}

.cancel {
  /* Rules for cancel buttons */
}

locally-scoped-styles_buttons.html

<div>
  <button class="button__primary___1XCfD">OK</button>
  <button class="button__cancel___2N3Rv">Cancel</button>
</div>

locally-scoped-styles_ButtonSet.js

import React from 'react';
import button from './button.css';

export class ButtonSet extends React.Component {
  render() {
    return (
      <div>
        <button className={button.primary}>OK</button>
        <button className={button.cancel}>Cancel</button>
      </div>
    );
  }
}

locally-scoped-styles_generated.css

.button__primary___1XCfD {
  /* Rules for primary buttons */
}

.button__cancel___2N3Rv {
  /* Rules for cancel buttons */
}

locally-scoped-styles_vanilla.css

.button {
  /* Basic button rules */
}

.button.primary {
  /* Primary button rules inherit from .button */
}

.button.cancel {
  /* Cancel button rules inherit from .button */
}

one-class-per-element_buttons.html

<div>
  <button class="largeButton__primary___34_hf
                 button__common___3qwUd
                 buttonSize__large___13I8z
                 buttonColor__green___1sgDW">OK</button>
  <button class="smallButton__cancel___8v8Mv
                 button__common___3qwUd
                 buttonSize__small___C-VmZ
                 buttonColor__red___2hEGB">Cancel</button>
</div>

one-class-per-element_ButtonSet.js

import React from 'react';
import largeButton from './largeButton.css';
import smallButton from './smallButton.css';

export class ButtonSet extends React.Component {
  render() {
    return (
      <div>
        <button className={largeButton.primary}>OK</button>
        <button className={smallButton.cancel}>Cancel</button>
      </div>
    );
  }
}

one-class-per-element_generated.css

.button__common___3qwUd {
  /* Very basic rules common to all buttons */
}

.buttonSize__large___13I8z {
  /* Specific size rules */
}

.buttonSize__small___C-VmZ {
  /* Specific size rules */
}

.buttonColor__green___1sgDW {
  /* Rules for green buttons */
}

.buttonColor__red___2hEGB {
  /* Rules for red buttons */
}

.largeButton__primary___34_hf {
  /* Empty! */
}

.largeButton__cancel___3Lbw9 {
  /* Empty! */
}

.smallButton__primary___3WUIN {
  /* Empty! */
}

.smallButton__cancel___8v8Mv {
  /* Empty! */
}