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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
camcam_lemon
March 06, 2019
Programming
830
3
Share
styled-componentsで脱CSSModules
Meguro.css #5 @ oRo での登壇資料です
camcam_lemon
March 06, 2019
More Decks by camcam_lemon
See All by camcam_lemon
オレを実装してデザイン実装楽したい
lemon
0
75
要素のサイズを変えずに押しやすくする
lemon
0
88
iOSのキーボード入力ビューをカスタマイズする
lemon
0
300
視え方と文字の大きさ
lemon
1
450
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
320
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
5k
UI/UXデザイナーがデザインしてるもの
lemon
2
340
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
1k
ESLintで始めるTypeScriptの静的解析
lemon
8
2.2k
Other Decks in Programming
See All in Programming
How Swift's Type System Guides AI Agents
koher
0
140
ドメインイベントでビジネスロジックを解きほぐす #phpcon_odawara
kajitack
2
110
ネイティブアプリとWebフロントエンドのAPI通信ラッパーにおける共通化の勘所
suguruooki
0
250
3分でわかるatama plusのQA/about atama plus QA
atamaplus
0
110
Radical Imagining - LIFT 2025-2027 Policy Agenda
lift1998
0
250
Vibe하게 만드는 Flutter GenUI App With ADK , 박제창, BWAI Incheon 2026
itsmedreamwalker
0
540
20260320登壇資料
pharct
0
160
The free-lunch guide to idea circularity
hollycummins
0
420
生成 AI 時代のスナップショットテストってやつを見せてあげますよ(α版)
ojun9
0
340
それはエンジニアリングの糧である:AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
nrslib
1
830
Xdebug と IDE による デバッグ実行の仕組みを見る / Exploring-How-Debugging-Works-with-Xdebug-and-an-IDE
shin1x1
0
340
AIエージェントで業務改善してみた
taku271
0
490
Featured
See All Featured
Tell your own story through comics
letsgokoyo
1
890
The Illustrated Children's Guide to Kubernetes
chrisshort
51
52k
How to build a perfect <img>
jonoalderson
1
5.3k
Skip the Path - Find Your Career Trail
mkilby
1
100
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.4k
ラッコキーワード サービス紹介資料
rakko
1
2.9M
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
120
Designing for Performance
lara
611
70k
Mobile First: as difficult as doing things right
swwweet
225
10k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
110
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
64
53k
Building AI with AI
inesmontani
PRO
1
870
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制御に書き換えよう! -
ご静聴ありがとうございました!