首页>>前端开发
今天来分享 12 个优化 CSS 代码小技巧!
1. 避免高消耗属性
分析表明,一些CSS属性的渲染速度比其他属性慢,因此应该谨慎使用。包括以下属性:
box-shadow border-radius position: fixed transform :nth-child filter
上述属性都是对性能要求比较高的。如果这些属性使用较少,那这就不是问题。但是如果一个页面出现几百次,那么整体的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-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
这样,浏览器就会按顺序进行解析,直到解析到第一个可用的字体,如果都不可用,就会使用浏览器的默认字体。
11. 使用 CSS 重置
每个浏览器都有自己的 HTML 元素默认样式。假如有一个没有任何样式的 H1 元素,那么在默认情况下,在Firefox中,会给它一个上下为21.433px,左右为 0 的margin值。而在Safari中,会给它一个上下为21px,左右为 0 的margin值。
因此,重置CSS样式,一个很好的做法就是从头开始定义样式。很多开发人员会使用通用选择器(*)来执行基本重置:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
在使用通用选择器 (*) 进行重置有时会导致性能问题,因为它会针对每个标签去设置其样式。
可以使用一些常用的CSS重置代码库,比如normalize。也可以参考一些CSS重置的最佳实践。
12. 减少重复代码
当两个元素或选择器具有相同的 CSS 属性时,可以使用逗号来组合这些选择器,而不是重复声明样式,这样它们将共享 CSS 样式。
❌ 避免这样写:
.header {
background-color: #fefefe;
padding: 20px 0;
}
.footer {
background-color: #fefefe;
padding: 20px 0;
}
✅ 建议这样写:
.header,
.footer {
background-color: #fefefe;
padding: 20px 0;
}
- 上一篇: 全中国一共有多少IP地址?
- 下一篇: 网站页面黑白色滤镜效果实现技巧
猜你喜欢
- 2024-09-25 大搜不否词转化效果更好?
- 2024-02-23 提高小红书运营效率的6个工具
- 2022-11-10 【官方文档】百度搜索网站被黑防范指南
- 2022-11-03 【干货必备】百度搜索优质内容指南
- 2022-08-01 百度隐藏“快照”功能:原因未知-百度快照没了?
- 2022-06-20 浅析“百度搜索基础信息设置规范”!
- 搜索
-
- 2024-10-23 15条素材秘诀,灭了你的同行!
- 2024-09-25 大搜不否词转化效果更好?
- 2024-09-21 5大自媒体平台区别
- 2024-09-20 135个投放必备网站,收藏就对了!!
- 2024-09-09 怀念19年前的投放环境吗?
- 2024-09-05 2万字,收下这份千川投放宝典!
- 2024-08-29 做小红书,远离这10大误区!
- 2024-08-27 AI不会取代优化师,但市场会!
- 2024-08-21 抖音现状:第一名吃肉,第二名喝汤,第三名···
- 2024-08-20 小红书算法,3招破解!
- 2024-08-15 小红书笔记「高危词」汇总
- 2024-08-10 PbootCMS使用MySQL数据库配置···
- 2019-11-01 Origin DNS error:使用百···
- 2020-06-20 “401 - 未授权: 由于凭据无效,访···
- 2020-12-01 一级域名好还是二级域名好?
- 2020-10-13 百度抓取诊断工具一直抓取失败怎么办?
- 2019-12-09 域名解析后,网站返回状态码511应对方法
- 2024-04-07 小红书+抖音+直播常见违禁词及替换方法
- 2020-04-10 百度下拉框怎么刷?刷百度下拉框软件原理及···
- 2021-04-13 html/txt文件中文用浏览器打开有乱···
- 2019-08-12 网站出现“403,服务器上文件或目录拒绝···
- 2021-01-06 百度移动端的搜索结果上线“踩顶”功能,对···
- 2020-10-20 UC神马搜索怎么做快速排名优化
- 2019-11-06 正确打开.db数据库文件的两种方式,避免···
- 2022-11-01 SQlite删除数据后DB大小无改变解决···
- 2019-12-03 警惕wap手机站被黑!及时备份、检查才是···
- 2021-06-21 一代霸主浏览器,彻底凉凉!
- 2019-12-12 中小网站三个致命的SEO认识误区有哪些?
- 2022-11-03 SEM投放前,需要做哪些准备?
- 2021-02-20 网站降权了,你能给我先解决掉,再签SEO···
- 2020-12-11 百度搜索引擎喜欢哪种手机网站模板?为啥图···
- 2019-10-14 做seo处理死链接的详细方案
- 2019-11-27 网站排名优化之“无疾而终”:排名无故消失···
- 2019-03-01 手机端做seo与PC端的异同点
- 2023-02-03 流量运营的核心精华,又何止1000种方法
- 2022-08-02 2022,百度还是一个好的投放渠道吗?
- 热门标签
-
- Error 1016
- Origin DNS error
- 源DNS服务器错误
- .db文件
- element.style
- css
- 域名解析
- 别名解析
- CNME解析
- A记录
- asp.net
- php
- jsp
- 开发语言对比
- 白名单
- 香港主机
- 主机白名单
- 宝塔
- 锚点跳转
- 个人备案
- 企业备案
- 网站备案
- 301
- 301重定向
- 301永久重定向
- 字体大小
- 用户体验
- 虚拟主机
- 网站搭建
- 500错误
- 自适应网站
- web前端
- 移动端
- 响应式网站
- 阿里云服务器
- 实例类型
- 备案驳回
- 阿里云备案
- 网站被黑
- 后台入侵
- 源码安全
- pbootcms
- 权限设置
- 织梦cms
- 百度转码
- 禁止转码
- 开源CMS
- 域名备案
- ftp
- flashfxp
- 伪元素选择器
- 伪类选择器
- CSS3
- 蜘蛛
- 屏蔽蜘蛛
- 谷歌插件
- Chrome
- js空链接
- filter
- 滤镜
- 服务器流量
- 网站流量耗尽
- 网站建设
- 低成本网站
- win10连接远程服务器
- html标签
- seo标签
- 网站体验设计
- 老年用户
- 营销型网站
- 定制网站
- 网站安全
- robots.txt
- 服务器空间
- 网站空间选择
- 服务器稳定性
- 网站续费
- 网站设计
- seo要点
- seo建站方案
- 0收录
- 新域名收录
- 网站收录
- 网站标签
- 标签优化
- 独立ip主机
- seo服务器
- dede
- 分页样式代码
- X-Powered-By
- javascript
- 编程语言
- css3
- 图片居中
- PbootCMS
- sqlite
- mysql
- 数据库
- SQL