CSS 编码标准

与任何编码标准一样，WordPress CSS 编码标准的目的是为 WordPress 开源项目和社区的各个方面（从核心代码到主题再到插件）的协作和审查创建基准。项目中的文件应该看起来像是由单个实体创建的。最重要的是，创建可读、有意义、一致且美观的代码。

在核心样式表中，经常会发现不一致之处。我们正在努力解决这些问题，并尽一切努力从现在开始让补丁和提交遵循 CSS 编码标准。有关上述内容和对 UI/前端开发的贡献的更多信息将在一组单独的指南中提供。

结构

有许多不同的方法来构建样式表。以 CSS 为核心，保持高度的易读性很重要。这使得后续贡献者能够清楚地了解文档的流程。

• 使用制表符而不是空格来缩进每个属性。
• 在节之间添加两个空行，在节中的块之间添加一个空行。
• 每个选择器都应该独占一行，以逗号或左大括号结尾。属性-值对应该单独一行，有一个缩进制表符和一个结束分号。右大括号应向左齐平，使用与左选择器相同的缩进级别。

正确：

#selector-1,
#selector-2,
#selector-3 {
    background: #fff;
    color: #000;
}

错误：

#selector-1, #selector-2, #selector-3 {
    background: #fff;
    color: #000;
    }
#selector-1 { background: #fff; color: #000; }

选择器

有了专一，责任就大了。广泛的选择器让我们变得高效，但如果不经过测试，可能会产生不利后果。特定于位置的选择器可以节省我们的时间，但很快就会导致样式表混乱。运用您的最佳判断来创建选择器，以在对 DOM 的整体样式和布局做出贡献之间找到适当的平衡。

• 与文件名的WordPress PHP 编码标准类似，在命名选择器时使用小写字母和带有连字符的分隔词。避免驼峰式和下划线。
• 使用人类可读的选择器来描述他们设计的元素。
• 属性选择器应该在值周围使用双引号。
• 避免使用过度限定的选择器，div.container可以简单地表述为.container.

正确：

#comment-form {
    margin: 1em 0;
}
input[type="text"] {
    line-height: 1.1;
}

错误：

#commentForm { /* Avoid camelcase. */
    margin: 0;
}
#comment_form { /* Avoid underscores. */
    margin: 0;
}
div#comment_form { /* Avoid over-qualification. */
    margin: 0;
}
#c1-xr { /* What is a c1-xr?! Use a better name. */
    margin: 0;
}
input[type=text] { /* Should be [type="text"] */
    line-height: 110% /* Also doubly incorrect */
}

特性

与选择器类似，过于具体的属性会阻碍设计的灵活性。少即是多。确保您没有重复样式或引入固定尺寸（当流体解决方案更可接受时）。

• 属性后应跟一个冒号和一个空格。
• 除字体名称和供应商特定属性外，所有属性和值都应为小写。
• 对颜色使用十六进制代码，或者rgba()如果需要不透明度。避免使用 RGB 格式和大写字母，并尽可能缩短值：#fff而不是#FFFFFF.
• 尽可能使用速记，除非覆盖样式background、border、font、list-style、margin、 和值。padding有关速记参考，请参阅CSS 速记。

正确：

#selector-1 {
    background: #fff;
    display: block;
    margin: 0;
    margin-left: 20px;
}

错误：

#selector-1 {
    background:#FFFFFF;
    display: BLOCK;
    margin-left: 20PX;
    margin: 0;
}

属性顺序

“将相似的属性组合在一起，尤其是当你有很多属性时。”
— 纳辛

最重要的是，选择对您有意义且在某种程度上具有语义的内容。随机排序是混乱。在 WordPress Core 中，我们的选择是逻辑排序或分组排序，其中属性按含义分组，并在这些组内专门排序。组内的属性也进行了战略性排序，以在部分之间创建过渡，例如background直接在 之前color。属性顺序的基准是：

• 显示：display
• 位置：position
• 盒模型
• 颜色和排版
• 其他

尚未在核心本身中使用的内容（例如 CSS3 动画）可能没有规定的位置，但可能会以合乎逻辑的方式适合上述内容之一。正如 CSS 不断发展一样，我们的标准也将随之发展。

上/右/下/左（TRBL/麻烦）应该是任何相关属性（例如）的顺序margin，就像顺序在值中一样。角落说明符（例如border-radius-*-*）应按左上角、右上角、右下角、左下角的顺序排列。这是从速记值的排序方式得出的。

例子：

#overlay {
    position: absolute;
    z-index: 1;
    padding: 10px;
    background: #fff;
    color: #777;
}

另一种经常使用的方法（包括 Automattic/WordPress.com 主题团队使用的方法）是按字母顺序对属性进行排序，有或没有某些例外。

例子：

#overlay {
    background: #fff;
    color: #777;
    padding: 10px;
    position: absolute;
    z-index: 1;
}

浏览器前缀

我们使用Autoprefixer作为预提交工具来轻松管理必要的浏览器前缀，从而使本节的大部分内容都没有实际意义。对于那些有兴趣在不使用 Grunt 的情况下遵循该输出的人，供应商前缀应该从最长（-webkit-）到最短（无前缀）。所有其他间距保持按照其余标准。

.sample-output {
    -webkit-box-shadow: inset 0 0 1px 1px #eee;
    -moz-box-shadow: inset 0 0 1px 1px #eee;
    box-shadow: inset 0 0 1px 1px #eee;
}

好的习惯

有多种方法可以输入属性值。遵循以下准则可帮助我们保持高度的一致性。

• 值前的空格，冒号后的空格。
• 不要用空格填充括号。
• 总是以分号结尾。
• 使用双引号而不是单引号，并且仅在需要时使用，例如当字体名称有空格或用于属性值时content。
• 字体粗细应使用数值来定义（例如，400而不是normal,700而不是bold）。
• 除非必要，否则 0 值不应有单位，例如 with transition-duration。
• 行高也应该是无单位的，除非有必要定义为特定的像素值。这不仅仅是一种风格约定，但在这里值得一提。更多信息：https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/。
• 对十进制值使用前导零，包括在rgba().
• 一个属性的多个逗号分隔值应该用空格或换行符分隔。为了更好的可读性，换行符应该用于更长的多部分值，例如像box-shadow和这样的速记属性text-shadow，包括在第一个值之前。然后应将值从属性缩进一层。
• 一个值内的值列表，如 within rgba()，应该用空格分隔。

正确：

.class { /* Correct usage of quotes */
    background-image: url(images/bg.png);
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 700;
}
.class { /* Correct usage of zero values */
    font-family: Georgia, serif;
    line-height: 1.4;
    text-shadow:
        0 -1px 0 rgba(0, 0, 0, 0.5),
        0 1px 0 #fff;
}
.class { /* Correct usage of short and lengthier multi-part values */
    font-family: Consolas, Monaco, monospace;
    transition-property: opacity, background, color;
    box-shadow:
        0 0 0 1px #5b9dd9,
        0 0 2px 1px rgba(30, 140, 190, 0.8);
}

错误：

.class { /* Avoid missing space and semicolon */
    background:#fff
}
.class { /* Avoid adding a unit on a zero value */
    margin: 0px 0px 20px 0px;
}
.class {
    font-family: Times New Roman, serif; /* Quote font names when required */
    font-weight: bold; /* Avoid named font weights */
    line-height: 1.4em; /* Avoid adding a unit for line height */
}
.class { /* Incorrect usage of multi-part values */
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5),
                 0 1px 0 #fff;
    box-shadow: 0 1px 0 rgba(0, 0,
        0, 0.5),
        0 1px 0 rgba(0,0,0,0.5);
}

媒体查询

媒体查询允许我们针对不同的屏幕尺寸优雅地降级 DOM。如果要添加任何内容，请务必在目标断点上方和下方进行测试。

• 通常建议将媒体查询按媒体分组放在样式表的底部。
  • core 中的文件是一个例外wp-admin.css，因为它非常大，而且每个部分基本上都代表一个自己的样式表。因此，在适用的情况下，将媒体查询添加到部分的底部。
• 媒体查询的规则集应该缩进一级。

例子：

@media all and (max-width: 699px) and (min-width: 520px) {
        /* Your selectors */
}

发表评论

• 评论，自由评论。如果担心文件大小，请使用缩小的文件和SCRIPT_DEBUG常量。长注释应在 80 个字符处手动分行。
• 目录应该用于较长的样式表，尤其是那些高度分段的样式表。使用索引号（1.0、1.1、2.0等）有助于搜索和跳转到某个位置。
• 注释应该像 PHPDoc 一样格式化。CSSDoc标准不一定被广泛接受或使用，但随着时间的推移，它的某些方面可能会被采用。节/小节标题前后应有换行符。行内评论不应该有空的换行符将评论与其相关的项目分开。

对于章节和小节：

/**
 * #.# Section title
 *
 * Description of section, whether or not it has media queries, etc.
 */
.selector {
    float: left;
}

对于内联：

/* This is a comment about this selector */
.another-selector {
    position: absolute;
    top: 0 !important; /* I should explain why this is so !important */
}

最佳实践

样式表的长度和复杂性往往会增加，并且随着它们的增加，冗余的可能性也会增加。通过遵循一些最佳实践，我们可以帮助我们的 CSS 在发展过程中保持专注和灵活性：

• 如果您试图解决问题，请尝试在添加更多代码之前删除代码。
• 幻数是不吉利的。这些是一次性使用的快速修复数字。例子：.box { margin-top: 37px }。
• DOM 会随着时间的推移而改变，以你想要使用的元素为目标，而不是通过它的父元素“找到它”。示例：在元素上使用.highlight而不是.highlight a（选择器在父元素上）
• 知道何时使用该height属性。当您包含外部元素（例如图像）时，应该使用它。否则使用line-height更灵活。
• 不要重述默认属性和值组合（例如display: block;在块级元素上）。

WP 管理员 CSS

查看WP Admin CSS Audit，这是一份为记录 WP Admin CSS 代码的健康状况而生成的报告。在存储库的 README中阅读更多内容。

相关链接

• 编写一致、惯用的 CSS 的原则： https: //github.com/necolas/idiomatic-css。