编写好的CSS代码能提升页面的渲染速度。本质上,一条规则都没有引擎解析的最快。MDN上将CSS选择符归拆分成四个主要类别,如下所示,性能依次降低。
- ID 规则
- Class 规则
- 标签规则
- 通用规则
对效率普遍认识是从Steve Souders在2009年出版的《高性能网站建设进阶指南》开始的,虽然Souders的书中罗列的非常详细,你可以在这里查看完整列表引用。你也可以在谷歌的高效的CSS选择器的最佳实践中查看更多的细节。
本文我想分享一些我在编写高性能CSS中用到的简单的例子和指导方针。受MDN的编写高效的CSS指南的启发,并遵循类似的格式。
避免过度约束
作为一般规则,不添加不必要的约束。
// 糟糕 ul#someid {..} .menu#otherid{..} // 好的 #someid {..} #otherid {..}
后代选择符最烂
不仅性能低下而且代码很脆弱,html代码和css代码严重耦合,html代码结构发生变化时,CSS也得修改,这是多么糟糕,特别是在大公司里,写html和css的往往不是同一个人。
// 烂透了 html div tr td {..}
避免链式(交集)选择符
这和过度约束的情况类似,更明智的做法是简单的创建一个新的CSS类选择符。
// 糟糕 .menu.left.icon {..} // 好的 .menu-left-icon {..}
坚持KISS原则
想象我们有如下的DOM:
<ul id="navigator"> <li><a href="#" class="twitter">Twitter</a></li> <li><a href="#" class="facebook">Facebook</a></li> <li><a href="#" class="dribble">Dribbble</a></li> </ul>
下面是对应的规则……
// 糟糕 #navigator li a {..} // 好的 #navigator {..}
使用复合语法
尽可能使用符合语法。
// 糟糕 .someclass { padding-top: 20px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; background: #000; background-image: url(../imgs/carrot.png); background-position: bottom; background-repeat: repeat-x; } // 好的 .someclass { padding: 20px 10px 20px 10px; background: #000 url(../imgs/carrot.png) repeat-x bottom; }
避免不必要的命名空间
// 糟糕 .someclass table tr.otherclass td.somerule {..} //好的 .someclass .otherclass td.somerule {..}
避免不必要的重复
尽可能组合重复的规则。
// 糟糕 .someclass { color: red; background: blue; font-size: 15px; } .otherclass { color: red; background: blue; font-size: 15px; } // 好的 .someclass, .otherclass { color: red; background: blue; font-size: 15px; }
尽可能精简规则
在上面规则的基础上,你可以进一步合并不同类里的重复的规则。
// 糟糕 .someclass { color: red; background: blue; height: 150px; width: 150px; font-size: 16px; } .otherclass { color: red; background: blue; height: 150px; width: 150px; font-size: 8px; } // 好的 .someclass, .otherclass { color: red; background: blue; height: 150px; width: 150px; } .someclass { font-size: 16px; } .otherclass { font-size: 8px; }
避免不明确的命名约定
最好使用表示语义的名字。一个好的CSS类名应描述它是什么而不是它像什么。
避免 !importants
其实你应该也可以使用其他优质的选择器。
遵循一个标准的声明顺序
虽然有一些排列CSS属性顺序常见的方式,下面是我遵循的一种流行方式。
.someclass { /* Positioning */ /* Display & Box Model */ /* Background and typography styles */ /* Transitions */ /* Other */ }
组织好的代码格式
代码的易读性和易维护性成正比。下面是我遵循的格式化方法。
// 糟糕 .someclass-a, .someclass-b, .someclass-c, .someclass-d { ... } // 好的 .someclass-a, .someclass-b, .someclass-c, .someclass-d { ... } // 好的做法 .someclass { background-image: linear-gradient(#000, #ccc), linear-gradient(#ccc, #ddd); box-shadow: 2px 2px 2px #000, 1px 4px 1px 1px #ddd inset; }
显然,这些只是极少数的规则,是我在我自己的CSS中,本着更高效和更易维护性而尝试遵循的规则。如果你想阅读更多的知识,我建议阅读MDN上的编写高效的CSS和谷歌指南上的优化浏览器渲染。
译者注
本文为译文,原文为“Writing Better CSS”
相关推荐
preboot, 一组 LESS mixin和用于编写更好CSS的变量 预引导 2预引导是 LESS mixin和用于快速编写CSS的变量的集合。 作为的先驱,它是一个轻量级和接口无关的方法,用于对你的下一个网络项目进行访问。 用你觉得合适的...
可协助用户更好的编写网页以及CSS样式内容 英文绿色破解版
非常棒的CSS学习文档,让你更好的学习CSS,更自由的编写CSS,网页框架,非常好的CSS帮助文档,让你更好的学习。
使用CSS自定义属性和Web存储API更改站点的布局和颜色。 CSS自定义属性(通常称为CSS变量)一直在稳步进入浏览器一段时间。...编写更好CSS的指南 许多开发人员已经使用具有诸如Sass或Less之类的预处理器
尼古拉斯的博客 这是我的博客的源代码,我将其托管在,我强烈推荐该服务。... 您可以使用npm轻松安装它,然后编写更好CSS文件。基本的编译语法为: sass static/css/style.sass static/css/style.css
相信更好CSS 不断发展CSS / Sass Sky风格指南 内容 编写CSS / Sass 林特 编写CSS / Sass 模板 在深入CSS编码风格的细节之前,你可以找到一个天空符合的.scss过的模板 。 立即开始: curl -L git.io/template -o _...
与HTMI驱动的老式布局相比,使用的代码更少,而效率和灵活性却高得多。受这种web设计方法的创意启发,Dave Shea创建了“CSS禅意花园”。其理念简单而独特:召集设计师在设计良好的HTMI的基础上,通过应用CSS技巧创建...
如果移动用户不需要加载桌面特定的 CSS 会更好,不是吗? 这就是我编写此 PostCSS 插件的用例!@media它允许您从 CSS 中提取所有规则,并将它们作为单独的文件发出,您可以将这些文件link rel=\\stylesheet\\ media=...
与其使编写JSON(也许是YAML)配置文件的工作变得更好,反而会使情况变得更糟。 我们真的希望您不要尝试使用任何预处理器(例如 , , 作弊,因为如果您这样做,那么冗长CSS将获得variables , includes , mixins...
LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用,包括浏览器...
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育...【查看更多源码地址】:https://blog.csdn.net/VX_WJ88950106?type=blog
更好的控制页面布局。不用多说。 9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。 10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索...
3.3 怎样更好地应用CSS 3.3.1 块元素和内联元素 3.3.2 一些CSS 的实用技巧 3.3.3 怎样调试CSS 3.4 关于CSS 的学习 第4 章 网页头部元素的详细定义 第41 页 4.1 DOCTYPE 的选择 4.1.1 什么是DOCTYPE 4.1.2 选择什么样...
该项目的目标是为表单元素提供一个更好的起点,该表单元素仍然没有被质疑,并且可以通过添加实用程序轻松自定义,而不必编写复杂CSS规则。 安装 安装插件: # Using npm npm install @tailwindcss/custom-forms --...
自从2008年Nicole Sullivan提出Object-Oriented CSS...可以说理解了这些内容将能更好的帮助您组织、管理您的CSS代码或者说CSS模块。 今天,我要和大家一起探讨的是OOCSS的一些基本原则。主要跟大家一起探讨的是如何将S
TopStyle是一款Cascading Style Sheets (CSS) 的编辑软件,可以帮助我们编写符合包括CSS2标准在内的样式表。TopStyle具有CSS定义选择功能,让你可以选取特定的浏览器或CSS阶层、内建的样式表检查器、内部的预览...
已弃用: 是这个想法的一个新的更好的实现。 我的 CSS 片段集合让您可以更快地键入 CSS。 只需在 Vim+UltiSnips 设置中使用这些,您就可以键入声明的缩写以扩展到完整的 CSS,如下所示: db m0 fl l5 成为: ...
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...