css模块化思想

css模块化思想

对于模块化这个思想大家都不陌生,这是项目开发的基本理念之一。前端模块化开发,马上会想到js模块化开发,可是很少听到关于css模块化开发的。

模块是可组合、分解和更换的单元。模块化是一种处理复杂系统分解成为更好的可管理模块的方式。它可以通过在不同组件设定不同的功能,把一个问题分解成多个小的独立、互相作用的组件,来处理复杂、大型的软件。看完模块化,是不是有种拼图的即视感,可以把大图分成各个小图,然后把小图拼成大图,分与合的艺术感。那么css模块化思想,也就是在css编写环境中,用上模块化的思想,把一个大的项目,分解成独立的组件,不同的组件负责不同的功能,最后把模块组装,就成了我们要完成的项目了。

css写法特别的灵活,也因为灵活,所以容易耦合在一起。当做一个大项目,几个人合作开发,代码耦合修改费时费力,需要迭代,面对庞大的代码,牵一发动全身。这个时候,模块化思想就是救星了。这时候就需要进行模块化的分离。css模块化的好处多多:提高代码重用率提高开发效率、减少Bug定位时间、更好的实现快速迭代、便于代码维护。

以前写css的时候没有什么全局观,都是一个一个板块来,写完后的代码庞大而又混乱,阅读性差维护起来也困难。经历了这些痛苦后尝试使用了scss,清晰的代码结构和简洁优雅的语法使我想摒弃以前写过的css。mixins的抽取让我感受到了css的编程思想和高效便捷的开发体验。 可是随着项目的规模越来越大需求越来越多,发现这种方法的缺点就暴露的一览无余,css文件越来越庞大,明明只是做了一个几乎一模一样的页面,代码共同性百分之90以上,可是编译出来的代码却又是重新复制了一份一样。在boss的指导下尝试把scss代码按照模块化、组件化的理念重构。这个理念并不陌生,可是实行起来发现难点颇多。经过一个多礼拜的摸爬滚打,基本算是完成了一个小目标。在组件的抽取、通用性、结合使用上还是存在问题。主要收获是在模块化的开发过程中养成了更好的开发思维和习惯。

要实现css模块化需要很多步,第一步是命名。要规范,尽量做到团队成员能一看就懂。第二是css样式合并,所谓样式合并,指的是一些不可分离的样式(按钮,图标等),将他们公共的样式部分进行合并,非公共的再次独立出来,以减小css文件的大小。目前我自己做到还不是很彻底。知道合并的好处,但是由于各种原因,没有从整体对样式进行设计,造成样式合并的效果基本上没有发挥出来。这需要往后不断的摸索。

这是我对模块化的一些认知和个人的理解,有错误的地方,欢迎指正,thanks!

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容