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
CSS Modules
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Kaneko Takeshi
May 12, 2017
44
0
Share
CSS Modules
Kaneko Takeshi
May 12, 2017
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
38
Eye Tracking on the Browser
tkckaneko
0
93
IEEE754を完全に理解した
tkckaneko
1
83
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
99
多分これが一番早いと思います
tkckaneko
0
29
暗黒面の話
tkckaneko
0
30
CSR / SSR / SSG / JAMstack
tkckaneko
0
77
BOLT
tkckaneko
0
38
CSS Logical Properties and Values
tkckaneko
0
49
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
10k
エンジニアに許された特別な時間の終わり
watany
107
250k
WCS-LA-2024
lcolladotor
0
610
Leading Effective Engineering Teams in the AI Era
addyosmani
9
2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.8k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
180
Writing Fast Ruby
sferik
630
63k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.3k
Color Theory Basics | Prateek | Gurzu
gurzu
0
320
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
120
Transcript
CSS Modules
CSS Modules 知ってますか?
None
CSSの悩みを 解決するため 考え出されました
例)命名規則について
CSSはグローバルスコープのため 予期しないコンポーネントから 参照されていることもあります
BEMの場合
Block Element Modifire
.answer__button--disabled
/*** submit-button.css ***/ .answer__button--disabled { } /*** answer.html ***/ <button
class="answer__button--disabled">submit</button>
とても良くできてます しかし、クラス名を考えたり 守っていくことは大変です
CSS Modules
/*** answer-button.css ***/ .disabled { } /*** answer-button.js ***/ import
styles from './answer-button.css' buttonElem.outerHTML = `<button class=${styles.disabled}>Submit</button>`
/*** answer.html ***/ <button class="ansewer_button__bisabled__abc12345"> submit </button>
クラス名は一意になるように コンパイル時に生成されます
実際にやってみます
https://github.com/knktkc/css-modules-examples
まとめ
CSS Modulesじゃなければ ダメってことはないけど 新しい選択肢にどうぞ