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
やし
June 18, 2019
Programming
0
640
『保守性の高いcssを書く』という不可能に立ち向かう
2019/06/18
giftee tech bash #1
で発表した資料です。
やし
June 18, 2019
Tweet
Share
More Decks by やし
See All by やし
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
140
Rust 探訪 / rust-chotto-wakaru
yashi8484
0
62
Web Frontend ビルドツールの過去と現在と未来 / The Past, Present, and Future of Web Frontend Build Tools
yashi8484
0
580
ブラウザの仕組みを完全に理解する / Fully understand how browsers work
yashi8484
0
73
Svelteで作るWebComponents / svelte-web-components
yashi8484
2
1.9k
Other Decks in Programming
See All in Programming
PRレビューのお供にDanger
stoticdev
1
130
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
38
15k
GAEログのコスト削減
mot_techtalk
0
120
もう僕は OpenAPI を書きたくない
sgash708
5
1.8k
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
580
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
5
390
Unity Android XR入門
sakutama_11
0
160
SwiftUI Viewの責務分離
elmetal
PRO
2
240
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
昭和の職場からアジャイルの世界へ
kumagoro95
1
390
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
850
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
800
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Adopting Sorbet at Scale
ufuk
74
9.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Music & Morning Musume
bryan
46
6.3k
The World Runs on Bad Software
bkeepers
PRO
67
11k
How to train your dragon (web standard)
notwaldorf
91
5.8k
Done Done
chrislema
182
16k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
450
Six Lessons from altMBA
skipperchong
27
3.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Transcript
『保守性の⾼いcssを書く』という 不可能に⽴ち向かう גࣜձࣾΪϑςΟ 4BB4%JW !ZBTIJ
©2019 giftee Inc. all rights reserved 2 σβΠϯϦχϡʔΞϧ TQ
©2019 giftee Inc. all rights reserved 3 σβΠϯϦχϡʔΞϧ QD
©2019 giftee Inc. all rights reserved 4 σβΠϯϦχϡʔΞϧ QD
©2019 giftee Inc. all rights reserved ࠓ͢͜ͱ 5 • なぜ保守性の⾼いcssを書くのは難しい(不可能︖)
なのか • ⽴ち向かうアプローチ • 保守性の⾼いcssを書けるかもしれない⽅法
©2019 giftee Inc. all rights reserved ࠓ͞ͳ͍͜ͱ 6 • ナウなヤングにバカウケのcssプロパティ
– ex. flexbox, CSS Grid, ...etc • cssの実装⽅針(書き⽅) • 保守性の⾼いcssを書く⽅法
࣭ʂ ©2019 giftee Inc. all rights reserved 7
DTTΛॻ͘ͷ͕ಘҙͳਓʂ ©2019 giftee Inc. all rights reserved 8
͜͜Ͱख͕ڍ͕Βͳ͍༧ఆ ©2019 giftee Inc. all rights reserved 9
DTTΛॻ͘ͷ͕͖ͳਓʂ ©2019 giftee Inc. all rights reserved 10
͔ͨ͠͠Βएׯख͕ڍ͕Δ͔ ©2019 giftee Inc. all rights reserved 11
©2019 giftee Inc. all rights reserved 12 ͳͥಘҙͳਓډͳ͍ͷ͔ • (jsなどの)プログラミングと違う・・・︖
• 求められたページの⾒た⽬を作るだけならできる、けど・・・。
อकੑߴ͘ ߏԽͯ͠ DTTΛॻ͘ ˠ͍͠ ©2019 giftee Inc. all rights reserved
13
ͳ͍ͥ͠ͷ͔ ˠDTT͕$BTDBEJOH4UZMF 4IFFU͔ͩΒ ©2019 giftee Inc. all rights reserved 14
©2019 giftee Inc. all rights reserved 15 カスケーディングとは,ある要素のあるプロパティに対する宣⾔が複 数あるとき,宣⾔の“強さ”の関係を定めて,うち 1
つの宣⾔だけが有 効になるようにするしくみである。 出典: http://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs2-05.htm
©2019 giftee Inc. all rights reserved 16 DBTDBEJOH • 宣⾔の強さは仕様上決まっているものであって、コード上に明⽰さ
れない • スタイル当てても適⽤されない/思ってないところにスタイルが当 たる
ʮอकੑͷߴ͍DTTΛॻ͘ʯͷ͕͍͠ཧ༝ ͦͷDTTͷ༷ DBTDBEJOH ©2019 giftee Inc. all rights reserved 17
©2019 giftee Inc. all rights reserved 18 • Rails Developers
Meetup 2019 • CSSの技術的負債との向き合い⽅ / How to Deal with Technical Debt of CSS (ja) • https://speakerdeck.com/upinetree/how-to-deal-with- technical-debt-of-css-ja
©2019 giftee Inc. all rights reserved 19 DTTͷٕज़తෛ࠴ • cssを変更したら思っていたところと違うところに影響した
• cssがどこにどう作⽤しているか分からないので⼿を加えたくない • 指定したスタイルがなぜか適⽤されない • 使われていないcssがあるけど怖くて消せない
©2019 giftee Inc. all rights reserved 20 引⽤: CSSの技術的負債との向き合い⽅ /
How to Deal with Technical Debt of CSS (ja)
©2019 giftee Inc. all rights reserved 21 引⽤: CSSの技術的負債との向き合い⽅ /
How to Deal with Technical Debt of CSS (ja)
©2019 giftee Inc. all rights reserved 22 DTTʮؔ৺ͷ୩ʯʹଘࡏ͢Δ エンジニア •
cssは苦⼿意識があるので⼿を出しづらい デザイナー • デザインの表現⼿段の⼀つであり、構造を設計しようというモチ ベーションが湧きづらい
ʮอकੑͷߴ͍DTTΛॻ͘ʯͷ͕͍͠ཧ༝ ͦͷDTTͷཱͪҐஔ ؔ৺ͷ୩ ©2019 giftee Inc. all rights reserved 23
ʮอकੑͷߴ͍DTTΛॻ͘ʯͷ͕͍͠ཧ༝ ͦͷDTTͷ༷ DBTDBEJOH ͦͷDTTͷཱͪҐஔ ؔ৺ͷ୩ ©2019 giftee Inc. all rights
reserved 24
©2019 giftee Inc. all rights reserved 25 DTTͷ༷ DBTDBEJOH ʹཱ͔ͪ͏
• cssの設計を考えていく • 様々な設計思想がある • 「ファイルの分け⽅」と「命名規則」 • OOCSS, FLOCSS, SMACSS, RSCSS, ...etc • BEMなどの命名規則
©2019 giftee Inc. all rights reserved 26 ࠓճ࠾༻ͨ͠ͷ SMACSS •
base, layout, module, state, themeに分ける • (BEMは不採⽤) • 理由: SMACSSに命名規則が⼊っている
©2019 giftee Inc. all rights reserved 27 ʮอकੑͷߴ͍DTTΛॻ͘ʯͨΊͷΞϓϩʔν ͦͷ エンジニアがちゃんと検討する
• 何かを構造的に組み⽴てることが得意 既存の設計⽅針に乗ると良さそう • cascadingをコントロールしやすい
©2019 giftee Inc. all rights reserved 28 DTTͷཱͪҐஔ ؔ৺ͷ୩ ʹཱ͔ͪ͏
引⽤: CSSの技術的負債との向き合い⽅ / How to Deal with Technical Debt of CSS (ja)
©2019 giftee Inc. all rights reserved 29 ʮؔ৺ͷ୩ʯΛʮຒΊΔʯ • cssを、デザインを表現するための⼿段だと(雑に)捉えると・・・
• 表現対象となるデザインが(ある程度)決まりを持ったものになって いてほしい • デザインシステムの導⼊ – 決まりのあるデザイン→構造化したcssに落とし込みやすい
©2019 giftee Inc. all rights reserved 30 ʮؔ৺ͷ୩ʯΛʮຒΊΔʯ • デザインはデザイナーと⼀緒に作っていくぐらいがよいのでは
– デザインはデザイナーだけのものではない • cssを書くのはエンジニアがやったほうが多分良い – 実装レベルで構造化するのはエンジニアのほうが得意
©2019 giftee Inc. all rights reserved 31 ʮอकੑͷߴ͍DTTΛॻ͘ʯͨΊͷΞϓϩʔν ͦͷ デザインをエンジニアとデザイナーが⼀緒になって作る
お互いの得意分野を活かす
©2019 giftee Inc. all rights reserved 32 ·ͱΊ • cssは、その仕様や⽴ち位置的に保守性の⾼いものにし⾟い
• 完璧に保守性を持ったcssにするのは不可能 • でも⽴ち向かわないと何も変わらない • やっていき
©2019 giftee Inc. all rights reserved 33 Φν • 実はCSS
in JSしてしまえばこんな設計どうこうとか考えなくてい いんですけどね