logo
  • 💎 One CSS File Per Component
  • 📦 Scoped Styles
  • 🔎 Tiny Runtime (~500b)
  • 🔥 Blazing Fast Stylesheets
  • 🚀 Project-Wide Optimization
  • 🚨 Build Time CSS Errors
  • 🧟 Dead Code Elimination
  • ✨ Object Oriented Inheritance

Blazing fast CSS for your
design systems and app components

Inspired by CSS ModulesBEM and Atomic CSS,  CSS Blocks is the next evolution of best practices

button.block.css

:scope {
  background-color: #ed2651;
  border: 0;
  border-radius: 2px;
  box-sizing: border-box;
  color: white;
  height: 24px;
  line-height: 24px;
  overflow: hidden;
  padding: 0 16px;
}

:scope[state|inverse] {
  background-color: white;
  color: #ed2651;
}

:scope[state|size=small] {
  height: 16px;
  line-height: 16px;
  padding: 0px 8px;
}

.icon {
  height: 16px;
  margin-right: 8px;
  overflow: hidden;
  width: 16px;
}

.icon[state|animate] {
  animation: 3s ease-in 1s icon-animation;
}
CSS

import React from 'react';
import objstr from 'obj-str';
import styles from 'button.css';

export default function Button({size, inverse, icon, children}){

  const style = objstr({
    [styles]: true,
    [styles.inverse()]: inverse,
    [styles.size(size)]: true
  });

  return (
    <button className={style}>
      {icon && <span className={styles.icon}>{icon}</span>}
      {children}
    </button>
  );

}
React JSX