CSS coding standards

CSS Coding Standards

The goal of this document is to make the CSS code style consistent and easy to understand and maintain. If you don’t have this habit, please choose your IDE carefully. , stop using a "text editor".

Although this document is designed for CSS, when using various CSS precompilers (such as less, sass, stylus, etc.), the applicable parts should also follow the conventions of this document as much as possible.

1 Code style

1.1 File

[Recommendation] Use BOM-free UTF-8 encoding for CSS files.

Explanation:

UTF-8 encoding has wider adaptability. BOMs can cause unnecessary interference when using programs or tools to process files.

1.2 Indentation

[Mandatory] Use 2 spaces as an indentation level, tab characters are not allowed.

Example:

.selector {
  margin: 0;
  padding: 0;
}

1.3 Space

[Mandatory] There must be a space between the selector and {.

Example:

.selector {
}

[Mandatory] No spaces are allowed between the attribute name and the following :, and there must be spaces between : and the attribute value.

Example:

margin: 0;

[Mandatory] When the list attribute value is written in a single line, it must be followed by a space.

Example:

font-family: Arial, sans-serif;

1.4 Line Length

[Mandatory] Each line must not exceed 120 characters unless a single line is indivisible.

Explanation:

A common indivisible scenario is when the URL is too long.

[Recommendation] For very long styles, it is recommended to wrap the style values ​​at spaces or after , and to group them logically.

Example:

/* 不同属性值按逻辑分组 */
background:
  transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
  no-repeat 0 0;
/* 可重复多次的属性，每次重复一行 */
background-image:
  url(aVeryVeryVeryLongUrlIsPlacedHere)
  url(anotherVeryVeryVeryLongUrlIsPlacedHere);
/* 类似函数的属性值可以根据函数调用的缩进进行 */
background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0.04, rgb(88,94,124)),
  color-stop(0.52, rgb(115,123,162))
);

1.5 Selector

[Mandatory] When a rule contains multiple selectors, each selector declaration must occupy its own line .

Example:

/* good */
.post,
.page,
.comment {
  line-height: 1.5;
}
/* bad */
.post, .page, .comment {
  line-height: 1.5;
}

[Mandatory] >, ,~ Leave a space on both sides of the selector.

Example:

/* good */
main > nav {
  padding: 10px;
}
label + input {
  margin-left: 5px;
}
input:checked ~ button {
  background-color: #69C;
}
/* bad */
main>nav {
  padding: 10px;
}
label+input {
  margin-left: 5px;
}
input:checked~button {
  background-color: #69C;
}

[Mandatory] The value in the attribute selector must be surrounded by double quotes.

Explanation:

Single quotation marks are not allowed, and no quotation marks are allowed.

Example:

/* good */
article[character="juliet"] {
  voice-family: "Vivien Leigh", victoria, female;
}
/* bad */
article[character='juliet'] {
  voice-family: "Vivien Leigh", victoria, female;
}

1.6 Attributes

[Mandatory] Multiple attribute definitions must be on a new line.

Example:

/* good */
.selector {
  margin: 0;
  padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }

[Mandatory] The attribute definition must end with a semicolon.

Example:

/* good */
.selector {
  margin: 0;
}
/* bad */
.selector {
  margin: 0
}

2 Generic

2.1 Selector

[Mandatory] If not necessary , it is not allowed to add type selectors to limit the id and class selectors.

Explanation:

It has a certain impact on performance and maintainability.

Example:

/* good */
#error,
.danger-message {
  font-color: #c00;
}
/* bad */
dialog#error,
p.danger-message {
  font-color: #c00;
}

[Recommendation] The nesting level of the selector should be no greater than 4 levels, and the qualification conditions at the rear should be as precise as possible.

Example:

/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}

2.2 Attribute abbreviation

[Recommendation] Where abbreviations can be used, try to use attribute abbreviations.

Example:

/* good */
.post {
  font: 12px/1.5 arial, sans-serif;
}
/* bad */
.post {
  font-family: arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

[Suggestion] When using abbreviations such as border / margin / padding, you should pay attention to the impact of the implicit value on the actual value, and only use it when you really need to set values ​​in multiple directions. abbreviation.

Explanation:

Abbreviations such as border / margin / padding will set the values ​​​​of multiple properties at the same time, and it is easy to override settings that do not need to be overridden. If some directions need to inherit values ​​from other declarations, they should be set separately.

Example:

/* centering <article class="page"> horizontally and highlight featured ones */
article {
  margin: 5px;
  border: 1px solid #999;
}
/* good */
.page {
  margin-right: auto;
  margin-left: auto;
}
.featured {
  border-color: #69c;
}
/* bad */
.page {
  margin: 5px auto; /* introducing redundancy */
}
.featured {
  border: 1px solid #69c; /* introducing redundancy */
}

2.3 Attribute writing order

[Recommendation] When writing attributes under the same rule set, they should be grouped by function and formatted using Formatting Model. Method, location) > Box Model (size) > Typographic (text-related) > Visual (visual effects) order to improve the readability of the code.

Explanation:

Formatting Model related properties include: position / top / right / bottom / left / float / display / overflow, etc.

Box Model related properties include: border / margin / padding / width / height, etc.

Typographic related properties include: font / line-height / text-align / word-wrap, etc.

Visual related properties include: background / color / transition / list-style, etc.

Misc related attributes include: opacity / text-decoration / white-space / word-wrap, etc.

In addition, if the content attribute is included, it should be placed at the front.

Example:

.sidebar {
  /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
  position: absolute;
  top: 50px;
  left: 0;
  overflow-x: hidden;
  display: block;
  /* box model: sizes / margins / paddings / borders / ...  */
  width: 200px;
  padding: 5px;
  border: 1px solid #ddd;
  /* typographic: font / aligns / text styles / ... */
  font-size: 14px;
  line-height: 20px;
  /* visual: colors / shadows / gradients / ... */
  background: #f5f5f5;
  color: #333;
  -webkit-transition: color 1s;
     -moz-transition: color 1s;
          transition: color 1s;
  /* Misc */
  opacity: 1;
  text-decoration: none;
  white-space: nowrap;
  word-wrap: normal;
  cursor: pointer;
}

2.4 Clear float

[Recommendation] When the element needs to be raised to contain the internal floating element, pass the pseudo Clearfix can be performed by setting clear in class or triggering BFC. Try not to add empty tags.

Explanation:

There are many ways to trigger BFC, common ones are:

float 非 none
position 非 static
overflow 非 visible

If you want to use a clearing float method with smaller side effects, see A new micro clearfix hack article.

Also note that elements that have already triggered BFC do not need to be clearedfixed.

Example:

<div class="fn-clear">
    <div class="fn-left"></div>
    <div class="fn-left"></div>
</div>

2.5 !important

[Recommendation] Try not to use the !important statement.

[Recommendation] When you need to force the specified style and do not allow any scene override, define the style through tag inline and !important.

Explanation:

It must be noted that the inline !important style should only be used when the design does not allow any other scene to override the style. This scheme is usually used in applications in third-party environments. The z-index section below is a typical example of one of these special scenarios.

2.6 z-index

[建议] 将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。

解释：

同层的多个元素，如多个由用户输入触发的 Dialog，在该层级内使用相同的 z-index 或递增 z-index。

建议每层包含100个 z-index 来容纳足够的元素，如果每层元素较多，可以调整这个数值。

[建议] 在可控环境下，期望显示在最上层的元素，z-index 指定为 9999。

解释：

可控环境分成两种，一种是自身产品线环境；还有一种是可能会被其他产品线引用，但是不会被外部第三方的产品引用。

不建议取值为 2147483647。以便于自身产品线被其他产品线引用时，当遇到层级覆盖冲突的情况，留出向上调整的空间。

[建议] 在第三方环境下，期望显示在最上层的元素，通过标签内联和 !important，将 z-index 指定为 2147483647。

解释：

第三方环境对于开发者来说完全不可控。在第三方环境下的元素，为了保证元素不被其页面其他样式定义覆盖，需要采用此做法。

3 值与单位

3.1 文本

[强制] 文本内容必须用双引号包围。

解释：

文本类型的内容可能在选择器、属性值等内容中。

示例：

/* good */
html[lang|="zh"] q:before {
  font-family: "Microsoft YaHei", sans-serif;
  content: "“";
}
html[lang|="zh"] q:after {
  font-family: "Microsoft YaHei", sans-serif;
  content: "”";
}
/* bad */
html[lang|=zh] q:before {
  font-family: 'Microsoft YaHei', sans-serif;
  content: '“';
}
html[lang|=zh] q:after {
  font-family: "Microsoft YaHei", sans-serif;
  content: "”";
}

3.2 数值

[强制] 当数值为 0 - 1 之间的小数时，省略整数部分的 0。

示例：

/* good */
panel {
  opacity: .8
}
/* bad */
panel {
  opacity: 0.8
}

3.3 url()

[强制] url() 函数中的路径不加引号。

示例：

/* good */
body {
  background: url(bg.png);
}
/* bad */
body {
  background: url("bg.png");
}

[强制] url() 函数中的绝对路径可省去协议名。

示例：

body {
  background: url(//w.zuzuche.com/img/bg.png) no-repeat 0 0;
}

3.4 长度

[强制] 长度为 0 时须省略单位。 (也只有长度单位可省)

示例：

/* good */
body {
  padding: 0 5px;
}
/* bad */
body {
  padding: 0px 5px;
}

3.5 颜色

[强制] RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。

解释：

带有alpha的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。

示例：

/* good */
.success {
  box-shadow: 0 0 2px rgba(0, 128, 0, .3);
  border-color: #008000;
}
/* bad */
.success {
  box-shadow: 0 0 2px rgba(0,128,0,.3);
  border-color: rgb(0, 128, 0);
}

[强制] 颜色值可以缩写时，必须使用缩写形式。

示例：

/* good */
.success {
  background-color: #aca;
}
/* bad */
.success {
  background-color: #aaccaa;
}

[强制] 颜色值不允许使用命名色值。

示例：

/* good */
.success {
    color: #90ee90;
}
/* bad */
.success {
    color: lightgreen;
}

[建议] 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。

示例：

/* good */
.success {
  background-color: #aca;
  color: #90ee90;
}
/* good */
.success {
  background-color: #ACA;
  color: #90EE90;
}
/* bad */
.success {
  background-color: #ACA;
  color: #90ee90;
}

3.6 2D 位置

[强制] 必须同时给出水平和垂直方向的位置。

解释：

2D 位置初始值为 0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为 center。为避免理解上的困扰，应同时给出两个方向的值。background-position属性值的定义

示例：

/* good */
body {
  background-position: center top; /* 50% 0% */
}
/* bad */
body {
  background-position: top; /* 50% 0% */
}

4 文本编排

4.1 字体族

[强制] font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中。

解释：

所谓英文 Family Name，为字体文件的一个元数据，常见名称如下：

字体操作系统Family Name
宋体 (中易宋体)WindowsSimSun
黑体 (中易黑体)WindowsSimHei
微软雅黑WindowsMicrosoft YaHei
微软正黑WindowsMicrosoft JhengHei
华文黑体Mac/iOSSTHeiti
冬青黑体Mac/iOSHiragino Sans GB
文泉驿正黑LinuxWenQuanYi Zen Hei
文泉驿微米黑LinuxWenQuanYi Micro Hei

示例：

h1 {
  font-family: "Microsoft YaHei";
}

[强制] font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族( serif / sans-serif )。

解释：

更详细说明可参考本文。

示例：

/* Display according to platform */
.article {
  font-family: Arial, sans-serif;
}
/* Specific for most platforms */
h1 {
  font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
}

[强制] font-family 不区分大小写，但在同一个项目中，同样的 Family Name 大小写必须统一。

示例：

/* good */
body {
  font-family: Arial, sans-serif;
}
h1 {
  font-family: Arial, "Microsoft YaHei", sans-serif;
}
/* bad */
body {
  font-family: arial, sans-serif;
}
h1 {
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

4.2 字号

[强制] 需要在 Windows 平台显示的中文内容，其字号应不小于 12px。

解释：

由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。

4.3 字体风格

[建议] 需要在 Windows 平台显示的中文内容，不要使用除 normal 外的 font-style。其他平台也应慎用。

解释：

由于中文字体没有 italic 风格的实现，所有浏览器下都会 fallback 到 obilique 实现 (自动拟合为斜体)，小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效果差，造成阅读困难。

4.4 字重

[强制] font-weight 属性必须使用数值方式描述。

解释：

CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。

浏览器本身使用一系列启发式规则来进行匹配，在 f9a3ea7a992bc72c923f1c140c2d89fb=700 时匹配 Bold 字重。

但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见此表)，故使用数值描述增加了灵活性，也更简短。

示例：

/* good */
h1 {
  font-weight: 700;
}
/* bad */
h1 {
  font-weight: bold;
}

4.5 行高

[建议] line-height 在定义文本段落时，应使用数值。

解释：

将 line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置 line-height。

当 line-height 用于控制垂直居中时，还是应该设置成与容器高度一致。

示例：

.container {
  line-height: 1.5;
}

5 变换与动画

[强制] 使用 transition 时应指定 transition-property。

示例：

/* good */
.box {
  transition: color 1s, border-color 1s;
}
/* bad */
.box {
  transition: all 1s;
}

[建议] 尽可能在浏览器能高效实现的属性上添加过渡和动画。

解释：

见本文，在可能的情况下应选择这样四种变换：

transform: translate(npx, npx);
transform: scale(n);
transform: rotate(ndeg);
opacity: 0..1;

典型的，可以使用 translate 来代替 left 作为动画属性。

示例：

/* good */
.box {
  transition: transform 1s;
}
.box:hover {
  transform: translate(20px); /* move right for 20px */
}
/* bad */
.box {
  left: 0;
  transition: left 1s;
}
.box:hover {
  left: 20px; /* move right for 20px */
}

6 响应式

[强制] Media Query 不得单独编排，必须与相关的规则一起定义。

示例：

/* Good */
/* header styles */
@media (...) {
  /* header styles */
}
/* main styles */
@media (...) {
  /* main styles */
}
/* footer styles */
@media (...) {
  /* footer styles */
}
/* Bad */
/* header styles */
/* main styles */
/* footer styles */
@media (...) {
  /* header styles */
  /* main styles */
  /* footer styles */
}

[强制] Media Query 如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。

示例：

@media
(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx),             /* The standard way */
(min-resolution: 192dpi) {           /* dppx fallback */
  /* Retina-specific stuff here */
}

[建议] 尽可能给出在高分辨率设备 (Retina) 下效果更佳的样式。

7 兼容性

7.1 属性前缀

[建议] 带私有前缀的属性由长到短排列，按冒号位置对齐。

解释：

标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。

在 Sublime Text 2 中， 使用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。

示例：

.box {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

7.2 Hack

[建议] 需要添加 hack 时应尽可能考虑是否可以采用其他方式解决。

解释：

如果能通过合理的 HTML 结构或使用其他的 CSS 定义达到理想的样式，则不应该使用 hack 手段解决问题。通常 hack 会导致维护成本的增加。

[建议] 尽量使用 选择器 hack 处理兼容性，而非 属性 hack。

解释：

尽量使用符合 CSS 语法的 selector hack，可以避免一些第三方库无法识别 hack 语法的问题。

示例：

/* IE 7 */
*:first-child + html #header {
  margin-top: 3px;
  padding: 5px;
}
/* IE 6 */
* html #header {
  margin-top: 5px;
  padding: 4px;
}

[建议] 尽量使用简单的 属性 hack。

示例：

.box {
  _display: inline; /* fix double margin */
  float: left;
  margin-left: 20px;
}
.container {
  overflow: hidden;
  *zoom: 1; /* triggering hasLayout */
}

7.3 Expression

[强制] 禁止使用 Expression。

7.4 @import

[强制] 禁止使用 @import。

解释：与 相比, @import 更慢，需要额外的页面请求，并且可能引发其他的意想不到的问题。应该避免使用他们，而选择其他的方案：

● 使用多个 2cdf5bf648cf2f33323966d7f58a7f3f 元素

● 使用 CSS 预处理器例如 Sass 或 Less 将样式编译到一个文件中

The above is the detailed content of CSS coding standards. For more information, please follow other related articles on the PHP Chinese website!