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
Snowflake Openflow さわってみた
hoto17296
0
58
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
980
ORM と向き合う
hoto17296
14
11k
明日業務で役立たない Web 開発 TIPS
hoto17296
0
190
クソ bot 実装ライブコーディング
hoto17296
0
220
DeepGBM 論文の紹介
hoto17296
0
590
試行錯誤のための Docker 活用術
hoto17296
4
3k
Hive 集計テクニック
hoto17296
0
500
データ分析と Docker / Data Analysis with Docker
hoto17296
0
370
Other Decks in Technology
See All in Technology
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
hogelog
3
1.9k
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
200
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
910
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.8k
pprof vs runtime/trace (FlightRecorder)
task4233
0
160
20250929_QaaS_vol20
mura_shin
0
110
実装で解き明かす並行処理の歴史
zozotech
PRO
1
320
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
910
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
420
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
170
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
140
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
130
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Thoughts on Productivity
jonyablonski
70
4.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Mobile First: as difficult as doing things right
swwweet
224
10k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
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 Λॻ͘ͷͥΜͥΜͭΒ͘ͳ͍ • ઃܭָͩ͠ɺมߋ༰қ • ٕज़πʔϧͷྲྀߦΓഇΓ͋ΕͲɺ ίϯϙʔωϯτࢦͷߟ͑ํͦͷͷ
ഇΕΔ͜ͱͳ͍ͣ
ίϯϙʔωϯτࢦ ͍͍ͧ (^ω^)