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
760
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
57
iOSのキーボード入力ビューをカスタマイズする
lemon
0
230
視え方と文字の大きさ
lemon
1
380
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
270
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.9k
UI/UXデザイナーがデザインしてるもの
lemon
2
320
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
970
ESLintで始めるTypeScriptの静的解析
lemon
8
2.1k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
Other Decks in Programming
See All in Programming
事業KPIを基に価値の解像度を上げる
nealle
0
200
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6k
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
800
Interface vs Types ~型推論が過多推論~
hirokiomote
1
230
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
190
primeNumberでのRBS導入の現在 && RBS::Traceでinline RBSを拡充してみた
mnmandahalf
0
250
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
140
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
940
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
190
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
120
ワンバイナリWebサービスのススメ
mackee
10
7.4k
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
220
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
68
11k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Being A Developer After 40
akosma
91
590k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Code Review Best Practice
trishagee
68
18k
Designing for humans not robots
tammielis
253
25k
Side Projects
sachag
454
42k
A designer walks into a library…
pauljervisheath
205
24k
Fireside Chat
paigeccino
37
3.5k
Adopting Sorbet at Scale
ufuk
76
9.4k
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制御に書き換えよう! -
ご静聴ありがとうございました!