前端开发规范：CSS规范

一个项目应该永远遵循同一套编码规范
不管有多少人共同参与同一项目，确保每一行代码都像是同一个人编写的

前端开发规范：CSS规范

语义化命名

id和class的命名时要有效反应元素目的和用途的名称，或其他通用的名称，不要使用表象和晦涩难懂的名称

不要随意使用id

id在js是唯一的，不能重复定义，而使用class类选择器却可以重复使用，另外id的权重远高于class，所以id应该按需使用不要滥用。

优化CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)


.heavy{
        position: absolute;
        top: 0;
        left: 10px;
        width: 100px;
        color: #008000;
        background: url(../img/logo.pg) no-repeat left center;
}

使用CSS缩写属性

如果可以尽可能的使用缩写属性，代码效率和可读性。

去掉小数点前的“0”，省略“0”后面的单位


.heavy{
        position: absolute;
        top: 0;
        left: .8rem;
}

连字符CSS选择器命名规范

长名称或词组可以使用中横线来为选择器命名，不建议使用下划线来命名CSS选择器，一是输入的时候少按一个shift键，二是能良好区分JavaScript变量命名（JS变量命名是用"_"）

私有在前，标准在后

先写带有浏览器私有标志的，后写W3C标准的。

.m-box{
      -webkit-box-shadow:0 0 0 #000;
      -moz-box-shadow:0 0 0 #000;
      box-shadow:0 0 0 #000;
}

注释格式：/* 注释文字 */

对选择器的注释统一写在被注释对象的上一行，对属性及值的注释写于分号后。
注释内容两端需空格，已确保即使在编码错误的情况下也可以正确解析样式。
在必要的情况下，可以使用块状注释，块状注释保持统一的缩进对齐。
原则上每个系列的样式都需要有一个注释，言简意赅的表明名称、用途、注意事项等。

/* 块状注释文字
 * 块状注释文字
 * 块状注释文字
 */
.m-list{width:500px;}
.m-list li{height:20px;line-height:20px;/* 这里是对line-height的一个注释 */overflow:hidden;}
.m-list li a{color:#333;}
/* 单行注释文字 */
.m-list li em{color:#666;}

原则上不允许使用Hack

很多不兼容问题可以通过改变方法和思路来解决，并非一定需要Hack，根据经验你完全可以绕过某些兼容问题。一种合理的结构和合理的样式，是极少会碰到兼容问题的。
由于浏览器自身缺陷，我们无法避开的时候，可以允许使用适当的Hack。

选择器权重

比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数
important->内联->ID->类->标签|伪类|属性选择->伪对象->继承->通配符->继承

选择器权重

选择器顺序

请综合考虑以下顺序依据：
从大到小（以选择器的范围为准）
从低到高（以等级上的高低为准）
从先到后（以结构上的先后为准）
从父到子（以结构上的嵌套为准）

以下仅为简单示范：
/* 从大到小 */
.m-list p{margin:0;padding:0;}
.m-list p.part{margin:1px;padding:1px;}
/* 从低到高 */
.m-logo a{color:#f00;}
.m-logo a:hover{color:#fff;}
/* 从先到后 */
.g-hd{height:60px;}
.g-bd{height:60px;}
.g-ft{height:60px;}
/* 从父到子 */
.m-list{width:300px;}
.m-list .itm{float:left;}

其他

每个选择器和属性声明总是使用新的一行
16进制颜色代码缩写，如#ffffff写为#fff
css选择器命名时尽量用英文，尽量不缩写，除非已达成共识
选择器、属性和值都使用小写：在xhtml标准中规定了所有标签、属性和值都小写，CSS也是如此。
最后一个值也以分号结尾
使用单引号

CSS选择器命名参考

选择器命名参考.png

CSS样式表文件命名参考

全局：global.css
全局样式为全站公用，为页面样式基础，页面中必须包含。
结构：layout.css
页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。
私有：style.css
独立页面所使用的样式文件，页面中必须包含。
模块 module.css
产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。
主题 themes.css
实现换肤功能时应用。
补丁 mend.css
基于以上样式进行的私有化修补。
文字 font.css
表单 forms.css
打印 print.css
专栏 columns.css

重置样式表参考

重置样式，清除浏览器默认样式，并配置适合设计的基础样式（强调文本是否大多是粗体、主文字色，主链接色，主字体等）。

/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}+-
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}

参考：淘宝移动端首页重置样式表

@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
html,body{font-family:sans-serif}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
input,select,textarea{font-size:100%}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
abbr,acronym{border:0;font-variant:normal}
del{text-decoration:line-through}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}
q:before,q:after{content:''}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
a:hover{text-decoration:underline}
ins,a{text-decoration:none}

参考：Tmall移动端首页重置样式表

html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html *{outline:none;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
html,body{font-family:sans-serif}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
input,select,textarea{font-size:100%}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
abbr,acronym{border:0;font-variant:normal}
del{text-decoration:line-through}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}
q:before,q:after{content:''}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
a:hover{text-decoration:underline}
ins,a{text-decoration:none}

参考引用：
nec http://nec.netease.com/standard/css-sort.html

前端开发规范：CSS规范

相关链接：

语义化命名

不要随意使用id

优化CSS书写顺序

使用CSS缩写属性

去掉小数点前的“0”，省略“0”后面的单位

连字符CSS选择器命名规范

推荐使用子选择器，避免使用标签名

私有在前，标准在后

注释格式：/* 注释文字 */

原则上不允许使用Hack

选择器权重

选择器顺序

其他

CSS选择器命名参考

CSS样式表文件命名参考

重置样式表参考

参考：淘宝移动端首页重置样式表

参考：Tmall移动端首页重置样式表

你可能感兴趣的:(前端开发规范：CSS规范)