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 設計 / Modern CSS Design
Search
Yuki Ishikawa
March 11, 2016
Technology
0
190
コンポーネント時代の CSS 設計 / Modern CSS Design
Gotanda.js #3
https://gotandajs.connpass.com/event/26027/
Yuki Ishikawa
March 11, 2016
Tweet
Share
More Decks by Yuki Ishikawa
See All by Yuki Ishikawa
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
880
ORM と向き合う
hoto17296
14
11k
明日業務で役立たない Web 開発 TIPS
hoto17296
0
170
クソ bot 実装ライブコーディング
hoto17296
0
220
DeepGBM 論文の紹介
hoto17296
0
580
試行錯誤のための Docker 活用術
hoto17296
4
3k
Hive 集計テクニック
hoto17296
0
490
データ分析と Docker / Data Analysis with Docker
hoto17296
0
360
DeepCluster 論文の紹介
hoto17296
7
2.5k
Other Decks in Technology
See All in Technology
Lambda management with ecspresso and Terraform
ijin
2
140
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
3
250
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.6k
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
260
SRE新規立ち上げ! Hubbleインフラのこれまでと展望
katsuya0515
0
160
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
0
150
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
190
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
2
770
Google Agentspaceを実際に導入した効果と今後の展望
mixi_engineers
PRO
3
340
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか?
cap120
1
430
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
13k
LTに影響を受けてテンプレリポジトリを作った話
hol1kgmg
0
310
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Embracing the Ebb and Flow
colly
86
4.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
How to Ace a Technical Interview
jacobian
278
23k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How STYLIGHT went responsive
nonsquared
100
5.7k
Transcript
ίϯϙʔωϯτ࣌ͷ CSS ઃܭ Gotanda.js #3
@hoto17296 • גࣜձࣾΨΠΞοΫε • Gotanda.js ओ࠻
ίϯϙʔωϯτࢦ • ৼΔ͍ (JavaScript) ͱ ߏ (HTML) Λ ͻͱͭͷίϯϙʔωϯτͱͯ͠هड़Ͱ͖ͯศར •
มߋ͍͢͠ • ࠶ར༻͍͢͠
ߏ ৼΔ͍
ݟͨ (CSS) Ͱ ίϯϙʔωϯτࢦ͍ͨ͠ʂ ͋ͬͪͱͬͪ͜Ͱ "ߏ" "ৼΔ͍" Ұॹ͚ͩͲ͍ͨͬͯΔελΠϧ͕ҧͬͯ
ίϯϙʔωϯτͷݟ่͕ͨΕΔ Λ͍͗ͨ
CSS ͷείʔϓ CSS άϩʔόϧείʔϓͰ͔͠ఆٛͰ͖ͳ͍ มߋΛՃ͑ΔͱͲ͜ʹӨڹ͢Δ͔Θ͔Βͳ͍
CSS ͷείʔϓ ด͡Δ͜ͱ͕Ͱ͖ͳ͚Ε ίϯϙʔωϯτࢦͰͳ͍ ดͨ͡ CSS Λॻ͘͜ͱ͕Ͱ͖Ε ίϯϙʔωϯτࢦͰ͖Δ (ʁ)
ดͨ͡ CSS Λॻ͘ํ๏ 4બ
1. Shadow DOM • Web Components ͷ༷ͷͻͱͭ • Polymer ͑ಈ͘
• Chrome ͱ Firefox Ͱ࣮͞Ε͍ͯΔ
ྫɿ video ཁૉͷίϯτϩʔϥ
ྫɿ video ཁૉͷίϯτϩʔϥ
1. Shadow DOM • ࣅඇ͡Όͳ͘ϚδΜͷϩʔΧϧείʔϓ • ເෆ҆ͨ͘͞Μ٧·͍ͬͯΔ • ۀͰ͏ͷ·༷ͩࢠݟ͍ͨ͠ؾ࣋ͪ •
Electron ͰͳΒ͑ͦ͏
2. CSS in JS • ίϯϙʔωϯτʹελΠϧΛهड़͢Δ • React: CSS in
JS • React ίϯϙʔωϯτʹॻ͖ • Radium • (ଞʹ͍͔ͭ͘πʔϧ͋Δׂ͕Ѫ)
+4ΦϒδΣΫτ ͱͯ͠ελΠϧΛ ॻ͘ ద༻ ྫɿ React ίϯϙʔωϯτʹॻ͖
2. CSS in JS • ཧతͳΧλνͩͱࢥ͏͕ɺԿ͔ͱͭΒ͍ • طଘ CSS ͔ΒͷҠߦ͕μϧ͍
• ಉ͡ϑΝΠϧʹελΠϧ·Ͱॻ͍ͪΌ͏ͱ ίϯϙʔωϯτͷݟӫ͕͑Α͘ͳ͍ • ࢠཁૉʹΫϥε͚ͭΔͷखؒ • ٖࣅཁૉϝσΟΞΫΤϦ͕͑ͳ͍
3. ໋໊نͰറΔ • OOCSS, BEM, SMACSS, FLOCSS ͳͲ • CSS
ʹடংΛͨΒͨ͢Ίͷઃܭख๏ • CSS ͷϧʔϧΛΧςΰϥΠζ͢Δ • ΧςΰϦ͝ͱͷنଇʹैͬͯΫϥε໊͕ܾ·Δ
ྫɿ SMACSS • Base: ཁૉͦͷͷͷελΠϧ • Layout: ϖʔδΛׂ͢ΔελΠϧ • Module:
࠶ར༻Մೳͳύʔπ • State: Layout Module ͷঢ়ଶ • Theme: αΠτશମͷ৭େ͖͞ͳͲͷςʔϚ ίϯϙʔωϯτͱ ରʹ͢Δͱྑ͍
3. ໋໊نͰറΔ • ϕλʔͳํ๏ͬΆ͍ • ͍͘͠ (ཁग़య) • ʮӡ༻ͰΧόʔʯͰଥڠͯ͠Δײͳ͍Ͱ͔͢ •
͍ͪͲ໋໊نΛറΔͱมߋͮ͠Β͍ • ࡞Γ࢝Ίʹ໋໊نͰΉͷ͍ͬͨͳ͍ • ͬͱΧδϡΞϧʹॻ͍͍͖͍ͯͨ
4. CSS Modules • Ϋϥε໊ΛϋογϡԽ͢Δ͜ͱʹΑͬͯ (࣮࣭) ϩʔΧϧείʔϓʹͳΔ • webpack ͷ
css-loader Λ͏ͱ؆୯ • Browserify ൛ highly experimental • (ͦΕҎ֎Α͘Θ͔Βͳ͍)
FYQPSU DPNQJMF ద༻ ʊਓਓਓਓਓʊ ʼɹ͍͢͝ɹʻ ʉ:?:?:?:ʉ
CSS Modules • ࠓ·ͰͲ͓Γͷ CSS Λॻ͘ײ͡Ͱ CSS in JS Ͱ͖Δ
• ໋໊نͱ͔ߟ͑ͣʹϩʔΧϧείʔϓʹͰ͖Δ • ࡶʹ CSS ॻ͚ͯ࠷ߴ • webpack ͬͯΔͳΒ͏͜ΕͰ͍͍ͷͰʁ
ดͨ͡ CSS Λॻ͘ํ๏ 1. Shadow DOM 2. CSS in JS
3. ໋໊نͰറΔ 4. CSS Modules
·ͱΊɿ ดͨ͡ CSS Λॻ͘ํ๏ • webpack ͳΒ css-loader ͑Αͦ͞͏ •
ͦΕҎ֎໋໊نͰറΔͷ͕ແ • ಛघͳέʔε (Electron ͱ͔) Ͱ͋Ε Shadow DOM ΛͬͯΈ͍͍͔ͯ
ͬͯͯࢥͬͨ͜ͱ • ͪΌΜͱίϯϙʔωϯτઃܭ͓͚ͯ͠ CSS Λॻ͘ͷͥΜͥΜͭΒ͘ͳ͍ • ઃܭָͩ͠ɺมߋ༰қ • ٕज़πʔϧͷྲྀߦΓഇΓ͋ΕͲɺ ίϯϙʔωϯτࢦͷߟ͑ํͦͷͷ
ഇΕΔ͜ͱͳ͍ͣ
ίϯϙʔωϯτࢦ ͍͍ͧ (^ω^)