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
styled-componentsで脱CSSModules
Search
camcam_lemon
March 06, 2019
Programming
3
780
styled-componentsで脱CSSModules
Meguro.css #5 @ oRo での登壇資料です
camcam_lemon
March 06, 2019
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
オレを実装してデザイン実装楽したい
lemon
0
55
要素のサイズを変えずに押しやすくする
lemon
0
74
iOSのキーボード入力ビューをカスタマイズする
lemon
0
250
視え方と文字の大きさ
lemon
1
400
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
290
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.9k
UI/UXデザイナーがデザインしてるもの
lemon
2
320
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
990
ESLintで始めるTypeScriptの静的解析
lemon
8
2.1k
Other Decks in Programming
See All in Programming
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
AI時代のUIはどこへ行く?
yusukebe
9
5.2k
Swift Updates - Learn Languages 2025
koher
1
260
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
270
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
160
パスタの技術
yusukebe
1
560
print("Hello, World")
eddie
1
260
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
140
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
12
5.3k
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
690
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
1k
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
How GitHub (no longer) Works
holman
315
140k
Thoughts on Productivity
jonyablonski
69
4.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Applications with DynamoDB
mza
96
6.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Rails Girls Zürich Keynote
gr2m
95
14k
Transcript
styled-components で脱CSSModules Meguro.css #5 @ oRo
None
CSSModules(CSS, SASS, SCSS) のメンテナンスに 消耗していませんか?
消耗ポイント !important 変更したら他の箇所が崩れた webpackェ... 前書いたCSSがわからないぞ
CSSModulesはCSSの辛さを そのまま引き継ぐ CSSも全てJSで管理したい!! >
styled-components < >
styled-componentsの特徴 - 普通のCSSと同じ記法 - 擬似要素、擬似クラスなどの セレクタをほぼサポート - スタイリングの継承(mixin) - Propsで見た目を制御
さぁ移行するぞ!!!
定数
擬似クラス
継承
for文
多段ネスト
None
どう書き替えるか分からない 箇所が結構でてくる... 大規模なCSSほど 構造は複雑になりがち
- CSSセレクタの「>」と「&」 - styled-componentsの「attrs」 複雑なCSSの書き換えには この2つがとても重要
- 定義済みコンポーネントの拡張 - より動的で拡張的な コンポーネントを作れる - 高階関数、HOCみたいなもの styled-componentsの「attrs」
None
None
関数として評価される この関数の中でオブジェクトを返却する
返却されたオブジェクトがそのまま テンプレートリテラルの中に渡ってくる
None
- & : 親セレクタへの参照 - >: 子セレクタのみの適用 CSSセレクタの「&」と「>」 これ以外にも「~」や「+」があります ※
&は正確にはシンタックスシュガー
None
None
ul, ol, li要素共通のスタイル 定義をここでしている
olの中のli要素の中で 更に入れ子になっている olリストのスタイリング ulの中のli要素の中で 更に入れ子になっている ulリストのスタイリング
理想はこんな感じ propsで振舞いを変 更する方が直感的で 分かりやすい こちらの方が Reactらしさがある
まとめ - styled-componentsの表現力は sassやscssにも劣らない - 大規模なcssを一度に書き換えるのは難しい - 制御構文の書き換えにはattrs - 複雑なcssの書き換えにはセレクター
セレクターはprops制御に書き換えよう! -
ご静聴ありがとうございました!