2020-08-28发表CSS / 编码规范2 分钟读完 (大约225个字)0次访问

CSS编码规范

1、文件命名

采用 HTML 命名规则。

2、选择器

尽量少用通用选择器 *。
禁止使用 ID 选择器编写样式。
尽可能避免使用属性选择器（例如，[class^=”…”]）。属性选择器相较其他选择器对浏览器的性能消耗是巨大的。
属性选择器必须使用双引号。

3、属性的顺序

顺序：定位 > 盒模型 > 文字 > 其他内部属性 > 其他 CSS3 属性。

定位属性
z-index，position，float，top，right，bottom，left

盒模型属性
width，height，padding，margin，border

文字属性
font-\*，line-height，text-align，text-decoration....

其他内部属性
overflow，opacity，cursor....

其他 css3 属性
animation，transition，transform....

4、代码编写规范

统一使用两个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）。
每个属性声明末尾都要加分号。
左括号与类名之间一个空格，冒号与属性值之间一个空格。
逗号分隔的取值，逗号之后一个空格。
每个选择器单独占一行。
颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0。
属性值十六进制数值能用简写的尽量用简写。
不要为 0 指明单位。
可简写的属性设置多值时，尽量使用简写语法。
可简写的属性设置单值时，尽量不使用简写语法。
尽量不要在 CSS 中使用!important。
url()中的路径不添加引号。
避免使用标签选择器编写样式。

.fs,
.fc {
  display: block;
  width: 50px;
  box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
  color: rgba(255,255,255,.5);
  background: #333333;
  margin: 0;
}

5、浏览器私有前缀的写法

CSS3 浏览器私有前缀在前，标准前缀在后。

.fs {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

6、注释

注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行。

1 2	/* Comment Text */ .fs{}

不同人编写的 css 应该加上对应的注释，注明页面说明、作者、日期等信息。

/**

  * @description 说明

  * @author 作者

  * 修改者（多个人）

  * @date 2015-10-10 最后的修改时间

  */

7、重置标签的默认样式

因为不同浏览器对有些标签的默认值是不同的，如果不对 css 初始化往往会出现浏览器之间的页面显示差异，为了让各个浏览器的 CSS 样式有一个统一的基准，使 HTML 元素样式在跨浏览器时有一致性的效果，所以需要重置 css 的默认样式。（以下代码，在使用 fbi 创建项目时会自动生成）

/* 清除默认样式 */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  padding: 0;
  margin: 0;
  font-family: 'Microsoft yahei';
}
ul,
ol,
li,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
dl,
dt,
dd,
input {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
  font-family: 'Microsoft yahei';
  font-size: 14px;
}

a {
  cursor: pointer;
}

img {
  vertical-align: middle;
  border: 0;
}