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
200
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
230
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.2k
Other Decks in Technology
See All in Technology
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
君も受託系GISエンジニアにならないか
sudataka
2
370
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Fireside Chat
paigeccino
34
3.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Bash Introduction
62gerente
610
210k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
The Language of Interfaces
destraynor
156
24k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Speed Design
sergeychernyshev
25
780
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
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