CSS modules 簡單玩
12 likes1,059 views
本文介绍了 CSS Modules 的基本概念，强调了其在命名和作用域管理方面的优点。通过示例展示了如何使用 CSS Modules 来避免全局 CSS 的问题，并介绍了如何自定义类名以优化性能。文末提供了相关的 GitHub 示例和文档链接。
![Agenda - CSS MODULES 使⽤用⽅方法
localIdentName=[name]__[local]___[hash:base64:5]
可以⾃自定義名稱
例如，在webpack.config 設定：
index__titlePixnet___3Y30S](https://image.slidesharecdn.com/cssmodules-160318093106/85/CSS-modules-23-320.jpg)
CSS modules 簡單玩
- 1. Anna Su PIXNET F2E 簡單玩
- 2. Agenda - CSS MODULES 基本簡介 特⾊色說明 ＤＥＭＯ
- 4. Agenda - 為什麼要學 CSS MODULES 先談談為什麼要學？ 圖⽚片來源
- 5. Agenda - 為什麼要學 CSS MODULES ⼯工程師的煩惱 圖⽚片來源
- 6. Agenda - 為什麼要學 CSS MODULES 1.等下要吃什麼？ 2.命名 圖⽚片來源 ？？ ？ ⼯工程師常常要思考兩件事情：
- 7. Agenda - 為什麼要學 CSS MODULES 1.等下要吃什麼？ 總會有⼈人幫忙想... 圖⽚片來源
- 8. Agenda - 為什麼要學 CSS MODULES 2. 命名 越多⼈人想越⿇麻煩... 圖⽚片來源
- 9. Agenda - 為什麼要學 CSS MODULES 可以幫你處理 CSS 的命名！！ CSS MODULES
- 10. Agenda - CSS MODULES 基本簡介 A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
- 11. Agenda - CSS MODULES 基本簡介 The End of Global CSS
- 12. Agenda - CSS MODULES 特⾊色說明 幫你命名 不⽤用再搞懂 OOCSS BEM SMACSS
- 13. Agenda - CSS MODULES 使⽤用⽅方法 :global .page { padding: 20px; } .title { composes: title from "./mixins.css"; color: green; } .article { font-size: 16px; } .title { color: black; font-size: 40px; } .title:hover { color: red; } /* styles.css */ /* mixins.css */
- 14. Agenda - CSS MODULES 特⾊色說明 使⽤用 :global 寫全域 class 使⽤用 composes: 載⼊入外部 CSS 不是全域 class， class 都是亂數產⽣生
- 15. Agenda - CSS MODULES 使⽤用⽅方法 :global .page { padding: 20px; } .page { padding: 20px; } Before After
- 16. Agenda - CSS MODULES 使⽤用⽅方法 .title { composes: title from "./mixins.css"; color: green; } ._title_116zl_1 { color: black; font-size: 40px; } ._title_116zl_1:hover { color: red; } ._title_xkpkl_5 { color: green; } Before After
- 17. Agenda - CSS MODULES 使⽤用⽅方法 .article { font-size: 16px; } ._article_xkpkl_10 { font-size: 16px; } Before After
- 18. Agenda - CSS MODULES 使⽤用⽅方法 :global .page { padding: 20px; } .title { composes: title from "./mixins.css"; color: green; } .article { font-size: 16px; } ._title_116zl_1 { color: black; font-size: 40px; } ._title_116zl_1:hover { color: red; } .page { padding: 20px; } ._title_xkpkl_5 { color: green; } ._article_xkpkl_10 { font-size: 16px; } Before After
- 19. Agenda - CSS MODULES 特⾊色說明 the plugin will give you a JSON object for transformed classes: { "title": "_title_xkpkl_5 _title_116zl_1", "article": "_article_xkpkl_10", }
- 20. Agenda - CSS MODULES 特⾊色說明 效能會好嗎？ 產⽣生⼀一堆亂數
- 21. Agenda - CSS MODULES 使⽤用⽅方法 .article li { font-size: 16px; } ._article_xkpkl_10 { font-size: 16px; } Normal CSS Modules 找⾴頁⾯面上⾯面所有 li 元素 hash 不會重複，只會找⼀一個
- 22. Agenda - CSS MODULES 特⾊色說明 CSS MODULES 優化： 命名 效能
- 23. Agenda - CSS MODULES 使⽤用⽅方法 localIdentName=[name]__[local]___[hash:base64:5] 可以⾃自定義名稱 例如，在webpack.config 設定： index__titlePixnet___3Y30S
- 24. Agenda - CSS MODULES ＤＥＭＯ
- 25. Reference - CSS MODULES DEMO - github TJ - frontend-boilerplate Documentation about css-modules The End of Global CSS
- 26. Thanks! 感謝聆聽 ：）