WordPress 编码标准文档

title: "CSS 编码标准" post_status: publish comment_status: open taxonomy: category: - wpcs-docs post_tag: - Wordpress Coding Standards - Repos - Data

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

Selectors

With specificity, comes great responsibility. Broad selectors allow us to be efficient, yet can have adverse consequences if not tested. Location-specific selectors can save us time, but will quickly lead to a cluttered stylesheet. Exercise your best judgment to create selectors that find the right balance between contributing to the overall style and layout of the DOM.

Correct:

#comment-form {
    margin: 1em 0;
}

input[type="text"] {
    line-height: 1.1;
}

Incorrect:

#commentForm { /&042; Avoid camelcase. &042;/
    margin: 0;
}

#comment_form { /&042; Avoid underscores. &042;/
    margin: 0;
}

div#comment_form { /&042; Avoid over-qualification. &042;/
    margin: 0;
}

#c1-xr { /&042; What is a c1-xr?! Use a better name. &042;/
    margin: 0;
}

input[type=text] { /&042; Should be [type="text"] &042;/
    line-height: 110% /&042; Also doubly incorrect &042;/
}

属性

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

正确示例：

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

错误示例：

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

属性排序

"将同类属性归组，特别是当属性数量较多时。" -- Nacin

最重要的是，选择对你有意义且具有语义性的排序方式。随机排序是混乱而非诗意。在 WordPress 核心代码中，我们选择逻辑分组排序，即属性按含义分组，并在组内进行特定排序。组内属性的排序也经过策略性安排，以在各部分之间形成过渡，例如将 background 直接置于 color 之前。排序的基准顺序是：

核心代码中尚未使用的特性（如 CSS3 动画）可能没有预设位置，但通常能以逻辑方式归入上述某一类别。正如 CSS 在不断演进，我们的标准也将随之发展。

相关属性（如 margin）应遵循上/右/下/左（TRBL）顺序，这与属性值的书写顺序一致。角点描述符（如 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;
}

供应商前缀

更新于 2014-02-13，在 [27174] 之后：

我们使用 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;
}

Values

There are numerous ways to input values for properties. Follow the guidelines below to help us retain a high degree of consistency.

Correct:

.class { /&042; Correct usage of quotes &042;/
    background-image: url(images/bg.png);
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 700;
}

.class { /&042; Correct usage of zero values &042;/
    font-family: Georgia, serif;
    line-height: 1.4;
    text-shadow:
        0 -1px 0 rgba(0, 0, 0, 0.5),
        0 1px 0 #fff;
}

.class { /&042; Correct usage of short and lengthier multi-part values &042;/
    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);
}

Incorrect:

.class { /&042; Avoid missing space and semicolon &042;/
    background:#fff
}

.class { /&042; Avoid adding a unit on a zero value &042;/
    margin: 0px 0px 20px 0px;
}

.class {
    font-family: Times New Roman, serif; /&042; Quote font names when required &042;/
    font-weight: bold; /&042; Avoid named font weights &042;/
    line-height: 1.4em; /&042; Avoid adding a unit for line height &042;/
}

.class { /&042; Incorrect usage of multi-part values &042;/
    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);
}

Media Queries

Media queries allow us to gracefully degrade the DOM for different screen sizes. If you are adding any, be sure to test above and below the break-point you are targeting.

Example:

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

Commenting

For sections and subsections:

/**
 * #.# Section title
 *
 * Description of section, whether or not it has media queries, etc.
 */

.selector {
    float: left;
}

For inline:

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

最佳实践

样式表往往会变得越来越长、越来越复杂，随着其增长，冗余的可能性也会增加。遵循一些最佳实践可以帮助我们的 CSS 在演进过程中保持专注和灵活性：

WP 管理后台 CSS

查看 WP 管理后台 CSS 审计报告，该报告记录了 WP 管理后台 CSS 代码的健康状况。更多详情请参阅仓库的 README 文件。

相关链接