這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)css中 modules的作用是什么,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
巴青ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景,ssl證書未來市場廣闊!成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道,可以享受市場價(jià)格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:028-86922220(備注:SSL證書合作)期待與您的合作!
css的全稱是Cascading Style Sheets(層疊樣式表),它是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁,還可以配合各種腳本語言動(dòng)態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。
css modules是什么
根據(jù)CSS Modules在Gihub上的項(xiàng)目,它被解釋為:
所有的類名和動(dòng)畫名稱默認(rèn)都有各自的作用域的CSS文件。
所以CSS Modules 不是一個(gè)官方的規(guī)范,也不是瀏覽器的一種機(jī)制,而是在構(gòu)建步驟(例如使用Webpack或Browserify)中對CSS類名和選擇器限定作用域的一種方式(類似于命名空間)。
css modules優(yōu)勢
解決全局命名沖突問題 css modules只關(guān)心組件本身 命名唯一
模塊化 可以使用composes來引入自身模塊中的樣式以及另一個(gè)模塊的樣式
解決嵌套層次過深的問題 使用扁平化的類名
為什么引入css Modules?
1)、全局樣式?jīng)_突
webpack進(jìn)行打包時(shí),將所有js文件導(dǎo)入到入口App.js文件中,樣式也會(huì)統(tǒng)一加載到入口中,根據(jù)css的layout規(guī)則,后面的樣式會(huì)覆蓋掉前面的樣式聲明,造成全局樣式的覆蓋問題。
2)、嵌套層次過深的選擇器
嵌套特別深會(huì)造成的問題:
- 根據(jù)css選擇器的解析規(guī)則可以知道,層級越深,比較的次數(shù)也就越多,影響整個(gè)頁面的渲染
- 增加了不必要的字節(jié)開銷
- 語義混亂 可擴(kuò)展性不好,約束越多,擴(kuò)展性越差
3)、無法共享變量
復(fù)雜組件要使用 js 和 css 來共同處理樣式。
上述就是小編為大家分享的css中 modules的作用是什么了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享題目:css中modules的作用是什么
鏈接URL:http://www.rwnh.cn/article16/jscidg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、域名注冊、Google、網(wǎng)站維護(hù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)