- 💎 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 Modules, BEM 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;
}
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>
);
}