CSS编写时的高性能以及高维护性代码优化建议总结

2020-05-03 11:29:13易采站长站整理

以上是从几个大的方向去说的,下面涉及某几个点谈一谈

使用css reset 统一浏览器显示效果

首先,html的标签是有原始样式的,但问题是在不同浏览器中,标签的默认样式不尽相同,其中的某些差异给开发造成了麻烦,早在2004年,就有人开发了第一个重置样式文件,叫undohtml.Css,后续又有了多种重置方案,其中有个方案“火爆一时”,此方案总共就一行代码*{margin:0;padding:0;}。重置了所有标签默认的margin、padding样式,但有一个弊端是增加了后续开发的复杂度,并不能很有效的提高整体开发的效率。另外,此方案性能也不佳,当页面元素很多时就会影响页面渲染的性能。所以,人们还在逐渐的探索更好的重置方式,目前有多个流行的重置方案,有Eric Meyer开发的Reset CSS和雅虎公司前端技术团队开发的YUI Reset CSS。其实并不存在一种方案适合所有项目,所以最好还是选择参考别人的方案然后设计一套适合自己项目的方案。

需要考虑如下几点:

(1)HTML5新标签 需要重置它们的display样式,因为在低版本IE中没有定义它们的默认display样式。

(2)padding、margin、border 标签在浏览器中的差异主要是与这三个样式有关的默认样式产生的,但也不是需要重置全部元素的margin、padding、border,应根据实际情况。

(3)字体设置 <h1>~<h6>、<strong>、<em>等语义化标签都有默认字体,但实际当中所需要的字体大小或者粗细都跟默认不同,所以一般项目中都会对他们进行重置。

(4)其他元素的样式重置 典型的有li默认的列表项样式,table的单元格之间默认空间,a链接的下划线等。

给css定义排序

Css的逻辑性不强,随意的书写也不影响其作用,如果不借助工具对其排序也会很繁琐,所以,很少有人会在意,但是排序还是有好处的。

比如:

1、更整洁

2、防止重复定义

3、能够清晰查看定义

4、后续维护能快速定位

排序方式:

1、按类型 如,显示和浮动、定位、尺寸、字体等

2、按字母 按字母顺序排列,优点是规则简单

3、按定义长度 按照样式定义的字符长度排列

各有优劣,实际应用中,推荐使用第一种。 但是如果单靠前端工程师在编写过程中这么做的话也是很难的,可以在写的过程中按照效率最高的方式写,提交代码时使用工具为css排序。既提高效率,又方便后续代码阅读和维护。有一款免费工具是 CSScomb。

合理利用css的权重,提高代码重用性

何为权重,即css众多类型选择符的优先级,优先级高的样式会覆盖优先级低的样式。权重的更具体规则,大家可以查阅资料,这里不赘述。