首页 视频课程 主题开发课程第01章、开发准备 WordPress开发中的CSS编码标准

WordPress开发中的CSS编码标准

2022-12-12 / 301阅

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.
  • 除了在覆盖样式时,对以下内容使用速记backgroundborderfontlist-stylemarginpadding使用简写。

正确的方法

#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代替normal700而不是bold).
  • 0值不应该有单位,除非必要,例如使用transition-duration.
  • 行高也应该是无单位的,除非需要定义为特定的像素值。这不仅仅是一种风格约定,但在这里值得一提。更多信息:https://Meyer web . com/Eric/thoughts/2006/02/08/unitless-line-heights/.
  • 对小数值使用前导零,包括在中rgba().
  • 一个属性的多个逗号分隔值应该用空格或换行符分隔。为了获得更好的可读性,换行符应该用于更长的多部分值,比如那些简写属性,比如box-shadowtext-shadow,包括第一个值之前。然后,值应该从属性缩进一级。
  • 值中的值列表,如rgba(),应该用空格隔开。

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

大家谈论
    我的见解
    目录