您好,登錄后才能下訂單哦!
這期內容當中小編將會給大家帶來有關css中 modules的作用是什么,文章內容豐富且以專業的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
css的全稱是Cascading Style Sheets(層疊樣式表),它是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。
css modules是什么
根據CSS Modules在Gihub上的項目,它被解釋為:
所有的類名和動畫名稱默認都有各自的作用域的CSS文件。
所以CSS Modules 不是一個官方的規范,也不是瀏覽器的一種機制,而是在構建步驟(例如使用Webpack或Browserify)中對CSS類名和選擇器限定作用域的一種方式(類似于命名空間)。
css modules優勢
解決全局命名沖突問題 css modules只關心組件本身 命名唯一
模塊化 可以使用composes來引入自身模塊中的樣式以及另一個模塊的樣式
解決嵌套層次過深的問題 使用扁平化的類名
為什么引入css Modules?
1)、全局樣式沖突
webpack進行打包時,將所有js文件導入到入口App.js文件中,樣式也會統一加載到入口中,根據css的layout規則,后面的樣式會覆蓋掉前面的樣式聲明,造成全局樣式的覆蓋問題。
2)、嵌套層次過深的選擇器
嵌套特別深會造成的問題:
- 根據css選擇器的解析規則可以知道,層級越深,比較的次數也就越多,影響整個頁面的渲染
- 增加了不必要的字節開銷
- 語義混亂 可擴展性不好,約束越多,擴展性越差
3)、無法共享變量
復雜組件要使用 js 和 css 來共同處理樣式。
上述就是小編為大家分享的css中 modules的作用是什么了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關知識,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。