RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案

7.避免使用复杂的选择器

使用复杂的选择器有两个主要问题。首先,提高的权重不仅会使以后更难重写现有规则,而且会增加浏览器匹配选择器的时间。

/ 匹配选择器 /

当浏览器试图解释选择器并确定匹配的元素时,它们从右到左。就性能而言,这比其他方法要快。让我们以下面的选择器为例。

.deeply .nested .selector span {   ... }

你的浏览器将首先从 span 开始。它将会匹配所有的 span标签,然后转到下一个。它将过滤掉 .selector内的 span,以此类推。

/ 理解选择器 /

机器不仅解析困难,而且人类也难以理解。以以下为例:

[type="checkbox"]:checked + [class$="-confirmation"]::after {   ... }

你认为上面的规则什么时候可以应用?这个可以通过制作一个自定义类,用JavaScript进行切换来简化。

8.不要删除轮廓(Outline)

这是开发人员在编写CSS时最常犯的错误之一。虽然你可能认为删除轮廓创建的高亮显示并没有什么不妥,但事实上,你正在使网站无法访问。通常的做法是在你的CSS中添加这个规则作为重设。

:focus {   outline: none; }

不过,这样一来,只有键盘导航的用户就不知道他们在你的网站上关注什么了。

改善CSS的优秀方法有哪些

如果默认样式对您的品牌不利,请创建自定义轮廓,只要确保在聚焦元素方面有某种指示即可。

9.移动优先

当您必须处理媒体查询时,请始终使用移动优先。以移动设备为先的方法意味着您首先要开始为小屏幕设备编写CSS并从那里开始构建。这也称为渐进增强。

这将确保你大部分时间里添加额外的规则来满足大屏幕设备的需求,而不是重写现有的CSS规则。这可以减少你最终的规则数量。

如何判断你是否使用了移动优先?如果你的媒体查询使用的是 min-width,那么你就走对了。

/* 移动优先的媒体查询,高于600像素的所有内容都会获得以下样式 */ @media (min-width: 600px) {   /* your CSS rules */ }  /* 非移动优先的媒体查询,600px以下的都会得到以下样式。 */ @media (max-width: 600px) {   /* your CSS rules */ }

10.压缩

最后,压缩捆绑包以减小其尺寸。压缩删除注释和空白,你的捆绑软件需要较少的带宽来获取数据。

改善CSS的优秀方法有哪些

如果你还没有,在服务器端也启用压缩功能。

进一步减少CSS和标记大小的另一种好方法是混淆类名。

改善CSS的优秀方法有哪些

为此,可以根据项目设置选择几个选项:

  • Webpack:对于Webpack,可以使用 css-loader 模块。

  • Gulp:对于Gulp,您可以使用 gulp-minify-cssnames 插件。

  • 创建你自己的实现:如果你没有用于项目设置的专用软件包,那么我会提供一个教程,向你展示如何创建自己的实现。

感谢各位的阅读,以上就是“改善CSS的优秀方法有哪些”的内容了,经过本文的学习后,相信大家对改善CSS的优秀方法有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


网页标题:改善CSS的优秀方法有哪些
当前网址:http://www.xdwzjz.cn/article/gchpoj.html
Top