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
Kaneko Takeshi
May 12, 2017
0
34
CSS Modules
Kaneko Takeshi
May 12, 2017
Tweet
Share
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
10
Eye Tracking on the Browser
tkckaneko
0
71
IEEE754を完全に理解した
tkckaneko
1
50
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
69
多分これが一番早いと思います
tkckaneko
0
23
暗黒面の話
tkckaneko
0
14
CSR / SSR / SSG / JAMstack
tkckaneko
0
50
BOLT
tkckaneko
0
10
CSS Logical Properties and Values
tkckaneko
0
24
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
4 Signs Your Business is Dying
shpigford
175
21k
Teambox: Starting and Learning
jrom
128
8.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Being A Developer After 40
akosma
57
580k
Into the Great Unknown - MozCon
thekraken
10
1k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
The Invisible Side of Design
smashingmag
294
49k
Building Applications with DynamoDB
mza
88
5.6k
BBQ
matthewcrist
80
8.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
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じゃなければ ダメってことはないけど 新しい選択肢にどうぞ