避免通用规则

请确保规则不以通用类型作为结束!

不要用标签名或 classes 来限制 ID 规则

如果规则的关键选择器为 ID 选择器,则没有必要为规则增加标签名。因为 ID 是唯一的,增加标签只会拖慢匹配过程。

button#backButton {…}
.menu-left#newMenuIcon {…}
#backButton {…}
#newMenuIcon {…}
例外:When it’s desirable to change the class of an element dynamically in order to apply different styles in different situations, but the same class is going to be shared with other elements.

不要用标签名限制 class 规则

前面那节内容在这里同样适用。虽然在同一页面能够多次使用 class,但它仍然比标签名更独特。

按照惯例,你可以将标签名写到 class 名里。当然,这会有损灵活性;如果设计更改,标签变动,class 名也要跟着变动。(最好的办法是选择严格语义化的名字,毕竟分离样式表的一个目标就是为了灵活性。)

treecell.indented {…}
.treecell-indented {…}
.hierarchy-deep {…}

尽量使用最具体的类别

解析速度变慢的最大原因就是绝大多数规则都落进了标签类别中。为元素增加 class,我们就可以进一步的将这些规则划分到 Class 类别中,这将减少用于匹配标签的时间。

treeitem[mailfolder="true"] > treerow > treecell {…}
.treecell-mailfolder {…}

避免后代选择器

后代选择器是 CSS 中耗费最昂贵的选择器。 它的耗费是极其昂贵的—特别是当选择器在标签或通用类别中。

通常我们在意的是 子选择器。比如说,当性能十分差的时候,Firefox 的 UI  CSS 将不需要任何理由的禁止掉子选择器。你也应该在网页中这么做。

treehead treerow treecell {…}
略好,但还是差(查看下一条指南)
treehead > treerow > treecell {…}

属于标签类别的规则永远不要包含子选择器

标签类别的规则中避免使用子选择器。否则的话,在该元素出现的所有地方,匹配时间都将极大延长(特别是当规则很可能会被匹配) 。

treehead > treerow > treecell {…}
.treecell-header {…}

在使用子选择器的地方想想为什么

当使用子选择器时要十分谨慎。能免则免。

一般来说,子选择器常常用于 RDF 树与菜单:

treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon {…}

要记住,模板中的 REF 特性可以重复出现!好好利用这一优点。在子 XUL 元素上重复使用 RDF 属性,这样可以基于该属性来修改元素。

GOOD
.tree-folderpane-icon[IsImapServer="true"] {…}

依赖继承

了解哪些属性能够继承,然后允许它们这样做!

For example, XUL widgets are explicitly set up such that a parent’s list-style-image or font rules will filter down to anonymous content. It’s not necessary to waste time on rules that talk directly to anonymous content.

BAD
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
GOOD
#bookmarkMenuItem { list-style-image: url(blah) }

In the above example, the desire to style anonymous content (without leveraging the inheritance of list-style-image) resulted in a rule that was in the Class Category, when the rule should have ended up in the ID Category—the most specific category of all!

Remember: Elements all have the same classes—especially anonymous content!

The above “bad” rule forces every menu’s icons to be tested for containment within the bookmarks menu item. Since there are many menus, this is extraordinarily expensive.  Instead, the “good” rule limits the testing to the bookmarks menu.

Use -moz-image-region!

Putting a bunch of images into a single image file and selecting them with -moz-image-region performs significantly better than putting each image into its own file.

Use scoped stylesheets

If you specify a stylesheet as an XBL resource, the styles only apply to the bound elements and their anonymous content. This reduces the inefficiency of universal rules and child selectors because there are fewer elements to consider.

@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);

高效 css 整理的更多相关文章

  1. 高效CSS开发核心要点摘录

    做网站的,我们都知道尽量减少请求数,压缩CSS代码量,使用高效CSS选择符等方式可以来提高网站的载入速度和访问速度,也就是优化网站的性能. 下面分析了一些CSS的书写方式,很多都是我们知道并且正在使用 ...

  2. css整理之-----------选择器

    背景 在20年初时总感觉自己的css 不够用,想把css 相关的东西整理下,去年一整年都比较忙,忙着就到2021了,今天趁着有点时间,先从选择器开始吧. 听说图片可以提升颜值.... 选择器 CSS选 ...

  3. css整理之-----------技巧、黑魔法

    css 看起来比较简单,但是要想做的好也不是那么容易,我们在平时开发中,主要用css 来美化我们的html结构,所有我觉得css 还是挺重要的,这里记录整理一些关于css 的技巧以及容易忘记的知识点. ...

  4. css整理-06 表和列表

    表格式化 表布局 table, display:table caption, display: table-caption thead, display: table-header-group tbo ...

  5. css整理-01选择器和继承

    元素 元素形式: 替换,非替换 元素类型: 块级,行内 列表是特殊的块级元素,它会生成一个标记符 样式表 候选样式表: rel='alternative' @import导入样式表,必须在style的 ...

  6. 前端必会css整理

    1.设置css样式的三种方式?         外部样式表,引入一个外部css文件         内部样式表,将css代码放在<head>标签内部         内联样式,将css样式 ...

  7. 高效CSS書寫規範及CSS兼容性

    一.選擇器針對性說明 某一元素的多个规则集中,选择器的针对性越高,该规则集的权重也就越高.针对性相同的,后出现的规则集的权重更高. * {} /* a=0 b=0 c=0 d=0 -> spec ...

  8. 自动化高效css开发,畅谈less的灵活变化

    css是一种让html与样式分离解析而出现的代码,它的出现大大提高了程序员的工作效率,和后期进行维护的效率.但是发展至今,由于起死板单调的写法,越来越不能满足程序员们灵活的思维,很多时候是种恨铁不成钢 ...

  9. 精简高效CSS系列之二——浮动float

    一.浮动基础知识 假如一个页面上有3个div块,如下排列: 图1:不使用浮动 图2:向右浮动 图2说明了框1脱离了文档流向右移动,直到它的右边缘碰到包含框的右边缘为止. 图3:向左浮动 图3说明了框1 ...

随机推荐

  1. Junit 源码剖析(二)

    junit4 下的所有的testcase都是在Runner下执行的, 可以将Runner理解为junit运行的容器, 默认情况下junit会使用JUnit4ClassRunner作为所有testcas ...

  2. imacros实现Excel数据自动录入到网页中

    一.工具选择 最近接到一个项目,需要将excel数据逐条录入.保存到网页中.经过搜集资料,能实现功能的大概有以下几种方式,按键精灵.autoit.imacros.python+selenium. 按键 ...

  3. bzoj 2115: [Wc2011] Xor xor高斯消元

    2115: [Wc2011] Xor Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 797  Solved: 375[Submit][Status] ...

  4. Internship

    zoj2532:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1532 题意:有n个发射点,m个中继站,然后发射点会发射一些信息 ...

  5. I2C总线之(三)---以C语言理解IIC

    为了加深对I2C总线的理解,用C语言模拟IIC总线,边看源代码边读波形: 如下图所示的写操作的时序图: 读时序的理解同理.对于时序不理解的朋友请参考“I2C总线之(二)---时序” 完整的程序如下: ...

  6. 两种QMultiMap的遍历方法(最好使用只读遍历器)

    留个爪,备查 QMultiMap<QString, QString>& remote_map = my_obj->m_MapVersion; // ccc 这里体现了引用的好 ...

  7. 最完整的合并相交集合的Java代码(查并集)

    这个是自己写的算法,如果有大牛,麻烦帮我并行化.初学者则可以学到不少东西. 产生测试用例 import java.io.*; import java.util.Random; public class ...

  8. (转)Mono for Android 优势与劣势

    最近有兴趣了解一下Mono for Andriod,也就是使用.NET平台来开发Andriod程序.Mono for Android API 几乎映射标准的Andriod API.例如,两边API几乎 ...

  9. Git遇到的一点错误

    [背景] 折腾: [记录]将googlecode上面的crifanLib迁移到Github上 期间出错: ​ ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1 ...

  10. poj1637

    混合图欧拉回路首先先明确基本概念连通的无向图存在欧拉回路当且仅当不存在奇点连通的有向图当且仅当每个点入度=出度这道题我们显然应该当作连通的有向图来做这个问题的困难之处在于我不知道应该从无向边的什么方向 ...