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
56
要素のサイズを変えずに押しやすくする
lemon
0
75
iOSのキーボード入力ビューをカスタマイズする
lemon
0
250
視え方と文字の大きさ
lemon
1
410
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
290
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
5k
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
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
1.1k
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
2
460
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.1k
議事録の要点整理を自動化! サーバレス Bot 構築術
penpeen
3
1.5k
プログラマのための作曲入門
cheebow
0
460
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
570
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
270
Introducing FrankenPHP gRPC
dunglas
2
980
CSC305 Lecture 01
javiergs
PRO
1
380
半自動E2Eで手っ取り早くリグレッションテストを効率化しよう
beryu
6
1.7k
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
380
Deep Dive into Kotlin Flow
jmatsu
1
430
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Building Applications with DynamoDB
mza
96
6.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How to Think Like a Performance Engineer
csswizardry
27
2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
830
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
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制御に書き換えよう! -
ご静聴ありがとうございました!