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
広島銀行におけるAWS活用の取り組みについて
masakimori
0
140
OpenAPIから画面生成に挑戦した話
koinunopochi
0
160
マイクロモビリティシェアサービスを支える プラットフォームアーキテクチャ
grimoh
1
240
モダンフロントエンド 開発研修
recruitengineers
PRO
3
340
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
1
310
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
mtx2s
6
550
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
5
1.1k
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
23
6.1k
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
3
250
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
3
630
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
220
LLMエージェント時代に適応した開発フロー
hiragram
1
410
Featured
See All Featured
Scaling GitHub
holman
462
140k
How to train your dragon (web standard)
notwaldorf
96
6.2k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Practical Orchestrator
shlominoach
190
11k
We Have a Design System, Now What?
morganepeng
53
7.7k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
What's in a price? How to price your products and services
michaelherold
246
12k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
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 Λॻ͘ͷͥΜͥΜͭΒ͘ͳ͍ • ઃܭָͩ͠ɺมߋ༰қ • ٕज़πʔϧͷྲྀߦΓഇΓ͋ΕͲɺ ίϯϙʔωϯτࢦͷߟ͑ํͦͷͷ
ഇΕΔ͜ͱͳ͍ͣ
ίϯϙʔωϯτࢦ ͍͍ͧ (^ω^)