[lwptoc width=”auto” float=”right”]
像任何编码标准一样，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"] <em>/
line-height: 110% /</em> Also doubly incorrect */
}属性
与选择器类似，过于具体的属性会阻碍设计的灵活性。少即是多。确保您不重复样式或引入固定尺寸（当更容易接受流体解决方案时）。
- 属性后应跟一个冒号和一个空格。
- 除字体名称和特定于供应商的属性外，所有属性和值都应小写。
- 使用十六进制代码表示颜色，如果需要不透明，则使用rgba（）。避免使用RGB格式和大写字母，并尽可能缩短值：
#fff而不是#FFFFFF。 - 尽可能将速记（覆盖样式时除外）用于背景，边框，字体，列表样式，边距和填充值。（有关速记的参考，请参见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中，我们选择的是逻辑顺序或分组顺序，其中属性按含义分组，并在这些组中专门排序。还对组内的属性进行了战略性排序，以在各部分之间创建过渡，例如直接在颜色之前的背景。订购的基准是：
- 显示
- 定位
- 箱型
- 颜色和版式
- 其他
尚未在核心本身中使用的事物（例如CSS3动画）可能在上面没有规定的位置，但可能会以逻辑方式适合上述之一。就像CSS在发展一样，我们的标准也会随之发展。
顶部/右侧/底部/左侧（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;
}供应商前缀
我们使用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;
}属性值
输入属性值的方法有很多。请遵循以下准则，以帮助我们保持高度的一致性。
- 值前的空格，冒号后的空格
- 请勿在括号中加空格
- 总是以分号结尾
- 仅在需要时（例如，字体名称带有空格时），才使用双引号而不是单引号。
- 字体权重应当使用数字值来定义（例如
400，而不是normal，700而不是bold）。 - 除非必要，否则0值不应具有单位，例如过渡持续时间。
- 线高也应该是无单位的，除非有必要将其定义为特定的像素值。这不仅是样式约定，而且在这里值得一提。更多信息：http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
- 对于十进制值，请使用前导零，包括rgba（）中的值。
- 一个属性的多个逗号分隔值应该用空格或换行符分隔，包括在rgba（）中。应将换行符用于较长的多部分值，例如用于简写属性（如box-shadow和text-shadow）的值。然后，第一个值之后的每个后续值应放在新行上，缩进到与选择器相同的级别，然后间隔开以与先前值左对齐。
正确：
.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 { /* 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 <em>/
font-weight: bold; /</em> Avoid named font weights */
line-height: 1.4em;
}媒体查询
媒体查询使我们能够针对不同的屏幕尺寸适当地降级DOM。如果要添加任何内容，请确保在要定位的断点之上和之下进行测试。
- 通常建议将媒体查询按媒体分组在样式表的底部。
- 内核中的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 <em>/
.another-selector {
position: absolute;
top: 0 !important; /</em> I should explain why this is so !important */
}最佳实践
样式表往往会变长。焦点慢慢丢失，而预期的目标开始重复和重叠。从一开始就编写智能代码有助于我们保留概述，同时在整个变更过程中保持灵活性。
- 如果您尝试解决问题，请尝试在添加更多代码之前先删除代码。
- 魔术数字很不幸。这些数字是一次性使用的快速修复方法。范例：
.box { margin-top: 37px }。 - DOM会随着时间而变化，以您要使用的元素为目标，而不是通过其父元素“查找”。示例：
.highlight在元素上使用而不是.highlight a（在选择器位于父元素上） - 知道何时使用height属性。当包含外部元素（例如图像）时，应使用它。否则，请使用line-height获得更大的灵活性。
- 不要重述默认属性和值组合（例如，
display: block;在块级元素上）。
评论0