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
960
Other Decks in Technology
See All in Technology
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
640
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.2k
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
130
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
MySQLのロックの種類とその競合
yoku0825
6
1.6k
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
Featured
See All Featured
What the flash - Photography Introduction
edds
65
11k
Automating Front-end Workflow
addyosmani
1362
200k
Scaling GitHub
holman
458
140k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
How to Ace a Technical Interview
jacobian
274
23k
Infographics Made Easy
chrislema
238
18k
Atom: Resistance is Futile
akmur
261
25k
RailsConf 2023
tenderlove
16
720
Code Review Best Practice
trishagee
58
16k
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!