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


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

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

                [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.block.css';

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

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

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

                }
              

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

                .button--inverse {
                  background-color: white;
                  color: #2e184a;
                }

                .button--size-small {
                  height: 16px;
                  line-height: 16px;
                  padding: 0px 8px;
                }

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

                .button__icon--animate {
                  animation: 3s ease-in 1s icon-animation;
                }

              

                import React from 'react';
                import objstr from 'obj-str';


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

                  const style = objstr({
                    ['button']: true,
                    ['button--inverse']: inverse,
                    ['button--size-small']: size === 'small'
                  });

                  return (
                    <button class={style}>
                      {icon && <span class='button__icon'>{icon}</span>}
                      {children}
                    </button>
                  );

                }
              

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

                .b { overflow: hidden; }

                .c {
                  background-color: white;
                  color: #2e184a;
                }

                .d {
                  line-height: 16px;
                  padding: 0px 8px;
                }

                .e {
                  width: 16px;
                  margin-right: 8px;
                }

                .f { height: 16px; }

                /*
                  Unused class `.button__icon--animate` has been removed
                */
              

                import React from 'react';
                import objstr from 'obj-str';


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

                  const style = objstr({
                    ['a b']: true,
                    ['c']: inverse,
                    ['d f']: size === 'small'
                  });

                  return (
                    <button class={style}>
                      {icon && <span class='b e f'>{icon}</span>}
                      {children}
                    </button>
                  );

                }