Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
800
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
60
要素のサイズを変えずに押しやすくする
lemon
0
78
iOSのキーボード入力ビューをカスタマイズする
lemon
0
260
視え方と文字の大きさ
lemon
1
420
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
300
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
5k
UI/UXデザイナーがデザインしてるもの
lemon
2
330
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
1k
ESLintで始めるTypeScriptの静的解析
lemon
8
2.1k
Other Decks in Programming
See All in Programming
新卒エンジニアのプルリクエスト with AI駆動
fukunaga2025
0
150
CSC509 Lecture 14
javiergs
PRO
0
220
connect-python: convenient protobuf RPC for Python
anuraaga
0
360
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
180
無秩序からの脱却 / Emergence from chaos
nrslib
2
12k
『実践MLOps』から学ぶ DevOps for ML
nsakki55
2
560
AIコードレビューがチームの"文脈"を 読めるようになるまで
marutaku
0
310
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
matsu_chara
1
210
著者と進める!『AIと個人開発したくなったらまずCursorで要件定義だ!』
yasunacoffee
0
120
開発に寄りそう自動テストの実現
goyoki
1
450
AIエンジニアリングのご紹介 / Introduction to AI Engineering
rkaga
3
1.1k
Socio-Technical Evolution: Growing an Architecture and Its Organization for Fast Flow
cer
PRO
0
270
Featured
See All Featured
Navigating Team Friction
lara
191
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
3k
Building an army of robots
kneath
306
46k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Bash Introduction
62gerente
615
210k
Unsuck your backbone
ammeep
671
58k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
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制御に書き換えよう! -
ご静聴ありがとうございました!