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.6k
ビルドプロセスから考える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.2k
Other Decks in Technology
See All in Technology
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
6
2.3k
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
350
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
160
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
110
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
880
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
0
120
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
110
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
200
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
4
580
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
140
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
200
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
890
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Unsuck your backbone
ammeep
671
58k
Producing Creativity
orderedlist
PRO
347
40k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Docker and Python
trallard
46
3.6k
How to Ace a Technical Interview
jacobian
280
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Facilitating Awesome Meetings
lara
56
6.6k
Into the Great Unknown - MozCon
thekraken
40
2.1k
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!