Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Future of Reusable CSS

Glen Maddern
September 01, 2016

The Future of Reusable CSS

Presented at Coldfront Conf 2016 <3

Glen Maddern

September 01, 2016
Tweet

More Decks by Glen Maddern

Other Decks in Technology

Transcript

  1. @glenmaddern .selector > header > span {} .foo.bar.baz {} p

    {} ❌ .single-really-long-classnames {} ✅
  2. @glenmaddern A COMPONENT SHOULD RESPOND TO ITS ENVIRONMENT • •

    RATHER THAN THE ENVIRONMENT OVERRIDING THE COMPONENT
  3. @glenmaddern .parent { display: flex; padding: 1rem; } .parent >

    * { flex-grow: 1; } ONE ONE TWO ONE TWO THREE
  4. @glenmaddern .parent { display: flex; padding: 1rem; } .parent >

    * { flex-grow: 1; } .parent > * + * { margin-left: 1rem; } ONE ONE TWO ONE TWO THREE
  5. @glenmaddern .parent { display: flex; padding: 1rem; } .parent >

    * { flex-grow: 1; } .parent > * + * { margin-left: 1rem; } .parent > :first-child { flex: 0 0 50%; } ONE TWO ONE TWO THREE ONE TWO THREE FOUR
  6. @glenmaddern .component { --size: var(--spacing, 2rem); width: calc(2 * var(--size));

    height: var(--size); } .component .container .component .container { --spacing: 1rem; }
  7. @glenmaddern .component { --size: var(--spacing, 2rem); width: calc(2 * var(--size));

    height: var(--size); } .component .component.large .large { --spacing: 4rem; /* or */ --size: 4rem; }
  8. @glenmaddern .container .container { --grid-size: 1rem; } .component .component .component

    { --size: var(--spacing, 2rem); width: calc(2 * var(--size)); height: var(--size); }
  9. @glenmaddern .component .container .component.fix .container { --grid-size: 1rem; } .fix

    { --spacing: var(--grid-size); } .component { --size: var(--spacing, 2rem); width: calc(2 * var(--size)); height: var(--size); }
  10. @glenmaddern import styles from './MediaObject.css' const MediaObject = ({ title,

    image, text }) => ( <div className={styles.outer}> <img className={styles.img} src={ image }/> <div className={styles.inner}> <h1 className={styles.h1}>{ title }</h1> <p className={styles.p}>{ text }</p> </div> </div> )
  11. @glenmaddern import styles from './MediaObject.css' const MediaObject = ({ title,

    image, text, theme=styles })=>( <div className={theme.outer}> <img className={theme.img} src={ image }/> <div className={theme.inner}> <h1 className={theme.h1}>{ title }</h1> <p className={theme.p}>{ text }</p> </div> </div> ) https://github.com/css-modules/css-modules/issues/147
  12. @glenmaddern ✏ KEEP LAYOUT SEPARATE ✏ RESPOND TO CONTEXT ✏

    DOCUMENT ASSUMPTIONS ✏ OPEN FOR MODIFICATION