The Future of Reusable CSS

Reusable CSS THE FUTURE OF @glenmaddern

HELLO copeNhagen! ♥

@glenmaddern

@glenmaddern "

@glenmaddern

@glenmaddern front end C E N T E R https://frontend.center

@glenmaddern

@glenmaddern 2015 WHAT MAKES CSS SO HARD TO MAINTAIN?

@glenmaddern demonic CSS

@glenmaddern ✅ COMPLICATED SELECTORS CSS ✅ OVERRIDE-HEAVY ✅ NO ISOLATION
✅ !IMPORTANT ✅ END OF FILE ONLY

@glenmaddern

@glenmaddern https:/ /github.com/css-modules/css-modules

@glenmaddern IDEAS TECHNIQUES ✏ TECHNOLOGY

@glenmaddern .selector > header > span {} .foo.bar.baz {} p
{} ❌ .single-really-long-classnames {} ✅

@glenmaddern ✏ .Block {} .Block__Element {} .Block__Element--modifier https:/ /bem.info

@glenmaddern .block {} .element {} .modifier {} https:/ /github.com/css-modules/css-modules

@glenmaddern

@glenmaddern 2016 WHAT MAKES CSS SO HARD TO REUSE?

@glenmaddern import something from 'somewhere' something.leftPad()

@glenmaddern THE HUMAN BRAIN IS A (IN)CONSISTENCY-DETECTING MACHINE

@glenmaddern http://semantic-ui.com

@glenmaddern http://www.novolume.co.uk/blog/all-websites-look-the-same/

@glenmaddern SETTINGS.SCSS

@glenmaddern https://en.wikipedia.org/wiki/Margaret_Hamilton_(scientist)

@glenmaddern http://semantic-ui.com

@glenmaddern IDEAS TECHNIQUES ✏ TECHNOLOGY

@glenmaddern css v ari able s

@glenmaddern CSS CUSTOM PROPERTIES CSS VARIABLES =

@glenmaddern http://caniuse.com/#feat=css-variables

@glenmaddern

@glenmaddern re sponsive component s

@glenmaddern DEATH TO PIXEL PERFECTION

@glenmaddern YOUR COMPONENTS SHOULD DEMAND LESS & RESPOND MORE

@glenmaddern A COMPONENT SHOULD RESPOND TO ITS ENVIRONMENT • •
RATHER THAN THE ENVIRONMENT OVERRIDING THE COMPONENT

@glenmaddern LAYOUT COMPONENTS ✏

@glenmaddern PADDING MARGIN SIZE

@glenmaddern .component { width: 50%; margin-top: 2rem; flex-grow: 1; }
❌

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

* { flex-grow: 1; } .parent > * + * { margin-left: 1rem; } ONE ONE TWO ONE TWO THREE

* { flex-grow: 1; } .parent > * + * { margin-left: 1rem; } .parent > :first-child { flex: 0 0 50%; } ONE TWO ONE TWO THREE ONE TWO THREE FOUR

@glenmaddern CONTEXTUAL COMPONENTS ✏

@glenmaddern DEMO: CURRENTCOLOR

@glenmaddern https://www.youtube.com/watch?v=jPOBVaomzLE

@glenmaddern .component { --size: 2rem; width: calc(2 * var(--size)); height:
var(--size); } .component

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

@glenmaddern .component { --size: var(--spacing, 2rem); width: calc(2 * var(--size));
height: var(--size); } .component .component.large .large { --spacing: 4rem; /* or */ --size: 4rem; }

@glenmaddern .component { background: var(--bg, black); color: var(--fg, white); }

@glenmaddern .component { background: var(--bg, black); color: var(--fg, white); }
(bg, fg) => <Component style.../>

@glenmaddern DEMO: INVERTED BUTTON

@glenmaddern INHERITANCE THE CASCADE vs

@glenmaddern NAMING MISMATCHES?

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

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

@glenmaddern EXPLICIT COMPONENTS ✏

@glenmaddern http://semantic-ui.com/elements/button.html

@glenmaddern http://jxnblk.com/rebass/#Button

@glenmaddern DEMO: DOCUMENTATION

@glenmaddern OPEN COMPONENTS ✏

@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> )

@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

@glenmaddern DEMO: INTERNAL STRUCTURE DOCS

@glenmaddern re sponsive component s

@glenmaddern ✏ KEEP LAYOUT SEPARATE ✏ RESPOND TO CONTEXT ✏
DOCUMENT ASSUMPTIONS ✏ OPEN FOR MODIFICATION

@glenmaddern t hank you! @glenmaddern

The Future of Reusable CSS

The Future of Reusable CSS

More Decks by Glen Maddern

Other Decks in Technology

Featured

Transcript