Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Future of Reusable CSS
Search
Glen Maddern
September 01, 2016
Technology
2
210
The Future of Reusable CSS
Presented at Coldfront Conf 2016 <3
Glen Maddern
September 01, 2016
Tweet
Share
More Decks by Glen Maddern
See All by Glen Maddern
The Road to Styled Components & the Road Ahead
geelen
2
240
The Road to Styled Components
geelen
2
1.3k
Styled Components and the Road to Unification
geelen
2
280
CSS Modules, CSS Variables and the Future of Reusable CSS
geelen
9
1.3k
Other Decks in Technology
See All in Technology
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
2
320
実践AIガバナンス
asei
3
250
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
150
mruby(PicoRuby)で ファミコン音楽を奏でる
kishima
2
480
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
120
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
600
トヨタ生産方式(TPS)入門
recruitengineers
PRO
5
1.4k
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
390
進捗
ydah
2
210
Kiroと学ぶコンテキストエンジニアリング
oikon48
4
870
Goss: New Production-Ready Go Binding for Faiss #coefl_go_jp
bengo4com
1
1.1k
Understanding Go GC #coefl_go_jp
bengo4com
1
1.1k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Optimising Largest Contentful Paint
csswizardry
37
3.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Code Review Best Practice
trishagee
70
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Site-Speed That Sticks
csswizardry
10
800
Writing Fast Ruby
sferik
628
62k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Rails Girls Zürich Keynote
gr2m
95
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Transcript
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
None
@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
@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://semantic-ui.com
@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
@glenmaddern .parent { display: flex; padding: 1rem; } .parent >
* { flex-grow: 1; } .parent > * + * { margin-left: 1rem; } ONE ONE TWO ONE TWO THREE
@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
@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.fix .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