cssModules从计划使用到放弃

stormgens 发布于2019-08-30 15:54 / 2147人阅读

摘要：随着工程中代码量的增加，一套有效的管理规范也是必须和必要的。鉴于以上两种问题，放弃使用，如同行有好的解决方案欢迎留言。现在我们工程中的做法，每个组件一个组件名称功能日期，然后使用的天然嵌套方式在此类下进行书写。

在实际开发中，大部分人的精力都在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")
                ]
            }
        }

混合云专线服务从域名到网站 CSSModules spark从入门到前端从入门到精通

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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