层叠样式表/疑难解答顺序

使用重置块作为样式元素选择器（没有类或 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 名称来命名标准布局组件，例如 banner、logo、badge、screenshot、thumbnail、breadcrumbs、navigation、sidebars、marquee、subnav、content、gutter、headmargin、footmargin、sidemargin、baseline、overlay、fold、ads、widgets 和音频/视频播放器。例如，

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

使用语义类名称来命名可能需要特定样式的标准散文组件，例如 sentence、phrase、clause、salutation、lead-in、suffix、prefix、anagram、homonym、contraction、gerund、idiom、interjection、onomatopoeia、timespan 等。

使用语义类名称来命名可能需要特定样式的标准文章组件，例如 headshot、caption、mugshot、masthead、folio、subhead、dateline、byline、topic、bio、ticker、alert、boilerplate、dropcap、slogan、keyword、tease、sample、snippet、sidebar、boxscore、ranking、standing、poll、addendum、soundbite、pullquote、plugs、followup、letterhead 等。

使用语义类名称来命名可能需要特定样式的论文组件，例如 objective、excerpt、aside、citation、footnote、topic、annotation、summary、table of contents 等。例如，

<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>