CSS Modules

Transcript

1. CSS Modules
2. CSS Modules 知ってますか？
4. CSSの悩みを 解決するため 考え出されました
5. 例）命名規則について
6. CSSはグローバルスコープのため 予期しないコンポーネントから 参照されていることもあります
7. BEMの場合
8. Block Element Modifire
9. .answer__button--disabled
10. /*** submit-button.css ***/ .answer__button--disabled { } /*** answer.html ***/ <button class="answer__button--disabled">submit</button>
11. とても良くできてます しかし、クラス名を考えたり 守っていくことは大変です
12. CSS Modules
13. /*** answer-button.css ***/ .disabled { } /*** answer-button.js ***/ import styles from './answer-button.css' buttonElem.outerHTML = `<button class=${styles.disabled}>Submit</button>`
14. /*** answer.html ***/ <button class="ansewer_button__bisabled__abc12345"> submit </button>
15. クラス名は一意になるように コンパイル時に生成されます
16. 実際にやってみます
17. https://github.com/knktkc/css-modules-examples
18. まとめ
19. CSS Modulesじゃなければ ダメってことはないけど 新しい選択肢にどうぞ