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
920
ORM と向き合う
hoto17296
14
11k
明日業務で役立たない Web 開発 TIPS
hoto17296
0
180
クソ bot 実装ライブコーディング
hoto17296
0
220
DeepGBM 論文の紹介
hoto17296
0
580
試行錯誤のための Docker 活用術
hoto17296
4
3k
Hive 集計テクニック
hoto17296
0
500
データ分析と Docker / Data Analysis with Docker
hoto17296
0
370
DeepCluster 論文の紹介
hoto17296
7
2.5k
Other Decks in Technology
See All in Technology
Understanding Go GC #coefl_go_jp
bengo4com
0
1.1k
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
190
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
180
認知戦の理解と、市民としての対抗策
hogehuga
0
340
Claude Code x Androidアプリ 開発
kgmyshin
1
580
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
5
610
あなたの知らない OneDrive
murachiakira
0
240
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
390
LLMエージェント時代に適応した開発フロー
hiragram
1
410
Product Management Conference -AI時代に進化するPdM-
kojima111
0
220
帳票Vibe Coding
terurou
0
140
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
2
230
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Writing Fast Ruby
sferik
628
62k
Thoughts on Productivity
jonyablonski
69
4.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Done Done
chrislema
185
16k
4 Signs Your Business is Dying
shpigford
184
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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 Λॻ͘ͷͥΜͥΜͭΒ͘ͳ͍ • ઃܭָͩ͠ɺมߋ༰қ • ٕज़πʔϧͷྲྀߦΓഇΓ͋ΕͲɺ ίϯϙʔωϯτࢦͷߟ͑ํͦͷͷ
ഇΕΔ͜ͱͳ͍ͣ
ίϯϙʔωϯτࢦ ͍͍ͧ (^ω^)