web项目开发 之 前端规范 --- CSS编码规范
本文严格遵循相关标准，在兼顾实际应用的可读性下进行页面开发，并综合考虑多方面因素以优化网页加载过程中的性能表现，遵循日常前端开发的标准。
文档。为广大web从业者提供学习与应用的资源，并在维护以及优化和提升项目方面节省时间和精力。
转载请注明出处；JS前端实用开发QQ群 ：147250970 欢迎加入~！
CSS编码规范
1 前言
2 代码风格
2.1 文件
2.2 缩进
2.3 空格
2.4 行长度
2.5 选择器
2.6 属性
3 通用
3.1 选择器
3.2 属性缩写
3.3 属性书写顺序
3.4 清除浮动
3.5 !important
3.6 z-index
4 值与单位
4.1 文本
4.2 数值
4.3 url()
4.4 长度
4.5 颜色
4.6 2D 位置
5 文本编排
5.1 字体族
5.2 字号
5.3 字体风格
5.4 字重
5.5 行高
6 变换与动画
7 响应式
8 兼容性
8.1 属性前缀
8.2 Hack
8.3 Expression
1 前言
CSS 用作网页样式的描述语言，在百度中长期得到广泛应用。本文档遵循统一的编码规范以确保代码易于理解和维护。
由于本文档专为 CSS 而设计，在使用各种 CSS 预编译器时（例如 less、sass 和 stylus 等），适用的部分也需要遵循本文档的指导原则。
2.1 文件
该存储库推荐遵循无BOM的UTF-8编码规范以确保兼容性
解释：
UTF-8 编码支持范围更大。BOM 在使用程序或工具处理文件时可能导致不必要的影响。
2.2 缩进
该规范规定，在编写CSS样式表时必须采用四格缩进作为每个缩进层级的标准格式，并且必须避免使用两格或者tab字符。
示例：
.selectormargin0padding02.3 空格
[强制] 选择器 与 { 之间必须包含空格。
示例：
.selector硬性规定指出，在CSS样式表中使用[强制]时应遵循如下规则：后边的冒号前后不应留有空白，并且冒号前后不应省略空白。
示例：
[强制] 列表型属性值 书写在单行时，, 后必须跟一个空格。
示例：
2.4 行长度
硬性规定指出：所有代码块必须满足以下条件——每行字符数量不超过120个字符，并且当无法满足时才允许单行内容
解释：
常见不可分割的场景为URL超长。
处理超长样式时，在样式值中的空格位置或逗号后面换行是一个重要的指导方针和优化实践。推荐按照逻辑进行分组和整理以提高代码可读性
示例：
/* 不同属性值按逻辑分组 *//* 可重复多次的属性，每次重复一行 *//* 类似函数的属性值可以根据函数调用的缩进进行 */.04.522.5 选择器
强制
强制
强制
示例：
/* good */.post.page.commentline-height1.5/* bad */.post.page.commentline-height1.5[强制] >、+、~ 选择器的两边各保留一个空格。
示例：
/* good */navpadding10pxlabelinputmargin-left5pxinput:checkedbuttonbackground-color#69C/* bad */navpadding10pxlabelinputmargin-left5pxinput:checkedbuttonbackground-color#69CIn the Markdown language specification, when representing the value part in a [strong emphasis]strong attribute selector, it is required to enclose it with double quotes.
解释：
不允许使用单引号，不允许不使用引号。
示例：
/* good */articlevoice-family"Vivien Leigh"/* bad */articlevoice-family"Vivien Leigh"2.6 属性
[强制] 属性定义必须另起一行。
示例：
/* good */.selectormargin0padding0/* bad */.selectormargin0padding0在CSS样式表中，在定义"强制"属性时需以分号收尾
示例：
/* good */.selectormargin0/* bad */.selectormargin03 通用
3.1 选择器
[强制] 如无必要，不得为 id、class 选择器添加类型选择器进行限定。
解释：
在性能和维护性上，都有一定的影响。
示例：
/* good */#error.danger-messagefont-color#c00/* bad */dialog#errorp.danger-messagefont-color#c00建议选择器的层次结构不超过 3 层，并且后置限定项尽量精准设置。
示例：
/* good */#usernameinput.comment.avatar/* bad */.page.header.login#usernameinput.commentdiv*3.2 属性缩写
该指导方针鼓励在适用属性缩写的场景下优先采用属性缩写形式。
示例：
/* good */.postfont12px1.5arialsans-serif/* bad */.postfont-familyarialsans-seriffont-size12pxline-height1.5须知时常用 border/margin/padding这些缩写，在设计中需注意隐含值对实际数值的影响；只有当设置多个方向的值时才可适当应用这些缩写。
解释：
使用HTML中的`border、margin和padding$等简写可能会导致同时赋值多个属性，并可能导致不需要的部分被覆盖。因此，在某些方向需要继承其他声明的值时，请分别定义这些属性
示例：
/* centering <article class="page"> horizontally and highlight featured ones */articlemargin5pxborder1pxsolid#999/* good */.pagemargin-rightautomargin-leftauto.featuredborder-color#69c/* bad */.pagemargin5pxauto/* introducing redundancy */.featuredborder1pxsolid#69c/* introducing redundancy */3.3 属性书写顺序
建议在同一规则集合中的属性书写时, 应按照功能进行分组, 并按照以下顺序排列书写: Formatting Model（布局方式及位置）> Box Model（尺寸）> Typographic（文本相关）> Visual（视觉效果），以便提高代码可读性。
解释：
- Formatting Model相关属性涉及：position、top、right等
- Box Model相关参数设置通常包含border、margin、padding等多个方面
- 字体和排版相关的设置主要包括font样式、line-height缩进以及text-align对齐方式
- 视觉效果相关的配置一般涉及背景颜色（background）、颜色（color）、过渡效果（transition）以及列表样式（list-style）
另外，如果包含 content 属性，应放在最前面。
示例：
.sidebar/* formatting model: positioning schemes / offsets / z-indexes / display / ... */positionabsolutetop50pxleft0overflow-xhidden/* box model: sizes / margins / paddings / borders / ... */width200pxpadding5pxborder1pxsolid#ddd/* typographic: font / aligns / text styles / ... */font-size14pxline-height20px/* visual: colors / shadows / gradients / ... */background#f5f5f5color#333-webkit-transition1s-moz-transition1stransition1s删除浮空状态或移除浮点元素
当元素需要撑起高度以容纳内部浮动元素时可以通过对其伪类设置 `clear属性或启用 BFC 来实现 clearfix 效果**。尽量避免仅通过添加额外空标签来达到效果**。
解释：
触发 BFC 的方式很多，常见的有：
- float 非 none
- position 非 static
- overflow 非 visible
如需寻求使用一种减少清除浮动副作用的新方法，请参考该解决方案的一文介绍。
另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。
3.5 !important
此建议指出应尽量避免使用带有!important标签的元素。
[建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。
解释：
需要注意的是，在设计层面严格禁止任何其它场景覆盖样式的情况下，则只能采用内联的 !important 样式这一方案。常见于第三方环境的应用中使用这种方案。下面的 z-index 部分则是其中一个特殊场景的具体体现。
第三点六级 CSS z-index 属性
指导方针要求对 z-index 进行层次分明地组织，并实现文档流外的绝对定位元素的视觉层级关系的有效调控
解释：
同一层级中的多个元素，在该层次内应当采用相同的 z-index 值或递增的 z-index 值。例如由用户输入触发的不同 Dialog 在这一层次内应采用统一的 z-index 值或采用递增的 z-index 值。
推荐将每层配置为100个 z-index 以存储足够多的元素。当某一层的元素数量较多时，可以适当修改该参数值。
建议在可控环境中对处于顶层的元素设置其z-index属性为-1000000（或-1, 234, 567），以确保其特殊需求得到满足。
解释：
将可控环境分为两类：一类是本企业各产品的运行环境；另一类则是可能被其他业务单元引用但不会受到外部第三方产品的影响或调用。
应避免将参数设置为 2^{31}-1；以便其自身产品线能够被其他产品线引用，在层级覆盖冲突的情况下仍能进行必要的上层优化调整。
此方案适用于希望使某个元素居于顶层的第三方环境配置中，在这种情况下，请借助标签内联标记和!important指令将该元素的z-index值设置为-2147483647。
解释：
第三方环境对开发者而言是高度不可预测的。在第三方环境下运行的元素必须遵循这一策略以确保其样式不会受到页面其他部分的影响。
4. 数值及其计量单位
4.1 文本
所有文本内容都应当使用双引号进行包裹
解释：
文本类型的内容可能在选择器、属性值等内容中。
示例：
/* good */htmlq:beforefont-family"Microsoft YaHei"sans-serifcontent"“"htmlq:afterfont-family"Microsoft YaHei"sans-serifcontent"”"/* bad */htmlq:beforefont-family'Microsoft YaHei'sans-serifcontent'“'htmlq:afterfont-family"Microsoft YaHei"sans-serifcontent"”"4.2 数值
在GitHub存储库中的CSS风格指南中有一项规定：如果数值处于 0 到 1 的区间内，则跳过整数位中的 0。
示例：
/* good */opacity.8/* bad */opacity0.84.3 url()
示例：
bodybackgroundurlbg.png[建议] url() 函数中absolutepath在protocolname上可省略。
示例：
bodybackgroundurl//baidu.com/img/bg.pngno-repeat004.4 长度
当长度设为零时必须省略单位。 (仅此一种情况例外)
示例：
/* good */bodypadding05px/* bad */bodypadding0px5px4.5 颜色
[强制] RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。
解释：
颜色值包含alpha时可表示为rgba()；在rgba()函数参数列表中各参数之间应留有空格
示例：
/* good */.successbox-shadow002pxrgba0, 128, 0, .3border-color#008000/* bad */.successbox-shadow002pxrgba0,128,0,.3border-colorrgb0, 128, 0[强制] 颜色值可以缩写时，必须使用缩写形式。
示例：
/* good */.successbackground-color#aca/* bad */.successbackground-color#aaccaa[强制] 颜色值不允许使用命名色值。
示例：
/* good */.successcolor#90ee90/* bad */.successcolorlightgreen对于颜色值中的英文字符，在建议中应采用小写字母形式；即使不以小写字母表示，在同一项目内部也需确保大小写的统一性。
对于颜色值中的英文字符，在建议中应采用小写字母形式；即使不以小写字母表示，在同一项目内部也需确保大小写的统一性。
示例：
/* good */.successbackground-color#acacolor#90ee90/* good */.successbackground-color#ACAcolor#90EE90/* bad */.successbackground-color#ACAcolor#90ee904.6 2D 位置
[强制] 应确保布局参数中包含水平与垂直方向的位置信息。
解释：
二维位置起始状态设置为 0% 0% ，然而在仅提供一个方向的位置时，默认另一方向设为中心以避免歧义性理解问题，请确保同时指定两个方向的位置参数以提高明确度和可读性。background-position属性值的定义
示例：
/* good */bodybackground-positioncentertop/* 50% 0% *//* bad */bodybackground-positiontop/* 50% 0% */5. 文本编排
5.1 字体族
规定：字体族名称必须使用字体的英文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 |
示例：
h1font-family"Microsoft YaHei"[强制] font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族( serif / sans-serif )。
解释：
更详细说明可参考本文。
示例：
/* Display according to platform */.articlefont-familyArialsans-serif/* Specific for most platforms */h1font-family"Helvetica Neue"Arial"Hiragino Sans GB""WenQuanYi Micro Hei""Microsoft YaHei"sans-serif规定在CSS中使用...时需注意字体家族名称（...）应保持case-insensitive，并要求同一family name的大小写应保持一致。
示例：
/* good */bodyfont-familyArialsans-serifh1font-familyArial"Microsoft YaHei"sans-serif/* bad */bodyfont-familyarialsans-serifh1font-familyArial"Microsoft YaHei"sans-serif5.2 字号
在 Windows 平台上的所有中文内容必须达到 12px 的字号以确保良好的显示效果。
解释：
由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。
第5章 字体风格
以下是遵循以下规则对原文的同义改写
具体修改示例
完整修改后的内容
特别提醒，在Windows系统中显示中文字体时，请避免在非-normal样式下应用字体格式设置。其他设备上也需谨慎处理。
解释：
因为大多数中文字体不支持斜体（italic）风格，在所有浏览器中，默认会切换到斜体（oblique）效果。特别是在Windows系统的小号字体显示时，在小号字体情况下可能会切换到点阵字体以适应显示需求。这可能导致阅读体验欠佳。
5.4 字重
该属性规定 font-weight 应当以数值形式进行表示。
解释：
CSS 的重量级分为从 100 到 900 共九个级别，在当前技术条件下受限于字体质量以及浏览器的技术限制，并非所有级别都能被广泛支持。其中具体的使用场景中常见的是 400 和 700 这两个级别值（分别相当于关键词 normal 和 bold）。
浏览器本身基于一系列启发式规则（如启发式规则）来完成字体匹配过程。当字体宽度小于700px时，通常选择Regular字体权重；而当字体宽度达到或超过700px时，则选择Bold字体权重。
现有浏览器已开始采用600的数值设置来匹配Semibold字体重量(见此表)。因此，在这种情况下采用数值描述不仅提高了灵活性，同时也简化了描述方式。
示例：
/* good */h1font-weight700/* bad */h1font-weightbold5.5 行高
指导方针：CSS属性line-height 用于定义文本段落时必须是数值
解释：
将指定 line\text{-}height 为某个数值后, 浏览器会根据当前元素所设定的 font\text{-}size 值进行相应计算. 当采用不同字号的文本段落时, 可获得较为理想的行距效果, 并且无需每次都对每个 font\text{-}size 设置相应的 line\text{-}height 值.
当 line-height 用于控制垂直居中时，还是应该设置成与容器高度一致。
示例：
.containerline-height1.56. 变换与动画
[规定] 应用 transition 时需明确设置 transition-property
示例：
/* good */.boxtransition1s1s/* bad */.boxtransitionall1s[建议] 尽可能在浏览器能高效实现的属性上添加过渡和动画。
解释：
参考本文HTML5 Rocks的完整呈现，在适当的情况下应尽可能地采用这四种变换
该变换实现沿着X轴和Y轴平移指定的像素值。缩放因子为n。绕Z轴旋转指定的角度值。透明度设置为介于0到1之间的数值。
典型的，可以使用 translate 来代替 left 作为动画属性。
示例：
/* good */.boxtransition1s.box:hovertransform20px/* move right for 20px *//* bad */.boxleft0transitionleft1s.box:hoverleft20px/* move right for 20px */[强制] Media Query 不得单独编排，必须与相关的规则一起定义。
示例：
/* 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 */[强制] Media Query 如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。
示例：
/* Webkit-based browsers *//* Older Firefox browsers (prior to Firefox 16) *//* The standard way *//* dppx fallback *//* Retina-specific stuff here */请尽量提供在 ... 高分辨率设备下表现更为出色的样式设计。
第8章 兼容性特性
8.1 属性前缀
遵循私有前缀规则（即带有_符号）的一般属性会按照从长到短的顺序排列，并且它们会根据冒号的位置进行对齐处理）。
解释：
标准属性项置于末尾，并以冒号分隔或排列以便于理解；同时，在编辑界面中支持多行排版以提高效率。
示例：
.box-webkit-box-sizing-moz-box-sizingbox-sizing8.2 Hack
[建议] 当需要引入 hack 的时候, 最好优先考虑是否可以选择其他替代方案.
解释：
建议借助恰当的 HTML 格式或采用其他 CSS 定义来实现理想的样式设计时，则应避免使用hack手段解决问题。一般情况下，采用hack手段会带来维护成本上升的问题。
建议优先采用基于选择器的方式解决兼容性问题，并避免在属性层面进行特殊处理
解释：
推荐尽可能地应用基于 CSS 语法设计的选中器捷径（selector hacks），这有助于防止某些第三方库无法解析选中器捷径的情况发生。
示例：
/* IE 7 */*:first-childhtml#headermargin-top3pxpadding5px/* IE 6 */*html#headermargin-top5pxpadding4px[](https://github.com/ecomfe/spec/blob/master/css-style-guide.md#建议-尽量使用简单的-属性 hack)[建议] 尽可能地采用易于实现的 属性重定向 技术。
示例：
.boxdisplayinline/* fix double margin */floatleftmargin-left20px.containeroverflowhiddenzoom1/* triggering hasLayout */8.3 Expression
[强制] 禁止使用 Expression。+
``
入坑方式： 欢迎加入~！气氛热情，欢乐多，妹子多！
web前端 平台汇聚了全国顶尖的web前端精英群体和前沿动态。时尚风潮与热门话题在此碰撞出创新火花！JS前端实用开发QQ群：147250970
识别码码！方便您关注我的前端公众号。听闻这边有很多小姐姐哦~及时推送一些前端问题解答和有趣的内容。
