摘要:建议尽量不使用声明。示例建议颜色值中的英文字符采用小写。字体单位建议使用作为定义的度量单位。示例建议需要添加时应尽可能考虑是否可以采用其他方式解决。建议尽量使用选择器处理兼容性,而非属性。
</>复制代码
CSS 作为网页样式的描述语言。本文档的目标是使 CSS 代码风格保持一致,容易被理解和被维护。
1. 代码风格
1.1 文件
解释:
UTF-8 编码具有更广泛的适应性。
示例:
</>复制代码
.selector {
margin: 0;
padding: 0;
}
1.3 空格
示例:
</>复制代码
.selector {
}
示例:
</>复制代码
margin: 0;
示例:
</>复制代码
font-family: Arial, sans-serif;
1.4 行长度
解释:
常见不可分割的场景为URL超长。
示例:
</>复制代码
/* 不同属性值按逻辑分组 */
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 选择器
示例:
</>复制代码
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
示例:
</>复制代码
/* 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;
}
示例:
</>复制代码
/* good */
article[character="juliet"] {
voice-family: "Vivien Leigh", victoria, female;
}
/* bad */
article[character="juliet"] {
voice-family: "Vivien Leigh", victoria, female;
}
1.6 属性
示例:
</>复制代码
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
示例:
</>复制代码
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}
2. 通用
2.1 选择器
解释:
在性能和维护性上,都有一定的影响。
示例:
</>复制代码
/* good */
#error,
.danger-message {
font-color: #c00;
}
/* bad */
dialog#error,
p.danger-message {
font-color: #c00;
}
解释:
BEM是一种命名方法,能够帮助你在前端开发中实现可复用的组件和代码共享。
BEM的命名规矩很容易记:block-name__element-name--modifier-name,也就是模块名 + 元素名 + 修饰器名。
示例:
</>复制代码
示例:
</>复制代码
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
2.2 属性缩写
示例:
</>复制代码
/* good */
.post {
font: 12px/1.5 arial, sans-serif;
}
/* bad */
.post {
font-family: arial, sans-serif;
font-size: 12px;
line-height: 1.5;
}
解释:
坚持限制属性取值简写的使用,属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:
padding
margin
font
background
border
border-radius
大多数情况下,我们并不需要设置属性简写中包含的所有值。例如,HTML 头部只设置上下的 margin,所以如果需要,只设置这两个值。过度使用属性简写往往会导致更混乱的代码,其中包含不必要的重写和意想不到的副作用。
Mozilla Developer Network 有一篇对不熟悉属性简写及其行为的人来说很棒的关于shorthand properties 的文章。
示例:
</>复制代码
/* good */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url(image.jpg);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
/* bad */
.element {
margin: 0 0 10px;
background: red;
background: url(image.jpg);
border-radius: 3px 3px 0 0;
}
2.3 属性书写顺序
解释:
Formatting Model 相关属性包括:position / top / right / bottom / left / float / display / overflow 等
Box Model 相关属性包括:border / margin / padding / width / height 等
Typographic 相关属性包括:font / line-height / text-align / word-wrap 等
Visual 相关属性包括:background / color / transition / list-style 等
另外,如果包含 content 属性,应放在最前面。
示例:
</>复制代码
.sidebar {
/* formatting model: positioning schemes / offsets / z-indexes / display / ... */
position: absolute;
top: 50px;
left: 0;
overflow-x: hidden;
/* box model: sizes / margins / paddings / borders / ... */
width: 200px;
padding: 5px;
border: 1px solid #ffffd;
/* 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;
}
2.4 清除浮动
解释:
触发 BFC 的方式很多,常见的有:
float 非 none
position 非 static
overflow 非 visible
如希望使用更小副作用的清除浮动方法,参见 A new micro clearfix hack一文。
另需注意,对已经触发 BFC 的元素不需要再进行 clearfix。
解释:
必须注意的是,仅在设计上 确实不允许任何其它场景覆盖样式 时,才使用内联的 !important 样式。通常在第三方环境的应用中使用这种方案。下面的 z-index 章节是其中一个特殊场景的典型样例。
解释:
自己写的z-index的值不能超过 100 (通用组的除外);
页面中的元素内容的z-index不能超过10(popup poptip除外),需要按照内容定义1 2 3 4不允许直接使用如1000,9999;
popup poptip的z-index需要按照内容使用 99以下,10以上的值(11,12,13,也可以小于10),不允许直接使用1000,9999之类大值;
解释:
可控环境分成两种,一种是自身产品线环境;还有一种是可能会被其他产品线引用,但是不会被外部第三方的产品引用。
不建议取值为 2147483647。以便于自身产品线被其他产品线引用时,当遇到层级覆盖冲突的情况,留出向上调整的空间。
解释:
文本类型的内容可能在选择器、属性值等内容中。
示例:
</>复制代码
/* 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 数值
示例:
</>复制代码
/* good */
panel {
opacity: .8;
}
/* bad */
panel {
opacity: 0.8;
}
3.3 url()
示例:
</>复制代码
body {
background: url(//baidu.com/img/bg.png) no-repeat 0 0;
}
3.4 长度
示例:
</>复制代码
/* good */
body {
padding: 0 5px;
}
/* bad */
body {
padding: 0px 5px;
}
3.5 颜色
解释:
带有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 {
color: #90ee90;
}
/* bad */
.success {
color: lightgreen;
}
示例:
</>复制代码
/* good */
.success {
background-color: #aca;
}
/* bad */
.success {
background-color: #aaccaa;
}
示例:
</>复制代码
/* 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 字体族
解释:
所谓英文 Family Name,为字体文件的一个元数据,常见名称如下:
示例:
</>复制代码
h1 {
font-family: "Microsoft YaHei";
}
解释:
更详细说明可参考如何保证网页的字体在各平台都尽量显示为最高质量的黑体?
示例:
</>复制代码
/* 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;
}
示例:
</>复制代码
/* 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 的文字显示效果极差、难以辨认。
解释:
CSS 的字重分 100 – 900 共九档,但目前受字体本身质量和浏览器的限制,实际上支持 400 和 700 两档,分别等价于关键词normal 和 bold。
浏览器本身使用一系列启发式规则来进行匹配,在 <700 时一般匹配字体的 Regular 字重,>=700 时匹配 Bold 字重。
但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见此表),故使用数值描述增加了灵活性,也更简短。
示例:
</>复制代码
/* good */
h1 {
font-weight: 700;
}
/* bad */
h1 {
font-weight: bold;
}
4.5 行高
将 line-height 设置为数值,浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中,能达到较为舒适的行间间隔效果,避免在每个设置了 font-size 都需要设置 line-height。
当 line-height 用于控制垂直居中时,还是应该设置成与容器高度一致。
示例
</>复制代码
.container {
line-height: 1.5;
}
5.变换与动画
示例:
</>复制代码
/* 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. 响应式
示例:
</>复制代码
/* 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 */
}
解释:
尽量将媒体查询的位置靠近他们相关的规则。不要将他们一起放到一个独立的样式文件中,或者丢在文档的最底部。这样做只会让大家以后更容易忘记他们。
示例:
</>复制代码
element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
7. 兼容性
7.1 前缀属性
解释:
标准属性放在最后,按冒号对齐方便阅读,也便于在编辑器内进行多行编辑。
示例:
</>复制代码
.box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
7.2 Hack
解释:
如果能通过合理的 HTML 结构或使用其他的 CSS 定义达到理想的样式,则不应该使用 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;
}
示例:
</>复制代码
.box {
_display: inline; /* fix double margin */
float: left;
margin-left: 20px;
}
.container {
overflow: hidden;
*zoom: 1; /* triggering hasLayout */
}
7.3 Expression
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112174.html
摘要:示例强制对中规定允许省略的闭合标签,不允许省略闭合标签。示例图片强制禁止的取值为空。示例提交取消取消提交建议当使用进行表单提交时,如果条件允许,应使原生提交功能正常工作。示例建议模板代码应以保证单个标签语法的正确性为基本原则。 这段时间在整理前端部分代码规范,初步想法是从HTML、CSS、Javascipt、项目文件目录四部分是整理。之前已经整理完了CSS编码规范,有兴趣可以了解下 1...
摘要:用两个空格代替制表符这是唯一能保证在所有环境下获得一致展现的方法。编辑器配置将你的编辑器按照下面的配置进行设置,以免常见的代码不一致和差异用两个空格代替制表符保存文件时删除尾部的空白符设置文件编码为在文件结尾添加一个空白行。 黄金定律 永远遵循同一套编码规范 - 可以是这里列出的,也可以是你自己总结的。如果发现规范中有任何错误,敬请指正。 HTML 语法 用两个空格代替制表符 (ta...
摘要:指定参数为可以获得所有子元素。如需多次操作同一集合,则应将集合转为数组。示例显示为显示为建议获取元素的直接子元素时使用。建议尽量减少操作。事件建议优先使用绑定事件,避免直接在属性中或的属性绑定事件处理。而的仅支持冒泡的事件触发。 转载:原地址 4 浏览器环境 4.1 模块化 4.1.1 AMD [强制] 使用 AMD 作为模块定义。 解释: AMD 作为由社区认可的模块定义...
摘要:当然我们还可以引入框架,这些框架一般都自带模板处理引擎,比如等语义化命名和语义化标签我们尽量多采用语义化来命名,并且采用语义化标签来书写代码,多用中新增的标签来书写。 1.黄金法则(Golden rule) 不管有多少人参与同一个项目,一定要确保每一行代码都像是同一个人编写的。 Every line of code should appear to be written by a si...
阅读 3147·2021-10-08 10:04
阅读 1082·2021-09-30 09:48
阅读 3453·2021-09-22 10:53
阅读 1672·2021-09-10 11:22
阅读 1687·2021-09-06 15:00
阅读 2148·2019-08-30 15:56
阅读 708·2019-08-30 15:53
阅读 2281·2019-08-30 13:04