CSS 指层叠样式表 (Cascading Style Sheets),定义如何显示 HTML 元素,但由于 CSS 天生全局性,随着项目复杂度增加,极易出现样式覆盖以及其它的问题。

1. 通用规范文件编码

为了避免内容乱码,统一使用UTF-8编码保存。

样式文件第一行设置字符集为 UTF-8

@charset'UTF-8';/*注意字符集说明应在第一行*/缩进规范

统一使用两个空格缩进

web前端开发直播教程Q-q-u-n: 767273102 ,内有免费开发工具,零基础,进阶视频教程,希望新手少走弯路

2. 初始化规范

各浏览器厂商的初始样式都不一样,为了消除不同浏览器对 HTML 文本呈现的差异,我们常引入一些初始化样式,如 normalize.css、reset.css 等,当对于这些样式的引入我们需要注意下面几种情况:

不使用 UI 框架,由零开始搭建
从零开始搭建的情况下,进行样式初始化,在项目最开始的时候就引入,不要在开发中途引入,避免不可预知的样式冲突。

不使用 UI 框架,但使用了部分插件
插件往往都带有自己特有的样式,如富文本插件,在开发中途使用初始化样式有可能导致样式错乱,所以不建议大范围的初始化,只需简单进行初始化即可。

*{padding:0;margin:0;}已使用 UI 框架
在明确知道需要使用 UI 框架的时候,不使用第三方初始化样式,不管是在项目开始前还是进行中,因为 UI 框架一般都自带初始化,额外引入了反而会影响原有效果。3. 代码规范命名规范

class 应以功能或内容命名,不以表现形式命名
class 与 id 单词字母小写,多个单词组成时,采用中划线-分隔
使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 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 非 noneposition 非 staticoverflow 非 visible字体规范对外商用网站,不要用font-face引入微软雅黑字体,避免侵权(包括图片内容)需要在 Windows 平台显示的中文内容,其字号应不小于12px

网站上使用微软雅黑字体有三种形式:1、【侵权】图片中使用微软雅黑字体,比如网站头图2、【安全】网站CSS用font-family声明网站使用微软雅黑字体,比如文章标题和正文3、【侵权】网站通过font-face引用微软雅黑,这种方式不常见选择器规范

在严格遵照BEM(Block Element Modifier)时,建议只使用类选择器,但 BEM 书写麻烦,所以建议如下

禁用通用选择器 *

不使用无具体语义定义的标签选择器

web前端开发直播教程Q-q-u-n: 767273102 ,内有免费开发工具,零基础,进阶视频教程,希望新手少走弯路


属性顺序

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. 覆盖规范尽可能少用importentvue 单文件组件统一使用 css/less/sassscoped每个页面/组件需要有一个全局唯一的标识 id/class,属于它下面的样式都需要加上该唯一标识避免全局修改已有样式,必须具体到页面上(通过权重)禁用全匹配*选择器(特殊情况除外,如初始化)

vue 单文件组件修改样式不生效可使用/deep/>>>

6. 媒体查询

对于内部管理系统,商务多使用 ThinkPad 笔记本,屏幕分辨率为1366*768。建议使用Resolution Test浏览器拓展进行浏览器窗口大小调试。

下载地址:www.cnplugins.com/devtool/res…

常用尺寸如下

大小描述≥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;}}

如果需要做打印样式进行适配,需要使用@media print

@mediaprint{body{background:#fff;}}7. 单位规范

CSS 单位有两种,分别是绝对单位相对单位

常用绝对单位

px:像素 (计算机屏幕上的一个点)cm:厘米in:英寸pt:磅 (1 pt 等于 1/72 英寸)

常用相对单位

%:父元素百分比vw:视口宽度百分比vh:视口高度百分比em:当前字体倍数rem:根元素字体倍数*rpx:微信小程序专用,规定屏幕宽为 750rpx

使用较多的单位有 px、%、rem 三种,建议 PC 端用 px 单位、移动端用 rem,需要具体控制尺寸还是使用 px

备注:如果需要计算不同单位下的值,可以使用 css3 方法 calc()_

web前端开发直播教程Q-q-u-n: 767273102 ,内有免费开发工具,零基础,进阶视频教程,希望新手少走弯路

8. 兼容性规范私有属性的使用

正是由于浏览器厂商的不同,导致了一些样式需要加前缀才生效,下面的常见的浏览器内核和前缀

浏览器内核前缀FirefoxGecko-moz-ChromeWebKit-webkit-IETrident-ms-SafariWebKit-webkit-OperaPresto-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 自动添加私有前缀_