技术文章

什么样的CSS代码算是优雅的、高效的?

要知道,CSS对于互联网来说是很重要的,正是因为CSS的存在,让我们的网页才能更加的形式多样及美观。很多开发者觉得CSS简单,但却不知道想要精通CSS也是较难的,不同的人写出的CSS也存在着性能差异。

CSS代码

那对于CSS而言,如何写才能让CSS更优雅和高效呢?

优雅的CSS代码具有的特性

虽然说CSS没有一套官方的编码规范,但很多开发者在实际编码过程中还是总结出了一些心得让CSS代码规范化,主要措施有:

1、CSS代码命名要统一规范

不同公司的代码规范不同,最基本的要求是同一个项目的代码看上去要像一个人写的。

2、重置默认的CSS样式

此举是为了消除不同浏览器下的默认样式渲染差异的。

3、尽可能少的使用ID选择器,多使用class选择器

因为ID代表的是唯一,所以ID选择器不具备复用性,尽可能不使用ID选择器。

4、选择器和CSS属性及值全为小写

5、如果属性值为0,则后面不要带单位

6、用完了浮动后一定要清除浮动

7、模块化开发

模块化开发可以让项目代码整体看上去很清晰,结构感强。可借助amd、CommonJS、es6、webpack等来模块化开发。

8、CSS代码尽可能简洁化

同样,CSS代码很多样式是可以合并去写的,比如上边距与下边距如果分开写就是2条样式,但我们完全可以合并为一条去写。

如何让CSS运行更高效?

不要以为CSS代码没有性能开销,CSS代码如果写得不合理那同样很占性能,想写出高效的CSS那需要遵循以下:

1、尽可能不使用内联样式,改用外链样式表方式引入;

2、CSS代码内不要使用函数、表达式;

3、CSS外链文件进行压缩(去除不必要的空格、换行、Tab、注释等),同时服务器端开启GZip压缩,加快样式文件的加载速度;

4、尽可能少的进行绝对定位操作;