home

Love life, love sports, love to learn, & love...

Blog

Thought,  done  &  record.

订阅到QQ邮箱 google reader google reader

网站优化之CSS文件优化措施

选择器选用的优化措施

根据样式表匹配规则，选择器的匹配是从左往右进行匹配的，所以，选择器规则越长则匹配实践越长。因此，选择器选用的优化措施最主要的原则就是，尽量使选择器具有唯一性，减少使用子孙或祖先选择器。

尽量不要使用通用选择器，比如最常用的“* {...}”。

尽量不要为 ID 指配特定的标签。

ID 选择器在同一页面只能使用一次，所以此条规则容易理解。

button#backButton {…}  /* Bad */
.menu-left#newMenuIcon {…} /* Bad */

#backButton {…} /* Good */
#newMenuIcon {…} /* Good */

尽量不要为 class 指配特定的标签。

尽管 class 选择器可以在同一页面多次使用，但是相对于 HTML 标签来说也算是具有唯一性的，所以此条规则也不难理解。

treecell.indented {…} /* Bad */

.treecell-indented {…} /* Good */
.hierarchy-deep {…} /* Best */

标签分类器尽量不要包含子孙标签分类器。

treehead treerow treecell {…} /* Bad */
treehead > treerow > treecell {…} /* BETTER, BUT STILL BAD */
.treecell-header {…} /* Good */

对所有的子孙选择器都判断能否不用子孙选择器。

ul li {color: blue;} /* Not so Good */
ol li {color: red;} /* Not so Good */

.unordered-list-item {color: blue;} /* Better */
.ordered-list-item {color: red;} /* Better */

尽量利用继承属性。

对于非连接的元素尽量不要使用 :hover 伪选择器。

尽量减少使用表达式（expressions），可以是用 javascript 代替。

样式表位置的选择

  • 对于外部的样式表文件（如 style.css）尽量放在 <head> 标签内，且使用 <link> 标签来加载，少用 @import。
  • 对于行内的样式规则（如 style="..."），也要尽量将其放置到 <head> 标签内。

Links：

回顶部