代码组织

代码按如下形式按顺序组织：

1. @import
2. 变量声明
3. 样式声明

1
2
3
4
5
6
7
8
9

// good
@import "est/all.less";
@default-text-color: #333;
.page {
    width: 960px;
    margin: 0 auto;
}

@import 语句

@import 语句引用的文件必须写在一对引号内，.less 后缀不得省略。引号使用 ' 和 " 均可，但在同一项目内必须统一。

1
2
3

// bad
@import 'est/all';
@import "my/mixins.less";

1
2
3

// good
@import "est/all.less";
@import "my/mixins.less";

空格

混入（Mixin）

Mixin 和后面的空格之间不得包含空格。在给 mixin 传递参数时，在参数分隔符（, / ;）后必须保留一个空格：

1
2
3
4
5

// bad
.box {
    .size(30px,20px);
    .clearfix ();
}

1
2
3
4
5

// good
.box {
    .size(30px, 20px);
    .clearfix();
}

1 前言

CSS 作为网页样式的描述语言，在百度一直有着广泛的应用。本文档的目标是使 CSS 代码风格保持一致，容易被理解和被维护。

虽然本文档是针对 CSS 设计的，但是在使用各种 CSS 的预编译器(如 less、sass、stylus 等)时，适用的部分也应尽量遵循本文档的约定。

2 代码风格

2.1 空格

[强制] 选择器 与 { 之间必须包含空格。

示例：

1
2

.selector {
}

[强制] 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。

示例：

1

margin: 0;

[强制] 列表型属性值 书写在单行时，, 后必须跟一个空格。

示例：

1

font-family: Arial, sans-serif;

2.4 行长度

[强制] 每行不得超过 120 个字符，除非单行不可分割。

解释：

常见不可分割的场景为URL超长。

[建议] 对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组。

组件名为多个单词

组件名应该始终是多个单词的，根组件 App 除外。

这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

1
2
3
4

// bad
Vue.component('todo', {
  // ...
})

1
2
3
4
5

// bad
export default {
  name: 'Todo',
  // ...
}

1
2
3
4

// good
Vue.component('todo-item', {
  // ...
})

1
2
3
4

export default {
  name: 'TodoItem',
  // ...
}