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
180
コンポーネント時代の 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
840
ORM と向き合う
hoto17296
14
10k
明日業務で役立たない Web 開発 TIPS
hoto17296
0
170
クソ bot 実装ライブコーディング
hoto17296
0
220
DeepGBM 論文の紹介
hoto17296
0
560
試行錯誤のための 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
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.3k
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
6
2.4k
OpenHands🤲にContributeしてみた
kotauchisunsun
1
470
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
350
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
200
フィンテック養成勉強会#54
finengine
0
180
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
600
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
120
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
130
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
200
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.9k
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
410
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
Docker and Python
trallard
44
3.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Automating Front-end Workflow
addyosmani
1370
200k
Side Projects
sachag
455
42k
Rails Girls Zürich Keynote
gr2m
94
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Done Done
chrislema
184
16k
Balancing Empowerment & Direction
lara
1
380
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
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 Λॻ͘ͷͥΜͥΜͭΒ͘ͳ͍ • ઃܭָͩ͠ɺมߋ༰қ • ٕज़πʔϧͷྲྀߦΓഇΓ͋ΕͲɺ ίϯϙʔωϯτࢦͷߟ͑ํͦͷͷ
ഇΕΔ͜ͱͳ͍ͣ
ίϯϙʔωϯτࢦ ͍͍ͧ (^ω^)