CSS指层叠样式表(CascadingStyleSheets)，定义如何显示HTML元素，但由于CSS天生全局性，随着项目复杂度增加，极易出现样式覆盖以及其它的问题。 1.通用规范 文件编码 为了避免内容乱码，统一使用UTF-8编码保存。 样式文件第一行设置字符集为UTF-8 @charset'UTF-8';/*注意字符集说明应在第一行*/ 缩进规范 统一使用两个空格缩进 2.初始化规范 各浏览器厂商的初始样式都不一样，为了消除不同浏览器对HTML文本呈现的差异，我们常引入一些初始化样式，如normalize.css、reset.css等，当对于这些样式的引入我们需要注意下面几种情况： 不使用UI框架，由零开始搭建从零开始搭建的情况下，进行样式初始化，在项目最开始的时候就引入，不要在开发中途引入，避免不可预知的样式冲突。 不使用UI框架，但使用了部分插件插件往往都带有自己特有的样式，如富文本插件，在开发中途使用初始化样式有可能导致样式错乱，所以不建议大范围的初始化，只需简单进行初始化即可。 *{ padding:0; margin:0; } 已使用UI框架在明确知道需要使用UI框架的时候，不使用第三方初始化样式，不管是在项目开始前还是进行中，因为UI框架一般都自带初始化，额外引入了反而会影响原有效果。 3.代码规范 命名规范 class应以功能或内容命名，不以表现形式命名class与id单词字母小写，多个单词组成时，采用中划线-分隔使用唯一的id作为Javascripthook,同时避免创建无样式信息的class 代码风格 统一使用展开格式，不推荐紧凑格式 /*展开格式*/ .test{ color:red; font-size:12px; } /*紧凑格式*/ .test{ color:red; font-size:12px; } 统一两个空格缩进 属性声明结尾加分号 选择器与左括号之间一个空格，属性冒号后一个空格 /*推荐*/ .test{ color:red; font-size:12px; } /*不推荐*/ .test{ color:red; font-size:12px; } 不要为0指明单位 颜色值和属性值十六进制数值能用简写的尽量用简写 /*推荐*/ .test{ color:#fff; } /*不推荐*/ .test{ color:#ffffff; } 引号使用 url()、属性选择符、属性值使用单引号。 清除浮动 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置clear或触发BFC的方式进行clearfix。尽量不使用增加空标签的方式。 触发BFC的方式很多，常见的有： float非none position非static overflow非visible 字体规范 对外商用网站，不要用font-face引入微软雅黑字体，避免侵权（包括图片内容） 需要在Windows平台显示的中文内容，其字号应不小于12px 网站上使用微软雅黑字体有三种形式： 1、【侵权】图片中使用微软雅黑字体，比如网站头图 2、【安全】网站CSS用font-family声明网站使用微软雅黑字体，比如文章标题和正文 3、【侵权】网站通过font-face引用微软雅黑，这种方式不常见 选择器规范 在严格遵照BEM(BlockElementModifier)时，建议只使用类选择器，但BEM书写麻烦，所以建议如下 禁用通用选择器* 不使用无具体语义定义的标签选择器 属性顺序 CSS属性顺序是CSS良好编码风格的一部分，有助于提高代码可读性，便于发现代码问题，有利于团队合作，但在项目中发现部分同学在书写属性顺序时较为随意，想到一个属性就写一个。 建议使用下列顺序进行书写 定位属性（position、display、float、left、right） 尺寸属性（width、height、padding、margin、border） 字体属性（color、font、text-align） 其他属性（background、cursor、outline） 目的是在浏览代码时，能逐步清晰目标元素的效果。 .test{ display:block; position:relative; float:left; width:100px; height:100px; margin:010px; padding:20px0; font-size:12px; color:#333; background:rgba(0,0,0,0.5); border-radius:10px; } 4.注释规范 单行注释 注释以/*开始，以*/结束,注释内不能嵌套注释，注释内容前后空一个空格。 /*推荐的单行注释*/ /*不推荐的单行注释*/ 注：在sass和less等预处理语言上也可以使用双斜线注释，但编译后注释内容不会出现在css文件中，所以建议统一使用/**/注释。 模块注释 有时候我们需要对一个模块(一段代码块)进行功能性说明，并希望能明显区分其它代码，我们可以模块注释的方式。 注释以/*开始，以*/结束，前后空一个空格，第一行填写描述，最后一行行填写分割线。 /*推荐的模块注释 ----------------------------------------------------*/ /*不推荐的模块注释----------------------------------------------------*/ *文件信息注释 如果需要对一个文件进行功能性说明，方便其他人快速明白该文件的作用，推荐在文件开头(字符集说明下)写入下列注释，注释内容包括文件描述、创建人、创建时间等。 @charset"UTF-8"; /** *@desc文件功能描述，方便其他人快速理解 *@author创建人 *@date创建时间 */ 5.覆盖规范 尽可能少用importent vue单文件组件统一使用css/less/sassscoped 每个页面/组件需要有一个全局唯一的标识id/class，属于它下面的样式都需要加上该唯一标识 避免全局修改已有样式，必须具体到页面上(通过权重) 禁用全匹配*选择器（特殊情况除外，如初始化） vue单文件组件修改样式不生效可使用/deep/或>>> 6.媒体查询 对于内部管理系统，商务多使用ThinkPad笔记本，屏幕分辨率为1366*768。建议使用ResolutionTest浏览器拓展进行浏览器窗口大小调试。 常用尺寸如下 大小 描述 ≥1366px 大屏幕大桌面显示器 ≥1200px 中等屏幕桌面显示器 ≥992px 中等屏幕桌面显示器 ≥768px 小屏幕平板 <768px 超小屏幕手机 优先PC端 默认按最大尺寸进行布局，当尺寸缩小时逐步变成移动端布局 body{ background:gray; } @mediascreenand(max-width:1366px){ body{ background:red; } } @mediascreenand(max-width:1200px){ body{ background:yellow; } } @mediascreenand(max-width:920px){ body{ background:green; } } @mediascreenand(max-width:768px){ body{ background:black; } } 优先移动端 默认按最小尺寸进行布局，当尺寸放大时逐步变成PC端布局 body{ background:gray; } @media(min-width:768px){ body{ background:red; } } @media(min-width:920px){ body{ background:green; } } @media(min-width:1200px){ body{ background:yellow; } } @media(min-width:1366px){ body{ background:red; } } 如果需要做打印样式进行适配，需要使用@mediaprint @mediaprint{ body{ background:#fff; } } 7.单位规范 CSS单位有两种，分别是绝对单位和相对单位。 常用绝对单位 px：像素(计算机屏幕上的一个点) cm：厘米 in：英寸 pt：磅(1pt等于1/72英寸) 常用相对单位 %：父元素百分比 vw：视口宽度百分比 vh：视口高度百分比 em：当前字体倍数 rem：根元素字体倍数 *rpx：微信小程序专用，规定屏幕宽为750rpx 使用较多的单位有px、%、rem三种，建议PC端用px单位、移动端用rem，需要具体控制尺寸还是使用px 备注：如果需要计算不同单位下的值，可以使用css3方法calc()_ 8.兼容性规范 私有属性的使用 正是由于浏览器厂商的不同，导致了一些样式需要加前缀才生效，下面的常见的浏览器内核和前缀 浏览器 内核 前缀 Firefox Gecko -moz- Chrome WebKit -webkit- IE Trident -ms- Safari WebKit -webkit- Opera Presto -o- 国内知名浏览器 WebKit -webkit- 常见手机浏览器 WebKit -webkit- CSS3浏览器私有前缀在前，标准前缀在后 .test{ -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; border-radius:10px; } 备注：在webpack环境下，可以使用postcss-loader自动添加私有前缀_
