css如何重构?

css如何重构?下面本篇文章给大家介绍一下为什么要对CSS代码重构?以及CSS代码如何重构?有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

CSS代码重构的目的

我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护。我们对CSS代码重构主要有两个目的:

  • 提高代码性能

  • 提高代码的可维护性

提高代码性能

提高CSS代码性能主要有两个点:

1、提高页面的加载性能

提高页面的加载性能,简单说就是减小CSS文件的大小,提高页面的加载速度,尽可以的利用http缓存

2、提高CSS代码性能

不同的CSS代码,浏览器对其解析的速度也是不一样的,如何提高浏览器解析CSS代码的速度也是我们要考虑的

提高代码的可维护性

提高CSS代码的可维护性主要是体现在下面几点:

1、可重用性

一般来说,一个项目的整体设计风格是一致的,页面中肯定有几个风格一致但有些许不同的模块,如何在尽可能多地重用CSS代码,尽可能少地增加新代码,这是CSS代码中非常重要的一点。如果CSS代码的重用性高,我们可能只需要写一些不一样的地方,对页面性能和可维护性、提高开发效率都有很大的帮助。

2、可扩展性

如果产品增加了某个功能,我们应该保证新增加的CSS代码不会影响到旧的CSS代码和页面,并且尽可能少地增加新代码而重用旧代码。

3、可修改性

如果某个模块产品经理觉得要修改样式,或者要删掉它,如果没有规划好相应的CSS代码,过了一段时间之后,开发人员可能已经不记得这段代码作用了几个地方,不敢修改或删除它,这样下去CSS代码也就越来越多,影响了页面的性能,还造成了代码的复杂度。

css代码如何重构?CSS代码重构的基本方法

前面说到了CSS代码重构的目的,现在我们来说说一些如何达到这些目的的一些基本方法,这些方法都是易于理解,容易实施的一些手段,大家平时可能也不知不觉地在使用它。

提高CSS性能的手段

首先说说如何提高CSS性能,根据页面的加载性能和CSS代码性能,主要总结有下面几点:

1、尽量将样式写在单独的css文件里面,在head元素中引用

有时候为了图方便或者快速搞定功能,我们可能会直接将样式写在页面的style标签或者直接内联在元素上,这样虽然简单方便,但是非常不利于日后的维护。将代码写成单独的css文件有几点好处:

(1)内容和样式分离,易于管理和维护

(2)减少页面体积

(3)css文件可以被缓存、重用,维护成本降低

2、不使用@import

这条手段已经是众所周知,这里简单提一下,@import影响css文件的加载速度

3、避免使用复杂的选择器,层级越少越好

有时候项目的模块越来越多,功能越来越复杂,我们写的CSS选择器会内套多层,越来越复杂。

建议选择器的嵌套最好不要超过三层,比如:

.header .logo .text{}

可以优化成

.haeder .logo-text{}

简洁的选择器不仅可以减少css文件大小,提高页面的加载性能,浏览器解析时也会更加高效,也会提高开发人员的开发效率,降低了维护成本。

4、精简页面的样式文件,去掉不用的样式

很多时候,我们会把所有的样式文件合并成一个文件,但是这样有一个问题:很多其他页面的CSS同时引用到当前页面中,而当前页面并没有用到它们,这种情况会造成两个问题:

(1)样式文件偏大,影响加载速度

(2)浏览器会进行多余的样式匹配,影响渲染时间。

正确的处理方法是根据当前页面需要的css去合并那些当前页面用到的CSS文件。

PS:合并成一个文件有一个优点:样式文件会被浏览器缓存,进入到其他页面样式文件不用再去下载。这条规则应根据场景来区别对待,如果是大项目,应该合并成不同的样式文件,如果是简单的项目,建议合并成一个文件即可。如果无法确认项目规模,建议分开成不同的样式文件,日后要合并也比较方便。

5、利用CSS继承减少代码量

我们知道有一部分CSS代码是可以继承的,如果父元素已经设置了该样式,子元素就不需要去设置该样式,这个也是提高性能的行之有效的方法。

常见的可以继承的属性比如:

color,font-size,font-family等等

不可继承的比如:

position,display,float等

提高可维护性的方法

提高CSS代码的可维护性,简单的说就是要让开发人员易于理解CSS代码,容易去修改它,不会破坏原有的功能。下面说说一些常用的手段。

1、命名与备注

命名是提高代码可读性的第一步,也是及其重要的一步。很多人都有这样的体会:命名是写代码中最让程序员头疼的事情之一,尤其是对母语非英语的开发人员来说,要找一个合适贴切的名字并不容易。提高自己命名的能力,可以多看看别人的代码。下面是CSS中的一些命名相关的建议:

头:header

内容:content/container

尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体佈局宽度:wrapper

左右中:left right center

登录条:loginbar

标志:logo

广告:banner

页面主体:main

热点:hot

新闻:news

下载:download

子导航:subnav

菜单:menu

子菜单:submenu

搜索:search

友情链接:friendlink

页脚:footer

版权:copyright

滚动:scroll

内容:content

标签:tags

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guide

服务:service

注册:regsiter

状态:status

投票:vote

合作伙伴:partner

导航:nav

主导航:mainnav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

子菜单:submenu

标题: title

摘要: summary

2、提取重复样式

这一个方法很容易理解,简单说就是提取相同的样式成为一个单独的类再引用,这样不仅可以精简CSS文件大小,而且CSS代码变少,更易于重用和维护。例如下面的例子:

原来的代码是这样:

.about-title{
    margin: 0 auto 6rem; 
    color: #333; 
    text-align: center; 
    letter-spacing: 4px; 
    font-size: 2rem; 
}
.achieve-title{
    margin: 0 auto 6rem; 
    color: #fff; 
    text-align: center; 
    letter-spacing: 4px; 
    font-size: 2rem; 
}

这两个样式的区别在于文字颜色的不同,我们可以将其公共的样式提取出来,然后再分别设置其不同的样式

.column-title{
    margin: 0 auto 6rem; text-align: center; letter-spacing: 4px; font-size: 2rem; 
}
.about{
    color: #333;
}
.achieve{
    color:#fff;
}

提取公用的部分,然后在页面上分别引用column-title和about等,这样代码更简洁,维护起来也更方便了。这个例子非常简单,实际上项目中可能有更复杂的情况,总之就要要尽可能的DRY,尽可能的提取重复的东西。

3、书写顺序

这个书写顺序指的是各个样式的书写顺序,下面是推荐的CSS书写顺序

(1)位置属性(position, top, right, z-index, display, float等)

(2)大小(width, height, padding, margin)

(3)文字系列(font, line-height, letter-spacing, color- text-align等)

(4)背景(background, border等)

(5)其他(animation, transition等)

书写顺序不一定非得按照上面的推荐来进行,而是根据你自己的习惯,但是最好能保证前后的习惯一致的,或者团队应该有一个共同的代码规范去遵守,这样后期维护起来也会方便许多。

更多前端开发知识,请查阅 HTML中文网 !!

以上就是css如何重构?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读

    提高3A四核羿龙II游戏配置的性能

    提高3A四核羿龙II游戏配置的性能,,以节能环保为主题的IT产业,目前3A低端平台处理器、主板芯片组、独立开发卡性能突出,特别是在与AMD的处理

    优化PostgreSQL中的批量更新性能

    优化PostgreSQL中的批量更新性能,数据,表格,在Ubuntu 12.04上使用PG 9.1. 我们目前需要24小时才能运行大量UPDATE数据库上的语句,其形式

    诺基亚威图性能好到哪里

    诺基亚威图性能好到哪里,诺基亚,手机,诺基亚威图性能好到哪里这是一部以前列出的手机。即使当时配置不高,该品牌的手机也不依赖于该功能吸

    魅蓝note6性能参数有哪些

    魅蓝note6性能参数有哪些,摄像头,蓝牙,魅蓝note6性能参数有哪些魅力蓝色Note6最好拍照。电池寿命更长。蓝色Note6使用高通 snapdragon 625

    2010年底DIY硬件总结和安装参考

    2010年底DIY硬件总结和安装参考,,它似乎只是一眨眼的功夫从过去的最后一眼。看看现在的岗位似乎就在昨天,但看看当年的内容是真的走了,如果

    国产电脑cpu测试|国产CPU性能

    国产电脑cpu测试|国产CPU性能,,国产CPU性能天玑9000答: 天玑9000更厉害。因为天玑9000是 最新发布的cpu,也是现在的天花板。而麒麟9000是 2

    保存硬盘上的数据,谁更有价值

    保存硬盘上的数据,谁更有价值,,常用的数据存储方式有两种:硬盘和光盘。用户或多或少对自己说,好的有很多人。争了,不知道你是否有账户的账号,两

    主流电脑cpu性能分析|cpu性能对比表

    主流电脑cpu性能分析|cpu性能对比表,,1. cpu性能对比表一、参数对比1、r7 5800H:制程工艺为7nm,主频3.2GHz,睿频4.4GHz,线程数是8核16线程,45W

    新老酷睿i3性能对比试验i34130和i33220

    新老酷睿i3性能对比试验i34130和i33220,,新的英特尔酷睿i3-4130 Haswell处理器架构已经推出了很长一段时间,虽然市场的时间还不长,已经成为