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
690
styled-componentsで脱CSSModules
Meguro.css #5 @ oRo での登壇資料です
camcam_lemon
March 06, 2019
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
iOSのキーボード入力ビューをカスタマイズする
lemon
0
140
視え方と文字の大きさ
lemon
1
340
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
240
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.7k
UI/UXデザイナーがデザインしてるもの
lemon
2
310
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
910
ESLintで始めるTypeScriptの静的解析
lemon
8
2k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.4k
React.lazyとSuspenseで行うLazy Load
lemon
2
430
Other Decks in Programming
See All in Programming
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
0
220
2024 컴포즈 정원사
jisungbin
0
140
New Order in Cascade Sorting Order
mugi_uno
3
2.5k
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
1
930
Wallet API, Verifier APIで実現するIDカード on iPhoneの世界
shitamori1272
1
320
Scala におけるコンパイラエラーとの付き合い方
chencmd
1
150
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
240
私の考える初学者がBlazorできるまでの学習方法
tomokusaba
1
240
楽しく簡単に!QRコードの読み取り機能を実装しよう
penguinsan_pg
1
190
Rustではじめる負荷試験
skanehira
5
1.1k
詳解UIWindow
natmark
3
2k
BQ+dbt+Lookerを用いた、月間800億件以上の広告リクエストに対するデータモデリング
hanon52_
4
990
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.4k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
5 minutes of I Can Smell Your CMS
philhawksworth
201
19k
Mobile First: as difficult as doing things right
swwweet
220
8.8k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
28
2.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
27
8.9k
Gamification - CAS2011
davidbonilla
79
4.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
24
2k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Building Your Own Lightsaber
phodgson
101
5.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制御に書き換えよう! -
ご静聴ありがとうございました!