前端规范-css

css规范

[强制] 属性定义后必须以分号结尾。
示例:
/* good */
.selector {
margin: 0;
}

/* bad */
.selector {
margin: 0
}
[建议] 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。
示例:
/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}
[建议] 在可以使用缩写的情况下,尽量使用属性缩写。
示例:
/* good */
.post {
font: 12px/1.5 arial, sans-serif;
}

/* bad */
.post {
font-family: arial, sans-serif;
font-size: 12px;
line-height: 1.5;
}
[建议] 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。
示例:
/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}
3.2 属性缩写
[建议] 在可以使用缩写的情况下,尽量使用属性缩写。
示例:
/* good */
.post {
font: 12px/1.5 arial, sans-serif;
}

/* bad */
.post {
font-family: arial, sans-serif;
font-size: 12px;
line-height: 1.5;
}
3.4 清除浮动
[建议] 当元素需要撑起高度以包含内部的浮动元素时,通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。
解释:
触发 BFC 的方式很多,常见的有:
• float 非 none
• position 非 static
• overflow 非 visible
如希望使用更小副作用的清除浮动方法,参见 A new micro clearfix hack 一文。
另需注意,对已经触发 BFC 的元素不需要再进行 clearfix。
3.5 !important
[建议] 尽量不使用 !important 声明。
[建议] 当需要强制指定样式且不允许任何场景覆盖时,通过标签内联和 !important 定义样式。
解释:
必须注意的是,仅在设计上 确实不允许任何其它场景覆盖样式 时,才使用内联的 !important 样式。通常在第三方环境的应用中使用这种方案。下面的 z-index 章节是其中一个特殊场景的典型样例。
3.6 z-index
[建议] 将 z-index 进行分层,对文档流外绝对定位元素的视觉层级关系进行管理。
解释:
同层的多个元素,如多个由用户输入触发的 Dialog,在该层级内使用相同的 z-index 或递增 z-index。
建议每层包含100个 z-index 来容纳足够的元素,如果每层元素较多,可以调整这个数值。
[建议] 在可控环境下,期望显示在最上层的元素,z-index 指定为 999999。
解释:
可控环境分成两种,一种是自身产品线环境;还有一种是可能会被其他产品线引用,但是不会被外部第三方的产品引用。
不建议取值为 2147483647。以便于自身产品线被其他产品线引用时,当遇到层级覆盖冲突的情况,留出向上调整的空间。
[建议] 在第三方环境下,期望显示在最上层的元素,通过标签内联和 !important,将 z-index 指定为 2147483647。
解释:
第三方环境对于开发者来说完全不可控。在第三方环境下的元素,为了保证元素不被其页面其他样式定义覆盖,需要采用此做法。
4.2 数值
[强制] 当数值为 0 – 1 之间的小数时,省略整数部分的 0。
示例:
/* good */
panel {
opacity: .8;
}

/* bad */
panel {
opacity: 0.8;
}
4.4 长度
[强制] 长度为 0 时须省略单位。 (也只有长度单位可省)
示例:
/* good */
body {
padding: 0 5px;
}

/* bad */
body {
padding: 0px 5px;
}
4.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;
}
4.6 2D 位置
[强制] 必须同时给出水平和垂直方向的位置。
解释:
2D 位置初始值为 0% 0%,但在只有一个方向的值时,另一个方向的值会被解析为 center。为避免理解上的困扰,应同时给出两个方向的值。background-position属性值的定义
示例:
/* good */
body {
background-position: center top; /* 50% 0% */
}

/* bad */
body {
background-position: top; /* 50% 0% */
}
5.1 字体族
[强制] font-family 属性中的字体族名称应使用字体的英文 Family Name,其中如有空格,须放置在引号中。
解释:
所谓英文 Family Name,为字体文件的一个元数据,常见名称如下:
字体 操作系统 Family Name
宋体 (中易宋体) Windows SimSun
黑体 (中易黑体) Windows SimHei
微软雅黑 Windows Microsoft YaHei
微软正黑 Windows Microsoft JhengHei
华文黑体 Mac/iOS STHeiti
冬青黑体 Mac/iOS Hiragino Sans GB
文泉驿正黑 Linux WenQuanYi Zen Hei
文泉驿微米黑 Linux WenQuanYi Micro Hei
示例:
h1 {
font-family: “Microsoft YaHei”;
}
[强制] 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;
}
5.2 字号
[强制] 需要在 Windows 平台显示的中文内容,其字号应不小于 12px。
解释:
由于 Windows 的字体渲染机制,小于 12px 的文字显示效果极差、难以辨认。
5.3 字体风格
[建议] 需要在 Windows 平台显示的中文内容,不要使用除 normal 外的 font-style。其他平台也应慎用。
解释:
由于中文字体没有 italic 风格的实现,所有浏览器下都会 fallback 到 obilique 实现 (自动拟合为斜体),小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效果差,造成阅读困难。
5.4 字重
[强制] font-weight 属性必须使用数值方式描述。
解释:
CSS 的字重分 100 – 900 共九档,但目前受字体本身质量和浏览器的限制,实际上支持 400 和 700 两档,分别等价于关键词 normal 和 bold。
浏览器本身使用一系列启发式规则来进行匹配,在 <700 时一般匹配字体的 Regular 字重,>=700 时匹配 Bold 字重。
但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见此表),故使用数值描述增加了灵活性,也更简短。
示例:
/* good */
h1 {
font-weight: 700;
}

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

发表评论

邮箱地址不会被公开。 必填项已用*标注