CSS組件化思考

爲何組件化？

• 分層設計，代碼複用，減小冗餘；

• 維護方便，彈性好；

如何組件化？

目前代碼分紅三級：

1. 第一級粒度最細，是基礎，主要包含字體配置，顏色配置，UI框架（好比MUI或者pure.css）；

2. 第二級是組件層，項目中出現兩次及以上的樣式單獨抽離成一個組件，若是組件小於15個，單獨放到一個component.less文件中，大於15個（界限本身把握），考慮放到幾個不一樣的less文件中。由於樣有些樣式依賴於必定的DOM，因此須要針對less文件寫一個HTML文件一一對應後於組件對應的DOM；

3. 頁面層，剩餘的樣式，一個頁面一個less文件，沒啥多說的；

注意：上面第二條中把組件放到一個文件仍是分開放是各有利弊的，分開存放的話好處是須要使用哪一個組件就@import哪一個組件，不會形成代碼冗餘，缺點是less文件以及對應的HTML文件較多，管理成本高。把組件合起來放呢，若是組件使用了less中的命名空間的話也不會形成代碼冗餘（推薦使用less的命名空間），管理文件的成本也小。

使用less實現模塊化

目前爲止，CSS沒有模塊化的實現機制，藉助於less，能夠實現模塊化。

• 混合功能（複用的最直接體現）；

• 嵌套功能，不再須要寫一堆的子代和後代選擇器了，使用嵌套以後，樣式的層級簡單明瞭；

• 命名空間功能，這是模塊化的利器，利用它，咱們能夠方便的構建組件，同時又不會把多餘的東西釋放到全局空間；

• extend語法，當引用import進來的文件中的樣式的時候，使用extend顯示的指明，有點相似於C語言中的extern；

若是你們有更好的方案，歡迎留言交流，共同進步。