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
ビルドプロセスから考えるCSSアンチパターン
Search
Kenji Imamula
November 25, 2018
Technology
3
1.5k
ビルドプロセスから考えるCSSアンチパターン
HTML5 Conference 2018の発表資料です。
Kenji Imamula
November 25, 2018
Tweet
Share
More Decks by Kenji Imamula
See All by Kenji Imamula
Angular Universal on Google App Engine
kimamula
2
1.1k
Other Decks in Technology
See All in Technology
LLMで構造化出力の成功率をグンと上げる方法
keisuketakiguchi
0
450
Oracle Cloud Infrastructure:2025年7月度サービス・アップデート
oracle4engineer
PRO
1
120
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
0
150
「AIと一緒にやる」が当たり前になるまでの奮闘記
kakehashi
PRO
3
100
JAWS AI/ML #30 AI コーディング IDE "Kiro" を触ってみよう
inariku
3
290
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
1
1.8k
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
1.1k
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
bengo4com
0
2k
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
510
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
os1ma
9
1.5k
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
25
11k
KubeCon + CloudNativeCon Japan 2025 Recap
donkomura
0
170
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Practical Orchestrator
shlominoach
190
11k
Building Adaptive Systems
keathley
43
2.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
What's in a price? How to price your products and services
michaelherold
246
12k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Music & Morning Musume
bryan
46
6.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
Building Applications with DynamoDB
mza
95
6.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Transcript
Ϗϧυϓϩηε͔Βߟ͑Δ CSSΞϯνύλʔϯ HTML5 Conference 2018 גࣜձࣾΧϒΫ ࠓଜݠ࢜ @kimamula
CSSͷΛ͠·͢
ϑϩϯτΤϯυΤϯδχΞͱCSSͱࢲ CSSಘҙ CSSۤख
CSSಘҙ CSSۤख ࢲ ϑϩϯτΤϯυΤϯδχΞͱCSSͱࢲ
ͦΜͳࢲͰ͕͢
৭ʑ͋ͬͯɺ CSSͱਅʹ͖߹Θͳ͚Ε ͳΒͳ͍ͱ͖͕͖ͨ…
ϲ݄ܦա
ؾ͕͍ͭͨ͜ͱ
Flexbox, Grid LayoutΛ͑ CSSͦΜͳʹͭΒ͘ͳ͍
Flexbox, Grid LayoutΛ͑ CSSͦΜͳʹͭΒ͘ͳ͍ ͜ͷ͠·ͤΜ
Ϗϧυϓϩηε͔Βߟ͑Δͱɺ CSSͷઃܭ͕ߟ͍͑͢
Ϗϧυϓϩηε͔Βߟ͑Δͱɺ CSSͷઃܭ͕ߟ͍͑͢ ͜ͷΛ͠·͢
Ϗϧυϓϩηε͔Βߟ͑Δ CSSΞϯνύλʔϯ
Ξϯνύλʔϯ1
ίϯϙʔωϯτϕʔεͳͷʹ CSSάϩʔόϧ
ͦͦCSSͱ͖߹͏͜ͱ Λܾҙͨ͠ݩڟݪҼͷҰͭ
• ϑϩϯτΤϯυ։ൃίϯϙʔωϯτϕʔε͕ ओྲྀ • ࠶ར༻ • είʔϓׂ ίϯϙʔωϯτϕʔε։ൃ
ͦΜͳதɺCSS͚ͩάϩʔόϧ άϩʔόϧ ίϯϙʔωϯτ ͱ͔ ಠࣗͷCSSͱ͔
άϩʔόϧ ίϯϙʔωϯτ ͱ͔ ಠࣗͷCSSͱ͔ ͦΜͳதɺCSS͚ͩάϩʔόϧ ͜ͷґଘόϯυϥʔ ͔Βݟ͑ͳ͍
όϯυϥʔʹΑΔޮతͳ code splitting͕Ͱ͖ͳ͍ • ଟ͔Εগͳ͔ΕΘΕ͍ͯͳ͍CSS͕όϯυϧ ʹࠞೖ͢Δ • ಛʹϖʔδॳظදࣔͰɺ࠷ݶඞཁͳCSS͚ͩ ΛHTMLʹΠϯϥΠϯͰຒΊࠐΉΑ͏ͳߴԽ ࢪࡦͷಋೖ͕͘͠ͳΔ
• ϖʔδͷද͕ࣔ͘ͳΔ
άϩʔόϧωʔϜεϖʔε • CSSΛ࣮࣭తʹϩʔΧϧείʔϓԽ͢Δٕज़Λ ͑ͳ͍ • ϑϨʔϜϫʔΫඪ४ • CSS Modules •
ͦͷଞCSS in JS • ౷తͳCSSͷͭΒΈͱBEMͳͲͷख๏Ͱઓ Θͳ͚ΕͳΒͳ͍
ϙʔλϏϦςΟ͕Լ͕Δ • ίϯϙʔωϯτΛϓϩδΣΫτ֎Ͱ࠶ར༻͢ Δқ্͕͕Δ • ͦͷίϯϙʔωϯτ͕ґଘ͢ΔελΠϧΛ࠶ ར༻ઌͰ༻ҙͯ͋͛͠ͳ͚ΕͳΒͳ͍
ղܾࡦ
CSSΛίϯϙʔωϯτʹؚΊΔ άϩʔόϧ ίϯϙʔωϯτ X
ϝϦοτ • ίϯϙʔωϯτͱCSSͷґଘ͕ؔ໌֬ʹͳ Γɺcode splitting͕ՄೳʹͳΔ • ίϯϙʔωϯτʹดͨ͡ϩʔΧϧͳωʔϜε ϖʔε͕͑Δ • ϙʔλϏϦςΟ্͕͢Δ
Ξϯνύλʔϯ2
ίʔυDRYɺग़ྗඇDRY
CSS in JSΛ֮͑ͨͯͷࠒͷࢲ ώϟοϋʔʂJSͰclassΛ֦ுͰ͖Δʔ̇ const basicButton = { textAlign: 'center',
cursor: 'pointer', fontWeight: 700, // ... }; const redButton = { ...basicButton, backgroundColor: 'red' };
Ϗϧυޙͷίʔυͷ͜ͱΛ ߟ͍͑ͯͳ͔ͬͨ
ग़ྗ͞ΕΔCSS .basic-button { text-align: center; cursor: pointer; font-weight: 700; //
... } .red-button { text-align: center; cursor: pointer; font-weight: 700; background-color: red; // … }
ग़ྗ͞ΕΔCSS .basic-button { text-align: center; cursor: pointer; font-weight: 700; //
... } .red-button { text-align: center; cursor: pointer; font-weight: 700; background-color: red; // … } DRY͡Όͳ͍
ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles
ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles
ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹDRY͡Όͳ͍ʂʂɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Yʉ
ͻΐͬͱͯ͠ճආࡦ͕͋Δʁ styled componentsৄ͍͠ํ ڭ͍͑ͯͩ͘͞
ίʔυ͕DRYͰ ग़ྗ͕DRYͰͳ͍ͱݶΒͳ͍ ※SASSͷ@extendsɺCSS Modulesͷcomposesग़ྗDRYͰ͢
ղܾࡦ
൚༻తͳελΠϧΛෳͷ ίϯϙʔωϯτͰ͍ճ͍ͨ࣌͠ • ͦͷελΠϧͦͷͷΛίϯϙʔωϯτʹׅ Γͩ͠ɺίϯϙʔωϯτ୯ҐͰ͍ճ͢ • ίϯϙʔωϯτ୯ҐͰͷ͍ճ͠ͳΒɺಉ͡ Α͏ͳclass͕ॏෳͯ͠ग़ྗ͞ΕΔ͜ͱͳ͍ -> ΄ͱΜͲελΠϧ͚ͩͷখ͍͞ίϯϙʔωϯ
τ͕ͨ͘͞ΜͰ͖Δ
෦తʹελΠϧΛม͍͑ͨ࣌ • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css';
function Button(props) { return ( <button className={classNames( button, { [red]: props.isRed } )}> {props.children} </button> ); }
෦తʹελΠϧΛม͍͑ͨ࣌ • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css';
function Button(props) { return ( <button className={classNames( button, { [red]: props.isRed } )}> {props.children} </button> ); } ͜͜ʹ w ར༻ଆ͔ΒʮதʯΛͤΔ Α͏ʹ͢Δ w 8FC$PNQPOFOUT 7VFKT ͳΒTMPU w "OHVMBSͳΒOHDPOUFOU
• ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css'; function
Button(props) { return ( <button className={classNames( button, { [red]: props.isRed } )}> {props.text} </button> ); } ͜ΕΑ͘ͳ͍ ෦తʹελΠϧΛม͍͑ͨ࣌
ར༻ଆ͔Βݟͨ߹ // ྑ͍ྫ: ॊೈ <Book>Click Me!</Book> <Book><a href="...">Click Me!</a></Book> <Book><i
className="icon"></i>Click Me!</Book> // ѱ͍ྫ: ॊೈͰͳ͍ // ଟ༷ͳཁ݅ʹରԠ͠Α͏ͱ͢Δͱɺ // ίϯϙʔωϯτͷ࣮͕ͲΜͲΜෳࡶʹ <Book text="Click Me!"></Book> ͜ΕΞϯνύλʔϯ ˞$44ࣗମͷͷͰͳ͍͕
ͭ·Γ
ίϯϙʔωϯτϕʔεΛపఈ͢Δ -> ͍͍ίʔυ͕Ϗϧυ͞ΕΔ • CSSΛίϯϙʔωϯτʹؚΊΔ • ελΠϧͷ࠶ར༻ͷ୯ҐΛίϯϙʔωϯτʹ ͢Δ • slotΛͬͯॊೈੑΛ֬อ͢Δ
ॳΊෆ҆ͩͬͨ • ओͳݒ೦ • ίϯϙʔωϯτ୯ҐͰͷελΠϧͷ͍ճ͠ Ͱཻ͕ߥ͗ͯ͢ɺ݁ہclass୯Ґͷ͍ճ ͠ͷັྗʹ߅͑ͳ͍ͷͰʁ -> ࠓͷͱ͜Ζᐜ༕
Atomic Design?
͏·Έ͕Α͔͍ͬͯ͘ͳ͍ • ͏·͍ͷ͔͠Εͳ͍ • ͜ͷઌߦ͖٧·ͬͨΒऔΓೖΕΔ͔ • Atoms, Molecules, Organismsͷ͚͕۠͠ ͍ͱ͍͏ΛΑ͘ฉ͘
-> ࠓͷΓํɺϏϧυ݁Ռͱ͍͏࣮རϕʔε ͷઃܭͰ࣮֬ʹ͏·͘ɺ͔ͭͦͷ؍Ͱઃܭʹ ໎͏͜ͱ͕ࠓͷͱ͜Ζ͋·Γͳ͍
Thank you!