css模組化策略

2022-01-28 22:39:35 字數 1700 閱讀 7764

.block__element--modifier  


.塊__元素--修飾
封裝靠人為約定。

繼承靠層疊特性。

分治性強，復用性強。

.button 


.button--disabled 


.button--error 


.button--in-progress
processing...
缺點

人為約定總是不靠譜，有人覆蓋了就呵呵噠。

分治性強，復用性弱。

.product-details {}


.product-details__price {}


.product-details__price__num {}


.product-details__price__icon {}


.product-details__price--sale {}
缺點

需求肯定會變，萬一目錄(或者dom上下級結構)調整了就嘿嘿嘿。

我想product/intro.html也要用到.product-details__price__icon{}樣式咋辦。

還有，**冗餘了。

使用@import引入檔案，再呼叫變數或者mixins。

變數命名衝突

css原檔案

.common 


.normal 


.error
html原檔案

submit
生成的的css檔案

.components_submit_button__common__abc5436 


.components_submit_button__normal__def6547 


.components_submit_button__error__1638bcd
生成的js對映檔案

styles:
編譯後的html檔案

/*html*/


submit
colors.css

.primary 


.secondary
submit-button.css

.common 


.normal
編譯後的colors.css

.shared_colors__primary__fca929 


.shared_colors__secondary__acf292
編譯後的submit-button.css

.components_submit_button__common__abc5436 


.components_submit_button__normal__def6547 {}


submit
規範是人工約定的模組化，css in js是機器制定的模組化。

React 樣式 CSS模組化

css模組化，通過require引入樣式這種方式，優點是 解決了命名衝突和全域性汙染的問題 如何使用 1.安裝css loader依賴 npm install style loader css loader d2.配置webpack的css loader3.匯入和使用 footer.css foot...

webpack之css模組化

前言 本文演示了 開啟css loader的模組化配置 當前專案目錄和package.json配置 如何使css模組化？需要在我們的webpack.config.js中對css loader進行一些額外設定。編輯main.css 執行 npm run dev 瀏覽器截圖如下 可以看出瀏覽器控制台列印...

CSS模組化的理解

我沒有看過css模組化的相關書籍，所以 說的不一定正確，但是在工作中，我會用我理解的模組化方式提高工作效率，我理解的模組化，主要分為兩類。我沒有看過css模組化的相關書籍，所以 說的不一定正確，但是在工作中，我會用我理解的模組化方式提高工作效率，我理解的模組化，主要分為兩類。1 將常見的樣式剝離出來...