做了这么久的前端开发,听过Css模块化开发么?_html/css_WEB-ITnose

企鹅博客
企鹅博客
企鹅博客
28895
文章
0
评论
2020年9月13日22:11:47 评论 6 views 3434字阅读11分26秒

说起前端模块化开发,大部分人可能只会想到js模块化开发吧,网上也确实有各种各样的js模块化方法,但是鲜有谈论Css模块化开发的吧。因为JS是编程语言,比如业内的seajs、KISSY loader等,都有很成熟的模块化规则和方案了,前端工程师可以采用模块化的方法去编写页面,打包,上线,但是CSS界却没有。

后来,CSS界出现了SASS、LESS之类的语言,这些语言的出现可以说是非常应景的,有一点很重要,拿LESS举例,less支持了模块化,你可以@import ‘xxx.less’的形式导入其他less文件(模块),方便模块化。最近因为研究Css模块化的东西,查询了许多的有关模块化的资料,也确实有所收获,今天我就来介绍一下我了解的Css模块化开发方式吧。

其实,CSS规范里面就已经提到模块化相关内容了,就是@import语法。这个语法是被当前主流浏览器(当然包括ie6)原生支持的。具体怎么用我就不再多介绍了,属于Css基础最基础的部分,如果不会的自行脑补一下吧。为啥大家很少用呢,大概是因为在生产环境单独去用@import,会有较为严重的性能问题,而且不同的浏览器以及不同的用法下也有不同的表现,比较让人郁闷。但是,这并不妨碍@import成为 CSS模块化 的利器。

也许@import诞生就是为了解决css模块化的问题吧。我们先来举一个例子看看CSS模块化的优势:

传统的开发

假如你要开发某大型网站首页,那html的head里面应该是这样引用样式的:

为了页面上比较好的性能,减少创建http请求的消耗,我们一般会选择尽量减少link的css文件数量,假如本例中,页面上所有的样式都写在了style.css里面。可想而知对于一个大型网站来讲,这个文件会有多长。如果出现bug或者想改个东西,需要的成本会比较大;而且现在业界内对于CSS开发并没有很成熟的最佳实践或者约定可循,很多时候,前端为了加快进度,可能会把某一个功能的代码放在css不同的地方,如果想去掉某个功能,肯定不敢轻易删除页面Css代码。

这时候,CSS模块化的优势就体现出来了!

模块化开发

页面不改,我们还是只引用那一个样式,style.css,但是文件内容改成如下样式:

/*xxx页面入口样式文件style.css*/

@import './css/base.css';/*页面基础样式*/

@import './css/index.css';

@import './css/header.css';

@import './css/footer.css';

……

以上为多个模块的样式文件

这里,我们把style.css中混乱的样式划分成了一个一个的子文件,作为模块。可以看到,作为示例,我把页面的一些reset样式以及一些站点公用样式放在了css目录下的base.css中,把页头拆分成header.css,把页面的基础布局都放在了index.css这个文件中,底部的样式放在了footer.css。然后相应的代码就在对应的模块中写,是不是看起来简洁、好维护很多呢?

不光是简洁,使用@import形式的模块化还有下列好处:

1. 浏览器原生支持

这点是这个工具或者这种模块化形式的亮点。对于less,想要在开发环境下方便地修改,还需要额外引入一个js文件,或者采取 less实时编译之类的方法。而采用这种 @import xxx.css文件的方法,我们可以很方便地在开发阶段,直接调试。不需要引入额外的js文件去解析style.css文件。页面中直接引入style.css文件,通过http瀑布图可以看到,base.css、index.css等被一个一个加载进来了。

2. 方便删除某个模块

这个是所有语言模块化的优势,比如哪天PD说,首页底部那个地方我想换个样式,以往,我们很多都是直接在html里面改掉原 来的class,然后在style.css里面直接加上新的样式,老的也不敢删,怕删错了,即使删了也可能会漏,因为不停的bugfix可能会导致代码乱写。而采用模块化的方案,我直接把@import ‘./css/footer.css’这一行注释掉,然后再@import新的样式,这样,即使上线了,PD说效果不好,想换回原来的,只要改一下注释,重新打包,岂不是很方便?

3. 便于管理各种日常需求

好,页面做好了,上线了,PD今天脑袋抽风,说我要加一个功能,首页右侧加一个建议反馈入口,以往,我们要打开 style.css,想想在哪儿加好,或者直接加在最后,也不管最后的地方是放什么的。采用模块化之后,我们在style.css的最后再@import ‘./css/feedback.css’即可,然后加上注释:/* 2012-12-06 PD要求加上建议反馈 */,这样以后其他修改者也能快速知道你这个模块是干神马的。

4. 方便合作开发

这也是所有语言模块化的优势。对于一个大型项目,往往共同开发一个文件,冲突的可能性非常大,很多情况下,我改了一个小地方,提交上去就冲突了,然后再花费比bugfix多10倍的时间去解决冲突,然后还不知道会不会产生另外10个新bug,而模块化,每个人负责哪些模块,职责非常明确,不容易出现问题。

5. 方便多人协作

依赖写在入口文件,而不是打包脚本的配置文件。这样开发和打包分离,新加、减少模块不需要去修改打包配置,方便多人协作。

OK,说完CSS模块化,以及如何利用@import形式来组织自己的模块,大家是不是感觉这种形式让你眼前一亮呢?但是,如果这样开发完直接上线的话,页面会有一些问题。我就挑一些比较明显的问题说一下:

1. 因为@import的文件是额外请求的,所以页面加载的时候会有一小会儿的裸体(样式没加载进来),要等这些模块一个一个加载

2. 请求数太多,页面性能不佳,对服务器压力也会相对大一些。

3. 不同的浏览器以及不同的书写形式可能会有不同的加载顺序。

所以,最好的办法就是把模块打包!这和js模块化一样的,模块化开发,然后上线之前打包,线上完美使用。

CSS Combo:CSS模块打包利器

像js打包,一般都会有配备的打包工具。对于css,很多人是用ant的concat或者grunt的concat,这样做的不利的一面就是要把css模块依赖写在打包脚本的配置文件中,很不利于维护。很多时候,你新增了模块,忘记了修改打包脚本的配置,然后发上去发现我的脚本怎么没生效?查了半天才发现是没打包进去。

如果你利用我上面介绍的@import形式来组织你的css,那么你就可以用配套打包工具CSS Combo了:

首先安装css combo:

npm install -g css-combo

然后进入你所在的入口文件(本例为style.css)目录,输入:

csscombo style.css style.combo.css

这样就会把style.css文件打包成style.combo.css文件。很简单吧。当然也可以结合gulp一起用,更方便哦。

一些最佳实践

首先,我务必要提醒大家,@import语法一定要仔细看。

@import "./css/style1.css";

这里我个人建议就用相对路径就好了,当然也支持线上和本机绝对路径,只不过想对路径有利于团队协作。

一定要注意,CSS规范中,@import必须放在其他样式之前,比如:

@import "./css/style.css";

@import "./css/style2.css";

body{

margin:0px;

padding:0px;

}

而下面这种写法:

@import "./css/style.css";

body{

margin:0px;

padding:0px;

}

@import "./css/style2.css";

mod2.css是无法被浏览器@import进来的。所以我们推荐的最佳实践就是把所有的模块import都放在入口文件的最开始,方便管理。

为啥不直接用less

团队里面不是每人都会less,也不是每个人都喜欢less。而且less不支持gbk编码,还有上面提到的,调试需要引入一段js,很多情况下,开发套页面的时候都保留了。。。其实,最根本的原因就是less和css combo解决的不是一类问题,less更多的是把css编程化,css combo只专注css模块打包。

今天就说到这里吧,有什么讲得不周到的地方,可以与我沟通。欢迎关注个人微信公众号,一起学习,一起进步,我将每天分享一篇文章,学习罗胖死磕到底。

继续阅读
weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
PHP中钩子函数的实现与认识 php教程

PHP中钩子函数的实现与认识

假如有这么一段程序: function fun(){ fun1(); fun2(); }   首先程序执行完fun1()之后执行fun2()然后fun()结束。   但是,假如我们想对函数做一些变化。...
VS2010中呈现控件时出错的解决方法 C#.Net教程

VS2010中呈现控件时出错的解决方法

在制作控件的时候容易遇到“呈现控件时出错”“发生了未处理的异常。未将对象引用设置到对象的实例。”这样的错误,如下图:(也有可能仅仅只是因为未设置runat="server"标签而导致该错误,请先检查该...
详解python的super()的作用和原理 python教程

详解python的super()的作用和原理

Python中对象方法的定义很怪异,第一个参数一般都命名为self(相当于其它语言的this),用于传递对象本身,而在调用的时候则不必显式传递,系统会自动传递。 今天我们介绍的主角是super(), ...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: