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
660
『保守性の高い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
230
Rust 探訪 / rust-chotto-wakaru
yashi8484
0
67
Web Frontend ビルドツールの過去と現在と未来 / The Past, Present, and Future of Web Frontend Build Tools
yashi8484
0
600
ブラウザの仕組みを完全に理解する / Fully understand how browsers work
yashi8484
0
77
Svelteで作るWebComponents / svelte-web-components
yashi8484
2
2k
Other Decks in Programming
See All in Programming
DevOpsDaysTokyo2025社内副業で他部門へ_越境_して見えた価値再定義最大1か月のリードタイムを10分に短縮したDevOps実践.pdf
susumutomita
0
110
KANNA Android の技術的課題と取り組み
watabee
0
170
プロダクト横断分析に役立つ、事前集計しないサマリーテーブル設計
hanon52_
3
530
AIコーディングの理想と現実
tomohisa
35
37k
REALITY コマンド作成チュートリアル
nishiuriraku
0
120
実践Webフロントパフォーマンスチューニング
cp20
45
9.9k
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
bitkey
1
130
カウシェで Four Keys の改善を試みた理由
ike002jp
1
120
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
160
UMAPをざっくりと理解 / Overview of UMAP
kaityo256
PRO
3
1.4k
RuboCop: Modularity and AST Insights
koic
2
2.3k
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
7
1.4k
Featured
See All Featured
Code Review Best Practice
trishagee
67
18k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Typedesign – Prime Four
hannesfritz
41
2.6k
Optimizing for Happiness
mojombo
378
70k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Facilitating Awesome Meetings
lara
54
6.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Rails Girls Zürich Keynote
gr2m
94
13k
Scaling GitHub
holman
459
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
How STYLIGHT went responsive
nonsquared
100
5.5k
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してしまえばこんな設計どうこうとか考えなくてい いんですけどね