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.4k
ビルドプロセスから考える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
1k
Other Decks in Technology
See All in Technology
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
FlutterアプリにおけるSLI/SLOを用いたユーザー体験の可視化と計測基盤構築
ostk0069
0
100
いざ、BSC討伐の旅
nikinusu
2
780
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
110
Terraform Stacks入門 #HashiTalks
msato
0
360
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
アプリエンジニアのためのGraphQL入門.pdf
spycwolf
0
100
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
140
飲食店データの分析事例とそれを支えるデータ基盤
kimujun
0
160
Taming you application's environments
salaboy
0
190
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Faster Mobile Websites
deanohume
305
30k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
Become a Pro
speakerdeck
PRO
25
5k
How to Ace a Technical Interview
jacobian
276
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
A Tale of Four Properties
chriscoyier
156
23k
Building an army of robots
kneath
302
43k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
Practical Orchestrator
shlominoach
186
10k
Optimizing for Happiness
mojombo
376
70k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
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!