首页 > 开发 > CSS > 正文

CSS代码编写的一些性能优化技巧总结

2024-07-11 08:33:16
字体:
来源:转载
供稿:网友

CSS规范并没有明确浏览器如何去实现样式系统,仅仅是说明了它们必须这样做。有鉴于此,不同的样式系统引擎可能会拥有完全不同的表现和行为,特别是 Gecko 与 WebKit, 这两个引擎都是开源项目,实现了类似的算法,具有极其相近的优缺点。因此下面介绍的小技巧对于真实世界的 Web 文档将会十分有用。

第一部分内容综合讨论了常见的样式系统是如何分类规则的。接下来的部分包含了书写规则的指南,它利用了前面讨论的样式系统的优点。

样式系统如何拆分规则

样式系统将规则拆分成四个主要类别:

1.ID 规则
2.Class 规则
3.标签规则
4.通用规则
理解这些分类是十分关键的,因为它们是构建规则匹配块的基础。

我在下面的段落中使用术语 关键选择器(key selector)。选择器的最后面的部分即为关键选择器(即用来匹配目标元素的那部分,而不是该元素的祖先元素)。

例如,在下面规则中…

CSS Code复制内容到剪贴板
  1. a img,     div > p,    
  2. h1 + [title] {      …   
  3. }  

关键选择器为 img、 p 和 title.

ID 规则

这第一个类别包含了那些将 ID 选择器作为关键选择器的规则。

示例

CSS Code复制内容到剪贴板
  1. button#backButton {…} /* This is an ID-categorized rule */   #urlBar[type="autocomplete"] {…} /* This is an ID-categorized rule */  
  2. treeitem > treerow > treecell#myCell:active {…} /* This is an ID-categorized rule */  

Class 规则

如果一个规则将一个 class 明确作为它的关键选择器,那么它就属于该类别。

示例

CSS Code复制内容到剪贴板
  1. button.toolbarButton {…} /* A class-based rule */   .fancyText {…} /* A class-based rule */  
  2. menuitem > .menu-left[checked="true"] {…} /* A class-based rule */  

标签规则

如果既没有 class 也没有 ID 来明确作为关键选择器,那么接下来的候选者就是 标签 类别。 如果一条规则将一个标签作为它的关键选择器,那么这条规则就属于该类别。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表