cssModules從計劃使用到放棄

stormgens 發布于2019-08-30 15:54 / 2313人閱讀

摘要：隨著工程中代碼量的增加，一套有效的管理規范也是必須和必要的。鑒于以上兩種問題，放棄使用，如同行有好的解決方案歡迎留言。現在我們工程中的做法，每個組件一個組件名稱功能日期，然后使用的天然嵌套方式在此類下進行書寫。

在實際開發中，大部分人的精力都在js上，而css的管理總覺得不是那么重要。隨著工程中代碼量的增加，一套有效的css管理規范也是必須和必要的。最近一直想出一個工程中的css的命名規范，因此研究了一下css-loader的modules的配置，配置和使用都非常簡單明了，但是對于我現在的工程并不適合，具體問題如下:

在現在所有的工程中我們習慣了使用sass進行css的預編譯，同時還引入了compass這個類庫，這樣所有的公共樣式及類庫都是通過sass-resources-loader進行管理并注入到所有業務scss文件中，因此如果使用了cssModules則這此公共樣式或第三方類庫的class命名都需要手工進行修改，否則都會被自動修改為一個全局唯一的名稱。

在現在所有工程的開發中引入第三方包是一種普遍現象，現在我們的普遍做法是把第三方包的mini.css修改為scss文件，然后在入口中統一引入。第三包中的css中寫法各異，其中最大的問題是如果有動畫的@keyframes uploadAnimateInlineIn(antd中)，cssModules也會自動修改其命名，如果我們使用:global{把第三方包的代碼加載進來，如果css中包含-webkit-box-sizing:border-box；在編譯時也會提示錯誤}。
鑒于以上兩種問題，放棄使用cssModules，如同行有好的解決方案歡迎留言。

現在我們工程中的做法，每個組件一個class（組件名稱-功能-日期），然后使用sass的天然嵌套方式在此類下進行書寫。

if (loader === "sass-resources-loader") {
            options = {
                resources: [
                    path.join(ROOT_PATH, "node_modules/compass-mixins/lib/_animate.scss"),
                    path.join(ROOT_PATH, "node_modules/compass-mixins/lib/_lemonade.scss"),
                    path.join(APP_PATH, "css/common/variables.scss"),
                    path.join(APP_PATH, "css/common/mixins/common.scss")
                ]
            }
        }

GPU云服務器云服務器從域名到網站 CSSModules spark從入門到前端從入門到精通

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116814.html

CSSModules

摘要：支持不同的構建工具，這里我使用的是下文都是以為例。全局作用域允許用的語法聲明一個全局的作用域。使用普通的寫法，就會引用全局的的樣式我是結果的顯示黑色。的組合在里，一個選擇器可以繼承另一個選擇器。 showImg(https://segmentfault.com/img/bV7OHk?w=1050&h=360); 這篇文章來一起了解 css 模塊化的用法和原理，dome 地址：css ...

Youngdze 2019-08-30 14:22 評論0 收藏0
react搭建后臺管理（react初窺）

摘要：前言以前一直是用進行的開發于是決定年后弄一弄所以年后這段時間也就一直瞎弄可算是看到成果了本來是想寫一個類似仿今日頭條那樣的項目來入手后來又尋思還不如寫個后臺管理呢。于是乎自己便著手簡單的搭建了一個集中設置的版本。前言以前一直是用vue進行的開發, 于是決定年后弄一弄react, 所以年后這段時間也就一直瞎弄react, 可算是看到成果了本來是想寫一個類似 Vue仿今日頭條那樣...

wangjuntytl 2019-08-22 15:23 評論0 收藏0
關于一次線上出錯的思考--如何規避線上程序崩盤

摘要：近日在工作中由于疏忽問題導致某個客戶的系統直接崩盤，極大的影響了用戶使用產品的體驗。在經過修改之后，不得不思考下在日常開發中的一些壞習慣以及如何規避這些日常問題了。同時由于我們未能對錯誤進行好的處理，導致程序直接卡死。近日在工作中由于疏忽問題導致某個客戶的系統直接崩盤，極大的影響了用戶使用產品的體驗。在經過修改之后，不得不思考下在日常開發中的一些壞習慣以及如何規避這些日常問題了。在...

LiuRhoRamen 2019-08-22 17:57 評論0 收藏0
讓CSS更完美: PostCSS-modules

摘要：起初只是一個美化文檔的工具，但是事情到年發生了變化。對于來說，這意味著有問題的布局。和朝夕相伴的有和最終確定的。他們通過增加前綴的辦法，解決了命名沖突的問題。長長的前綴將成為歷史，歡迎來到未來的世界。譯者注（GeoffZhu）: 這篇適合一些使用過預處理CSS的開發者，比如less，sass或stylus，如果你都沒用過，那你一定不是個好司機。在PostCSS中早就可以使用CSS M...

Barry_Ng 2019-08-30 13:22 評論0 收藏0
相愛相殺終于結束蘋果宣布放棄愛爾蘭數據中心建設

摘要：本周四蘋果公司表示已經放棄價值億美元的愛爾蘭數據中心建設。愛爾蘭高等法院與近日發布裁決，駁回上訴者相關請求，允許建設蘋果數據中心項目。此次蘋果放棄愛爾蘭數據中心項目將會對阿森賴地區造成巨大損失。本周四蘋果公司表示已經放棄價值10億美元的愛爾蘭數據中心建設。早在2015年，蘋果公司宣布在愛爾蘭建設數據中心計劃，距今已經過去了2年之久，同期宣布建設的還有蘋果丹麥數據中心。目前，蘋果丹麥數據中心已...

2shou 2019-04-28 19:37 評論0 收藏0