1. 主题阁汉化首页
  2. 教程
  3. 开发教程

WordPress开发编码规范——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"] <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,而不是normal700而不是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;在块级元素上)。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,如若转载,请注明出处:https://themege.net/6070.html。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

发表评论

登录后才能评论
联系我们

联系我们

在线咨询:点击这里给我发消息

邮件:themege@163.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
关注微信
分享本页
返回顶部