CSS 代码优化的12个小技巧

2022-11-24 0 686

那时来撷取许多有利于提升操控性的 CSS 代码优化小基本功!

1. 防止高耗用特性

结果表明,许多CSS特性的图形速率比其它特性慢,因而如果慎重采用。主要就包括下列特性:

box-shadowborder-radiusposition: fixedtransform:nth-childfilter

前述特性都是对操控性明确要求较为高的。假如那些特性采用极少,那这就并非难题。但假如两个网页再次出现若干次,因而总体的CSS可能会受到影响,因而要慎重采用。

2. 采用 <link> 替代 @import

@import 准则主要就用作引入天然资源或是CSS文档。它会制止其它文档博戈达浏览,并可能会引致中文网站速率减慢。

❌ 千万别在CSS中这种操作方式:

@import url(“header.css”

);

@import url(“slider.css”

);

@import url(“content.css”

);

@import url(“footer.css”

);

能采用数个HTML 中的<link>条码来替代@import,它将博戈达读取CSS文档,能在很大某种程度上提升应用领域的读取的速率。

✅ 能在HTML这种操作方式:

<link rel=“stylesheet” href=“header.css”><link rel=“stylesheet” href=“slider.css”><link rel=“stylesheet” href=“content.css”><link rel=“stylesheet” href=“footer.css”>

3. 简化选择器

我们知道,有很多方法能对 HTML 元素进行样式设置,而最复杂的 CSS 选择器可能需要几毫秒的时间来解析。降低选择器的复杂性就能减少浏览器的负载并保持代码简洁明了。

❌ 防止这么写:

.container > div.links-container ul li .link

 {

}

✅ 能这么写:

.container .link

 {

}

4. 防止采用 !Important

在许多时候,能采用!Important 来提升样式的优先级,以使样式生效。除非没有别的办法,否则千万别采用!Important。

添加 !Important CSS声明将覆盖掉其它对应的样式声明,假如CSS的准则中 !Important 太多,浏览器就必须对代码进行额外的检查,这可能会降低网页的读取速率。因而,尽量防止采用!Important。在很多情况下我们是能通过选择器来实现样式重写的,除非是想要对第三方库的CSS进行重写。

5. CSS实现特效和SVG替代图片

网页中读取图像很可能需要很长的时间,尤其是在图像未针对web进行优化的情况下。在实现背景图、渐变、几何图形时,尽量少采用图片,而是采用CSS代码实现。采用 CSS 代码实现就会比图片读取速率更快。

还能采用SVG来替代PNG或是JPG图片:

能给图片添加效果;图像读取速率更快;图像自动适应用领域户屏幕。

6. 压缩 CSS

我们能通过压缩CSS文档来删除文档中所有的空白和不必要的代码来减少文档的大小。CSS文档变小了,读取的时间自然就变少了,网页的读取速率就会变。

7. 采用0而并非0px

当两个特性的值为0时,我们能不添加任何单位。即千万别这么写:0rem,0em,0px等。

当然,这么写是没有错的,但那些单位是没有用的,当处理两个巨大的CSS文档时,没有单位会比有单位时文档小一点。

8. 采用十六进制而并非颜色名称

当我们将颜色设置为颜色名称时,浏览器就会花费更多时间来找出颜色的十六进制值。假如想采用红色,那设置为color:red之后,不同的浏览器显示效果可能是不一样的,作为开发人员,我们不能让浏览器来决定网页将如何显示。

因而,尽量采用采用十六进制(例如红色#ff0000)来定义颜色,就能确保在所有浏览器中以相同的色调准确得显示想要的颜色。

9. 防止过多 font-family

为每个选择器去定义字体并并非两个好的办法,它会引致代码很难维护,假如以后想要更改字体,就不得不在每个选择器中更改它。

因而千万别像下面这种来定义字体:

h1

 {

  font-family

: Arial, Helvetica, sans-serif;

}

p

 {

  font-family

: Arial, Helvetica, sans-serif;

}

.selection

 {

  font-family

: Arial, Helvetica, sans-serif;

}

.footer

 {

  font-family“Times New Roman”

, Times, serif;

}

能在正文中定义要采用的字体,假如想要在其它选择器中覆盖该字体,就能通过在该选择器中采用所需的字体来实现:

body

{

  font-family

: Arial, Helvetica, sans-serif;

}

footer

{

  font-family“Times New Roman”, Times, serif

“;

}

假如网页中很多部分的字体都不尽相同,就能将字体定义在 class 中,然后在需要的HTML条码上采用该class即可:

.font-helvetica

 {

  font-family

: Arial, Helvetica, sans-serif;

}

.font-times

 {

  font-family“Times New Roman”, Times, serif

“;

}

10. 采用备用字体

有些情况下,应用领域中采用的字体可能在用户设备上不可用。在这种情况下,能指定采用其它备用字体:

p

{

  font-familyOpen Sans

, Arial, Helvetica, sans-serif;

}

这种,浏览器就会按顺序进行解析,直到解析到第两个可用的字体,假如都不可用,就会采用浏览器的默认字体。

11. 采用 CSS 重置

每个浏览器都有自己的 HTML 元素默认样式。假如有两个没有任何样式的 H1 元素,因而在默认情况下,在Firefox中,会给它两个上下为21.433px,左右为 0 的margin值。而在Safari中,会给它两个上下为21px,左右为 0 的margin值。

因而,重置CSS样式,两个很好的做法就是从头开始定义样式。很多开发人员会采用通用选择器(*)来执行基本重置:

* {

  margin0

;

  padding0

;

  box-sizing

: border-box;

}

在采用通用选择器 (*) 进行重置有时会引致操控性难题,因为它会针对每个条码去设置其样式。

能采用许多常用的CSS重置代码库,比如normalize。也能参考许多CSS重置的最佳实践。

12. 减少重复代码

当两个元素或选择器具有相同的 CSS 特性时,能采用逗号来组合那些选择器,而并非重复声明样式,这种它们将共享 CSS 样式。

❌ 防止这种写:

.header

 {

  background-color#fefefe

;

  padding20px 0

;

}

.footer

 {

  background-color#fefefe

;

  padding20px 0

;

}

✅ 建议这种写:

.header

,

.footer

 {

  background-color#fefefe

;

  padding20px 0

;

}

CSS 代码优化的12个小技巧

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务