层叠样式表/故障排除顺序

使用重置块作为单个位置来设置没有类或 ID 的元素选择器的样式，以避免级联问题

使用 CSS 验证器来确保页面上没有因拼写错误和冲突声明而导致的错误

直接引用 ID 和类，不要在前面加上父标签或类名

对类使用简写语法，对 ID 使用长写语法，以避免设置不必要的默认值，并简化通过脚本动态更改类或通过伪类更改属性的调试

不要使用相同的类来设置尺寸和其他盒子模型规则（包括边距、边框和填充），以避免限制不同元素之间尺寸或间距规则的重复使用

使用简单的类选择器，例如 .new{ font:bold;}，而不是创建复杂的后代选择器来定义单个属性，例如 .menu .title .new{ font:bold; }，以最大限度地提高代码库的可读性和可重用性

不要使用 DOM 属性名（length、item、namedItem、tags、urns）作为 ID 值，因为它们会导致 IE 中的 JavaScript 冲突，因为 IE 将属性名视为保留字

不要使用属性名值作为 ID 值，因为它们会导致 IE 中的 JavaScript 冲突。例如，使用“description”作为 ID 值可能会与 description 元标签冲突。

创建唯一的新的类，而不是父依赖子类

将通用属性（如颜色和字体大小）复制到新的类中，作为预防措施，以防止元素由于每个类的一个属性而依赖于多个类，因为 HTML 中的类引用最终可能看起来像内联样式。这也将有助于避免继承不必要的属性（如填充和边距），并随后需要在新的类中重置这些属性

最小化后代选择器（例如 #parent .child）和子选择器的使用，以避免对 DOM 树进行长时间的查找

定义类来设置块级元素（.content）的样式，而不是通过 ID（#main p）使用标签引用，以使它们独立于其父元素

通过在现有选择器副本前加上与 JavaScript 函数相对应的语义类名来定义 CSS 中的状态更改，然后在 DOM 事件触发时将类名附加到 documentElement

避免在最后一个样式声明中使用分号，以避免在分号之前意外键入右括号并生成错误

避免使用类名来描述它调用的属性，以使样式表不会成为名称到功能的一对一映射，从而导致 HTML 代码类似于内联样式，每个元素都有多个类引用。

使用样式设置表格的属性，而不是使用表格标签属性，以实现跨浏览器的一致性

添加子类以满足常见需求，例如突出显示列表中的第一个或最后一个项目，隐藏和显示评论文本，强调当前导航选择，以及打开和关闭星级评定颜色

使用语义 ID 名称来命名标准布局组件（如果每个页面只有一个这样的组件），例如横幅、徽标、徽章、屏幕截图、缩略图、面包屑、导航、侧边栏、跑马灯、子导航、内容、间距、页眉边距、页脚边距、侧边距、基线、覆盖层、折叠、广告、小部件和音频/视频播放器，例如

<img id="background" src="background.png"/>
<p id="logo"><em>Happy Fun Ball</em></p>
<p>Normal text</p>

使用语义类名来命名可能需要特定样式的标准散文组件，例如句子、短语、从句、称呼、引子、后缀、前缀、字谜、同音词、缩略词、动名词、习语、感叹词、拟声词、时间跨度等。

使用语义类名来命名可能需要特定样式的标准文章组件，例如头像、标题、大头照、标题、页眉、副标题、日期线、署名线、主题、传记、滚动新闻、警报、通用条款、首字母下沉、口号、关键词、预告、示例、片段、侧边栏、比分、排名、排名、投票、附录、摘录、引文、插件、跟进、抬头等。

使用语义类名来命名可能需要特定样式的论文组件，例如目标、摘录、旁注、引用、脚注、主题、注释、摘要、目录等。例如

<p class="aside">(a parenthetical aside)</p>
<p>Normal text</p>
<p class="aside">(another parenthetical aside)</p>

首先设置标准布局组件的字体和颜色样式，以避免冗余，并在定义嵌套元素时利用级联

在样式表开头重置样式，以覆盖不同浏览器之间不一致的默认值

在将测试代码移至生产环境时，删除冗余和过时的样式

对于任何旨在在第三方 API 沙箱中运行的代码，使用类而不是 ID，因为 ID 可能会被剥离以避免冲突

使用以下 XSLT CSS 预处理器模板，使用浏览器或服务器端脚本在您的样式表中添加 CSS 变量

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="text" omit-xml-declaration="yes" media-type="text/css" />
    <xsl:param name="color" select="'#fff'"/>
    <xsl:template match="*">
        h1 { color: <xsl:value-of select="$color"/>; }
    </xsl:template>
</xsl:stylesheet>