WordPress开发中的CSS编码标准

CSS编码标准的目的是创建可读的、有意义的、一致的、漂亮的代码。以下标准代你参考：

结构

构造样式表有很多不同的方法。以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; } 

CSS选择器

不建议使用定位上级找下级的方法，因为上级标签的位置可能发生变化，例如 .youran a{}。可以把youran写在a标签上，或者另外给定一个class。总之，不建议依赖上级标签来定位。另外还需要注意以下几点：

• 在命名选择器时，使用小写字母并用连字符分隔单词，避免驼峰和下划线。
• 使用人类可读的选择器来描述他们设计的元素。
• 属性选择器应该在值周围使用双引号。
• 避免使用过分合格的选择器，div.container可以简单地表述为.container

正确的写法

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

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

对比下不正确的写法

#commentForm { /* 使用大小写混合. */
    margin: 0;
}

#comment_form { /* 使用下划线，PS:我最喜欢这个写法. */
    margin: 0;
}

div#comment_form { /* 这里不用写DIV. */
    margin: 0;
}

#c1-xr { /* 选择器名称没有意义，不方便阅读. */
    margin: 0;
}

input[type=text] { /* 要用引号的，如 [type="text"] */
    line-height: 110% /* Also doubly incorrect */
} 

渲染性能

类似于选择器，太具体的属性会阻碍设计的灵活性。少即是多。确保您没有重复设计或引入固定尺寸。

• 属性后面应该跟一个冒号和一个空格。
• 除了字体名称和特定于供应商的属性，所有属性和值都应该是小写的。
• 使用十六进制代码表示颜色，或rgba()如果需要不透明。
• 避免RGB格式和大写字母，并尽可能缩短值:#fff代替#FFFFFF.
• 除了在覆盖样式时，对以下内容使用速记background, border, font, list-style, margin，padding使用简写。

正确的方法

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

错误的示例

#selector-1 {
    background:#FFFFFF;
    display: BLOCK;
    margin-left: 20PX; /*单位要用小写*/
    margin: 0;
} 

属性排序

WordPress建议属性按照首字母排序，如下：

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

注释

建议给CSS样式表添加注释，由于是比较长的CSS样式表。

其它说明

有许多方法可以输入属性值。遵循以下指导原则，帮助我们保持高度的一致性。

• 值前有空格，冒号后有空格。
• 不要用空格填充括号。
• 总是以分号结尾。
• 使用双引号而不是单引号，并且只在需要时使用，例如当字体名称有空格或content财产。
• 字体粗细应该使用数值来定义(例如400代替normal, 700而不是bold).
• 0值不应该有单位，除非必要，例如使用transition-duration.
• 行高也应该是无单位的，除非需要定义为特定的像素值。这不仅仅是一种风格约定，但在这里值得一提。更多信息:https://Meyer web . com/Eric/thoughts/2006/02/08/unitless-line-heights/.
• 对小数值使用前导零，包括在中rgba().
• 一个属性的多个逗号分隔值应该用空格或换行符分隔。为了获得更好的可读性，换行符应该用于更长的多部分值，比如那些简写属性，比如box-shadow和text-shadow，包括第一个值之前。然后，值应该从属性缩进一级。
• 值中的值列表，如rgba()，应该用空格隔开。

阅读文章或者观看视频过程中有任何问题，请下方留言或者联系我Q248758228