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アンチパターン
Search
Kenji Imamula
November 25, 2018
Technology
3
1.6k
ビルドプロセスから考えるCSSアンチパターン
HTML5 Conference 2018の発表資料です。
Kenji Imamula
November 25, 2018
Tweet
Share
More Decks by Kenji Imamula
See All by Kenji Imamula
Angular Universal on Google App Engine
kimamula
2
1.2k
Other Decks in Technology
See All in Technology
ガチな登山用デバイスからこんにちは
halka
1
240
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
400
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
240
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
390
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
370
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
120
サンドボックス技術でAI利活用を促進する
koh_naga
0
200
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
230
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
100
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
460
Practical Agentic AI in Software Engineering
uzyn
0
110
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
66k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Documentation Writing (for coders)
carmenintech
74
5k
Building Applications with DynamoDB
mza
96
6.6k
A better future with KSS
kneath
239
17k
Optimizing for Happiness
mojombo
379
70k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Designing for Performance
lara
610
69k
Transcript
Ϗϧυϓϩηε͔Βߟ͑Δ CSSΞϯνύλʔϯ HTML5 Conference 2018 גࣜձࣾΧϒΫ ࠓଜݠ࢜ @kimamula
CSSͷΛ͠·͢
ϑϩϯτΤϯυΤϯδχΞͱCSSͱࢲ CSSಘҙ CSSۤख
CSSಘҙ CSSۤख ࢲ ϑϩϯτΤϯυΤϯδχΞͱCSSͱࢲ
ͦΜͳࢲͰ͕͢
৭ʑ͋ͬͯɺ CSSͱਅʹ͖߹Θͳ͚Ε ͳΒͳ͍ͱ͖͕͖ͨ…
ϲ݄ܦա
ؾ͕͍ͭͨ͜ͱ
Flexbox, Grid LayoutΛ͑ CSSͦΜͳʹͭΒ͘ͳ͍
Flexbox, Grid LayoutΛ͑ CSSͦΜͳʹͭΒ͘ͳ͍ ͜ͷ͠·ͤΜ
Ϗϧυϓϩηε͔Βߟ͑Δͱɺ CSSͷઃܭ͕ߟ͍͑͢
Ϗϧυϓϩηε͔Βߟ͑Δͱɺ CSSͷઃܭ͕ߟ͍͑͢ ͜ͷΛ͠·͢
Ϗϧυϓϩηε͔Βߟ͑Δ CSSΞϯνύλʔϯ
Ξϯνύλʔϯ1
ίϯϙʔωϯτϕʔεͳͷʹ CSSάϩʔόϧ
ͦͦCSSͱ͖߹͏͜ͱ Λܾҙͨ͠ݩڟݪҼͷҰͭ
• ϑϩϯτΤϯυ։ൃίϯϙʔωϯτϕʔε͕ ओྲྀ • ࠶ར༻ • είʔϓׂ ίϯϙʔωϯτϕʔε։ൃ
ͦΜͳதɺCSS͚ͩάϩʔόϧ άϩʔόϧ ίϯϙʔωϯτ ͱ͔ ಠࣗͷCSSͱ͔
άϩʔόϧ ίϯϙʔωϯτ ͱ͔ ಠࣗͷCSSͱ͔ ͦΜͳதɺCSS͚ͩάϩʔόϧ ͜ͷґଘόϯυϥʔ ͔Βݟ͑ͳ͍
όϯυϥʔʹΑΔޮతͳ code splitting͕Ͱ͖ͳ͍ • ଟ͔Εগͳ͔ΕΘΕ͍ͯͳ͍CSS͕όϯυϧ ʹࠞೖ͢Δ • ಛʹϖʔδॳظදࣔͰɺ࠷ݶඞཁͳCSS͚ͩ ΛHTMLʹΠϯϥΠϯͰຒΊࠐΉΑ͏ͳߴԽ ࢪࡦͷಋೖ͕͘͠ͳΔ
• ϖʔδͷද͕ࣔ͘ͳΔ
άϩʔόϧωʔϜεϖʔε • CSSΛ࣮࣭తʹϩʔΧϧείʔϓԽ͢Δٕज़Λ ͑ͳ͍ • ϑϨʔϜϫʔΫඪ४ • CSS Modules •
ͦͷଞCSS in JS • ౷తͳCSSͷͭΒΈͱBEMͳͲͷख๏Ͱઓ Θͳ͚ΕͳΒͳ͍
ϙʔλϏϦςΟ͕Լ͕Δ • ίϯϙʔωϯτΛϓϩδΣΫτ֎Ͱ࠶ར༻͢ Δқ্͕͕Δ • ͦͷίϯϙʔωϯτ͕ґଘ͢ΔελΠϧΛ࠶ ར༻ઌͰ༻ҙͯ͋͛͠ͳ͚ΕͳΒͳ͍
ղܾࡦ
CSSΛίϯϙʔωϯτʹؚΊΔ άϩʔόϧ ίϯϙʔωϯτ X
ϝϦοτ • ίϯϙʔωϯτͱCSSͷґଘ͕ؔ໌֬ʹͳ Γɺcode splitting͕ՄೳʹͳΔ • ίϯϙʔωϯτʹดͨ͡ϩʔΧϧͳωʔϜε ϖʔε͕͑Δ • ϙʔλϏϦςΟ্͕͢Δ
Ξϯνύλʔϯ2
ίʔυDRYɺग़ྗඇDRY
CSS in JSΛ֮͑ͨͯͷࠒͷࢲ ώϟοϋʔʂJSͰclassΛ֦ுͰ͖Δʔ̇ const basicButton = { textAlign: 'center',
cursor: 'pointer', fontWeight: 700, // ... }; const redButton = { ...basicButton, backgroundColor: 'red' };
Ϗϧυޙͷίʔυͷ͜ͱΛ ߟ͍͑ͯͳ͔ͬͨ
ग़ྗ͞ΕΔCSS .basic-button { text-align: center; cursor: pointer; font-weight: 700; //
... } .red-button { text-align: center; cursor: pointer; font-weight: 700; background-color: red; // … }
ग़ྗ͞ΕΔCSS .basic-button { text-align: center; cursor: pointer; font-weight: 700; //
... } .red-button { text-align: center; cursor: pointer; font-weight: 700; background-color: red; // … } DRY͡Όͳ͍
ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles
ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles
ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹDRY͡Όͳ͍ʂʂɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Yʉ
ͻΐͬͱͯ͠ճආࡦ͕͋Δʁ styled componentsৄ͍͠ํ ڭ͍͑ͯͩ͘͞
ίʔυ͕DRYͰ ग़ྗ͕DRYͰͳ͍ͱݶΒͳ͍ ※SASSͷ@extendsɺCSS Modulesͷcomposesग़ྗDRYͰ͢
ղܾࡦ
൚༻తͳελΠϧΛෳͷ ίϯϙʔωϯτͰ͍ճ͍ͨ࣌͠ • ͦͷελΠϧͦͷͷΛίϯϙʔωϯτʹׅ Γͩ͠ɺίϯϙʔωϯτ୯ҐͰ͍ճ͢ • ίϯϙʔωϯτ୯ҐͰͷ͍ճ͠ͳΒɺಉ͡ Α͏ͳclass͕ॏෳͯ͠ग़ྗ͞ΕΔ͜ͱͳ͍ -> ΄ͱΜͲελΠϧ͚ͩͷখ͍͞ίϯϙʔωϯ
τ͕ͨ͘͞ΜͰ͖Δ
෦తʹελΠϧΛม͍͑ͨ࣌ • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css';
function Button(props) { return ( <button className={classNames( button, { [red]: props.isRed } )}> {props.children} </button> ); }
෦తʹελΠϧΛม͍͑ͨ࣌ • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css';
function Button(props) { return ( <button className={classNames( button, { [red]: props.isRed } )}> {props.children} </button> ); } ͜͜ʹ w ར༻ଆ͔ΒʮதʯΛͤΔ Α͏ʹ͢Δ w 8FC$PNQPOFOUT 7VFKT ͳΒTMPU w "OHVMBSͳΒOHDPOUFOU
• ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css'; function
Button(props) { return ( <button className={classNames( button, { [red]: props.isRed } )}> {props.text} </button> ); } ͜ΕΑ͘ͳ͍ ෦తʹελΠϧΛม͍͑ͨ࣌
ར༻ଆ͔Βݟͨ߹ // ྑ͍ྫ: ॊೈ <Book>Click Me!</Book> <Book><a href="...">Click Me!</a></Book> <Book><i
className="icon"></i>Click Me!</Book> // ѱ͍ྫ: ॊೈͰͳ͍ // ଟ༷ͳཁ݅ʹରԠ͠Α͏ͱ͢Δͱɺ // ίϯϙʔωϯτͷ࣮͕ͲΜͲΜෳࡶʹ <Book text="Click Me!"></Book> ͜ΕΞϯνύλʔϯ ˞$44ࣗମͷͷͰͳ͍͕
ͭ·Γ
ίϯϙʔωϯτϕʔεΛపఈ͢Δ -> ͍͍ίʔυ͕Ϗϧυ͞ΕΔ • CSSΛίϯϙʔωϯτʹؚΊΔ • ελΠϧͷ࠶ར༻ͷ୯ҐΛίϯϙʔωϯτʹ ͢Δ • slotΛͬͯॊೈੑΛ֬อ͢Δ
ॳΊෆ҆ͩͬͨ • ओͳݒ೦ • ίϯϙʔωϯτ୯ҐͰͷελΠϧͷ͍ճ͠ Ͱཻ͕ߥ͗ͯ͢ɺ݁ہclass୯Ґͷ͍ճ ͠ͷັྗʹ߅͑ͳ͍ͷͰʁ -> ࠓͷͱ͜Ζᐜ༕
Atomic Design?
͏·Έ͕Α͔͍ͬͯ͘ͳ͍ • ͏·͍ͷ͔͠Εͳ͍ • ͜ͷઌߦ͖٧·ͬͨΒऔΓೖΕΔ͔ • Atoms, Molecules, Organismsͷ͚͕۠͠ ͍ͱ͍͏ΛΑ͘ฉ͘
-> ࠓͷΓํɺϏϧυ݁Ռͱ͍͏࣮རϕʔε ͷઃܭͰ࣮֬ʹ͏·͘ɺ͔ͭͦͷ؍Ͱઃܭʹ ໎͏͜ͱ͕ࠓͷͱ͜Ζ͋·Γͳ͍
Thank you!