(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{294:function(t,s,a){"use strict";a.r(s);var n=a(13),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"css-guide"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#css-guide"}},[t._v("#")]),t._v(" CSS Guide")]),t._v(" "),s("hr"),t._v(" "),s("p",[t._v("CSS编码风格指南。")]),t._v(" "),s("hr"),t._v(" "),s("h2",{attrs:{id:"文档目录"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#文档目录"}},[t._v("#")]),t._v(" 文档目录")]),t._v(" "),s("ol",[s("li",[s("a",{attrs:{href:"#1-%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83"}},[t._v("命名规范")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#2-%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC"}},[t._v("代码风格")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#3-%E9%80%9A%E7%94%A8"}},[t._v("通用")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#4-%E5%80%BC%E4%B8%8E%E5%8D%95%E4%BD%8D"}},[t._v("值与单位")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#5-%E6%96%87%E6%9C%AC%E6%8E%92%E7%89%88"}},[t._v("文本排版")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#6-%E5%8F%98%E6%8D%A2%E4%B8%8E%E5%8A%A8%E7%94%BB"}},[t._v("变换与动画")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#7-%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2"}},[t._v("媒体查询")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#8-%E5%85%BC%E5%AE%B9%E6%80%A7"}},[t._v("兼容性")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#9-%E4%BB%A3%E7%A0%81%E6%B3%A8%E9%87%8A"}},[t._v("代码注释")])])]),t._v(" "),s("h2",{attrs:{id:"_1-命名规范"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-命名规范"}},[t._v("#")]),t._v(" 1 命名规范")]),t._v(" "),s("p",[t._v("该命名规范主要解决以下问题：")]),t._v(" "),s("ul",[s("li",[t._v("从类名可以清晰区分出其功能作用，使页面结构清晰【命名空间、标识符】；")]),t._v(" "),s("li",[t._v("以组件、模块的思想去写一个区块的结构，强化结构的模块化【BEM模块思想、基类、子类、扩展类】；")]),t._v(" "),s("li",[t._v("减少多人合作、项目耦合等情况下的命名冲突【命名空间】；")])]),t._v(" "),s("h3",{attrs:{id:"_1-1-命名思想"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-1-命名思想"}},[t._v("#")]),t._v(" 1.1 命名思想")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 区块、模块、组件等一个整个的结构遵循BEM命名思想；")]),t._v(" "),s("p",[t._v("当你能确定组件内最后一级的结构不会再发生变化时，最后一级可省略类名，使用两层嵌套；")]),t._v(" "),s("ul",[s("li",[s("code",[t._v(".block")]),t._v(" 代表了更高级别的抽象或组件；")]),t._v(" "),s("li",[s("code",[t._v(".block__element")]),t._v(" 代表"),s("code",[t._v(".block")]),t._v("的后代，用于形成一个完整的"),s("code",[t._v(".block")]),t._v("的整体；")]),t._v(" "),s("li",[s("code",[t._v(".is-")]),t._v(" | "),s("code",[t._v(".has-")]),t._v(" | "),s("code",[t._v(".ext-")]),t._v(" 代表"),s("code",[t._v(".block")]),t._v("的修饰符，"),s("strong",[t._v("不使用双中划线"),s("code",[t._v("--")])]),t._v("。")])]),t._v(" "),s("p",[t._v("相关链接：")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"http://segmentfault.com/a/1190000000391762",target:"_blank",rel:"noopener noreferrer"}},[t._v("BEM—源自Yandex的CSS 命名方法论"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"http://bem.info/",target:"_blank",rel:"noopener noreferrer"}},[t._v("BEM官网"),s("OutboundLink")],1)])]),t._v(" "),s("h3",{attrs:{id:"_1-2-多单词连接"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-2-多单词连接"}},[t._v("#")]),t._v(" 1.2 多单词连接")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" （所有的）多个单词使用小驼峰式命名，不允许使用中划线或者下划线连接多个单词；")]),t._v(" "),s("p",[t._v("多个单词使用小驼峰式命名，以提升名称的识别度，例如："),s("code",[t._v("newsList")]),t._v("；")]),t._v(" "),s("h3",{attrs:{id:"_1-3-命名空间"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-3-命名空间"}},[t._v("#")]),t._v(" 1.3 命名空间")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 在合适的地方使用命名空间；")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("布局")]),t._v("：以"),s("code",[t._v("g")]),t._v("为命名空间，例如："),s("code",[t._v(".g-wrap")]),t._v(" 、"),s("code",[t._v(".g-header")]),t._v("、"),s("code",[t._v(".g-content")]),t._v("、"),s("code",[t._v(".g-mian")]),t._v("、"),s("code",[t._v(".g-aside")]),t._v(" 等；")]),t._v(" "),s("li",[s("strong",[t._v("工具")]),t._v("：以"),s("code",[t._v("u")]),t._v("为命名空间，"),s("strong",[t._v("表示不耦合业务逻辑的、可复用的的工具")]),t._v("，例如："),s("code",[t._v(".u-clearfix")]),t._v("、"),s("code",[t._v(".u-ellipsis")]),t._v(" 等；")]),t._v(" "),s("li",[s("strong",[t._v("状态")]),t._v("：以"),s("code",[t._v("is")]),t._v("为命名空间，"),s("strong",[t._v("表示动态的、具有交互性质的状态")]),t._v("，例如："),s("code",[t._v(".is-open")]),t._v("、"),s("code",[t._v(".is-active")]),t._v("、"),s("code",[t._v(".is-selected")]),t._v(" 等；")]),t._v(" "),s("li",[s("strong",[t._v("组件")]),t._v("：以"),s("code",[t._v("ui")]),t._v("或者"),s("code",[t._v("mod")]),t._v("为命名空间，"),s("strong",[t._v("表示可复用、移植的组件模块")]),t._v("，例如："),s("code",[t._v(".ui-slider")]),t._v("、"),s("code",[t._v(".mod-dropMenu")]),t._v("等；")]),t._v(" "),s("li",[s("strong",[t._v("扩展")]),t._v("：以"),s("code",[t._v("ext")]),t._v("为命名空间，"),s("strong",[t._v("表示对组件基类的视觉形态的扩展")]),t._v("，例如："),s("code",[t._v(".ext-cover、")]),t._v("、"),s("code",[t._v(".ext-alignLeft")]),t._v(" 等；")])]),t._v(" "),s("p",[s("strong",[t._v("状态类或扩展类一般出现在组件的父级节点，并且不允许单独使用。举个例子，同一个页面有可能会在不同的地方都会使用"),s("code",[t._v("is-active")]),t._v("，并且每个"),s("code",[t._v("is-active")]),t._v("所操纵的节点的是不同的，所以要使用"),s("code",[t._v(".ui-userCard.is-active")]),t._v(" 或 "),s("code",[t._v(".ui-userCard .is-active")]),t._v("来定义")])]),t._v(" "),s("h3",{attrs:{id:"_1-4-图片命名"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-4-图片命名"}},[t._v("#")]),t._v(" 1.4 图片命名")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("图标")]),t._v("：以"),s("code",[t._v("ico")]),t._v("作为命名空间，例如："),s("code",[t._v(".ico-close")]),t._v(" 等；")]),t._v(" "),s("li",[s("strong",[t._v("LOGO")]),t._v("：以"),s("code",[t._v("logo")]),t._v("作为命名空间，例如："),s("code",[t._v(".logo-duowan")]),t._v(" 等；")]),t._v(" "),s("li",[s("strong",[t._v("内容图像")]),t._v("：以"),s("code",[t._v("img")]),t._v("作为命名空间，例如："),s("code",[t._v(".img-userGuide")]),t._v(" 等；")])]),t._v(" "),s("h3",{attrs:{id:"_1-5-区块命名"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-5-区块命名"}},[t._v("#")]),t._v(" 1.5 区块命名")]),t._v(" "),s("p",[s("strong",[t._v("【推荐】")]),t._v(" 一般区块都可以划分为头部、身体和尾部，因此建议给你的区块分别以 "),s("code",[t._v("hd")]),t._v("、"),s("code",[t._v("bd")]),t._v("、"),s("code",[t._v("ft")]),t._v("来划分；")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".ui-card__hd")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".ui-card__bd")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".ui-card__ft")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h4",{attrs:{id:"附-命名示例"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#附-命名示例"}},[t._v("#")]),t._v(" 附：命名示例")]),t._v(" "),s("img",{attrs:{src:"https://cloud.githubusercontent.com/assets/1295348/7456687/0643f254-f2b9-11e4-9b14-f1b36257f9a3.jpg",alt:"命名示例",width:"600"}}),t._v(" "),s("p",[s("strong",[s("a",{attrs:{href:"#"}},[t._v("[⬆]")])])]),t._v(" "),s("h2",{attrs:{id:"_2-代码风格"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2-代码风格"}},[t._v("#")]),t._v(" 2 代码风格")]),t._v(" "),s("h3",{attrs:{id:"_2-1-缩进"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2-1-缩进"}},[t._v("#")]),t._v(" 2.1 缩进")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 使用 "),s("strong",[t._v("4")]),t._v(" 个空格做为一个缩进层级，不允许使用 "),s("strong",[t._v("2")]),t._v(" 个空格 或 "),s("strong",[t._v("tab")]),t._v(" 字符；")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_2-2-空格"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2-2-空格"}},[t._v("#")]),t._v(" 2.2 空格")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 选择器 与 "),s("code",[t._v("{")]),t._v("之间必须包含空格；")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[t._v("【强制】")]),t._v(" "),s("code",[t._v(">")]),t._v("、"),s("code",[t._v("+")]),t._v("、"),s("code",[t._v("~")]),t._v(" 选择器的两边各保留一个空格;")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("main>nav")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("label+input")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-left")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 5px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("input:checked~button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #69C"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("main > nav")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("label + input")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-left")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 5px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("input:checked ~ button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #69C"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[t._v("【强制】")]),t._v(" 属性名 与之后的 "),s("code",[t._v(":")]),t._v(" 之间不允许包含空格， "),s("code",[t._v(":")]),t._v("与 属性值 之间必须包含空格；")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[s("strong",[t._v("【强制】")]),t._v(" 列表型属性值 书写在单行时，"),s("code",[t._v(",")]),t._v("后必须跟一个空格；")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-family")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" Arial"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("sans-serif"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0 0 2px "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("128"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(".3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-family")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" Arial"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sans-serif"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0 0 2px "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 128"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" .3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h3",{attrs:{id:"_2-3-选择器"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2-3-选择器"}},[t._v("#")]),t._v(" 2.3 选择器")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行；")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".post, .page, .comment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("line-height")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1.5"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".post,\n.page,\n.comment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("line-height")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1.5"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_2-4-属性"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2-4-属性"}},[t._v("#")]),t._v(" 2.4 属性")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 属性定义必须另起一行；")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[t._v("【强制】")]),t._v(" 属性定义后必须以分号结尾；")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[s("a",{attrs:{href:"#"}},[t._v("[⬆]")])])]),t._v(" "),s("h2",{attrs:{id:"_3-通用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3-通用"}},[t._v("#")]),t._v(" 3. 通用")]),t._v(" "),s("h3",{attrs:{id:"_3-1-选择器"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3-1-选择器"}},[t._v("#")]),t._v(" 3.1 选择器")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 如无必要，不得为"),s("code",[t._v("id")]),t._v("、"),s("code",[t._v("class")]),t._v("选择器添加 "),s("em",[t._v("类型选择器")]),t._v(" 进行限定；")]),t._v(" "),s("p",[t._v("在性能和维护性上，都有一定的影响。")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("dialog#error,\np.danger-message")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #c00"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#error,\n.danger-message")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #c00"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[t._v("【建议】")]),t._v(" 选择器的嵌套层级应该不大于 "),s("strong",[t._v("3")]),t._v(" 级，位置靠后的限定条件应可能精确；")]),t._v(" "),s("p",[t._v("在性能和维护性上，都有一定的影响。")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".comment ul li a span")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#top-hero .hero-avatar li.avatar .pic em")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".comment .date")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#top-hero .pic em")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_3-2-属性"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3-2-属性"}},[t._v("#")]),t._v(" 3.2 属性")]),t._v(" "),s("h3",{attrs:{id:"_3-2-1-属性书写顺序"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3-2-1-属性书写顺序"}},[t._v("#")]),t._v(" 3.2.1 属性书写顺序")]),t._v(" "),s("p",[s("strong",[t._v("【建议】")]),t._v(" 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model > Box Model > Typographic > Visual 的顺序书写，以提高代码的可读性。")]),t._v(" "),s("ol",[s("li",[t._v("Positioning Model 布局方式、位置；相关属性包括："),s("code",[t._v("position / top / right / bottom / left / z-index / display / float / ...")])]),t._v(" "),s("li",[t._v("Box model 盒模型；相关属性包括："),s("code",[t._v("width / height / padding / margin / border / overflow / ...")])]),t._v(" "),s("li",[t._v("Typographic 文本排版；相关属性包括："),s("code",[t._v("font / line-height / text-align / word-wrap / ...")])]),t._v(" "),s("li",[t._v("Visual 视觉外观；相关属性包括："),s("code",[t._v("color / background / list-style / transform / animation / transition / ...")])]),t._v(" "),s("li",[t._v("如果包含 content 属性，应放在最前面；")])]),t._v(" "),s("p",[t._v("Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。其他属性只在组件 内部 起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。")]),t._v(" "),s("p",[t._v("详情资料 "),s("a",{attrs:{href:"https://github.com/twitter/recess/blob/master/lib/lint/strict-property-order.js#L36",target:"_blank",rel:"noopener noreferrer"}},[t._v("Twitter的strictPropertyOrder"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"_3-2-2-属性引号"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3-2-2-属性引号"}},[t._v("#")]),t._v(" 3.2.2 属性引号")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 属性选择器中的值必须用双引号包围。不允许使用单引号，不允许不使用引号。")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("article[character='juliet']")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("voice-family")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vivien Leigh"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" victoria"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" female\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('article[character="juliet"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("voice-family")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vivien Leigh"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" victoria"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" female\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_3-2-3-属性简写"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3-2-3-属性简写"}},[t._v("#")]),t._v(" 3.2.3 属性简写")]),t._v(" "),s("p",[t._v("简写形式可以在一定程度上压缩样式，但并不意味着你可以对所有可以简写的属性声明都使用简写。过度使用简写形式的属性声明会导致代码混乱，会对属性值带来不必要的覆盖从而引起意外的副作用，并且不能充分利用CSS的继承。常见的滥用简写属性声明的情况如下：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("padding")])]),t._v(" "),s("li",[s("code",[t._v("margin")])]),t._v(" "),s("li",[s("code",[t._v("font")])]),t._v(" "),s("li",[s("code",[t._v("background")])]),t._v(" "),s("li",[s("code",[t._v("border")])]),t._v(" "),s("li",[s("code",[t._v("border-radius")])])]),t._v(" "),s("p",[t._v("如果你只需定义其中的一两个属性，而不是全部，尽量分开来写：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-bottom")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("image.jpg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-top-left-radius")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 3px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-top-right-radius")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 3px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0 0 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("image.jpg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-radius")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 3px 3px 0 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[s("a",{attrs:{href:"#"}},[t._v("[⬆]")])])]),t._v(" "),s("h2",{attrs:{id:"_4-值与单位"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4-值与单位"}},[t._v("#")]),t._v(" 4 值与单位")]),t._v(" "),s("h3",{attrs:{id:"_4-1-文本"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4-1-文本"}},[t._v("#")]),t._v(" 4.1 文本")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 文本内容必须用双引号包围，不允许使用单引号；")]),t._v(" "),s("p",[t._v("文本类型的内容可能在选择器、属性值等内容中。")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("html[lang|=zh] q:before")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-family")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Microsoft YaHei'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sans-serif"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'“'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('html[lang|="zh"] q:after')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-family")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Microsoft YaHei"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sans-serif"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"“"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_4-2-数值"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4-2-数值"}},[t._v("#")]),t._v(" 4.2 数值")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 当数值为 "),s("strong",[t._v("0 - 1")]),t._v(" 之间的小数时，省略整数部分的 "),s("strong",[t._v("0")]),t._v("；")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0.8"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" .8"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_4-3-长度"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4-3-长度"}},[t._v("#")]),t._v(" 4.3 长度")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 长度为 "),s("strong",[t._v("0")]),t._v(" 时须省略单位 (也只有长度单位可省)；")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0px 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_4-4-url"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4-4-url"}},[t._v("#")]),t._v(" 4.4 url()")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" url() 函数中的路径不加引号；")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"bg.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bg.png"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_4-5-颜色"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4-5-颜色"}},[t._v("#")]),t._v(" 4.5 颜色")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" RGB颜色值必须使用十六进制记号形式 "),s("code",[t._v("#rrggbb")]),t._v("，不允许使用 "),s("code",[t._v("rgb()")]),t._v("，带有alpha的颜色信息可以使用 "),s("code",[t._v("rgba()")]),t._v("；颜色值不允许使用命名色值；")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0 0 2px "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("128"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(".3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 128"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" gray"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0 0 2px "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 128"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" .3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #008000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #999"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[t._v("【建议】")]),t._v(" 颜色值中的英文字符采用小写，至少要保证同一项目内一致；")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0073AA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0073aa"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_4-6-2d位置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4-6-2d位置"}},[t._v("#")]),t._v(" 4.6 2D位置")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 必须同时给出水平和垂直方向的位置；")]),t._v(" "),s("p",[t._v("2D 位置初始值为 0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为 center。为避免理解上的困扰，应同时给出两个方向的值。 "),s("a",{attrs:{href:"http://www.w3.org/TR/CSS21/colors.html#propdef-background-position",target:"_blank",rel:"noopener noreferrer"}},[t._v("background-position属性值的定义"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" top"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 50% 0% */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center top"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 50% 0% */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[s("a",{attrs:{href:"#"}},[t._v("[⬆]")])])]),t._v(" "),s("h2",{attrs:{id:"_5-文本排版"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_5-文本排版"}},[t._v("#")]),t._v(" 5. 文本排版")]),t._v(" "),s("h3",{attrs:{id:"_5-1-字体族"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_5-1-字体族"}},[t._v("#")]),t._v(" 5.1 字体族")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" "),s("code",[t._v("font-family")]),t._v(" 属性中的字体族名称应使用字体的"),s("strong",[t._v("英文")]),t._v(" Family Name，其中如有空格，须放置在引号中；")]),t._v(" "),s("p",[t._v("常见的字体族名称如下：")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",{staticStyle:{"text-align":"left"}},[t._v("字体")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("操作系统")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("Family Name")])])]),t._v(" "),s("tbody",[s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("宋体 (中易宋体)")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Windows")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("SimSun")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("黑体 (中易黑体)")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Windows")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("SimHei")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("微软雅黑")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Windows")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Microsoft YaHei")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("微软正黑")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Windows")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Microsoft JhengHei")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("华文黑体")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Mac/iOS")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("STHeiti")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("冬青黑体")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Mac/iOS")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Hiragino Sans GB")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("文泉驿正黑")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Linux")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("WenQuanYi Zen Hei")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("文泉驿微米黑")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Linux")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("WenQuanYi Micro Hei")])])])]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" "),s("code",[t._v("font-family")]),t._v(" 应当遵循以下顺序：")]),t._v(" "),s("ol",[s("li",[t._v("西文字体在前，中文字体在后；")]),t._v(" "),s("li",[t._v("效果佳 (质量高/更能满足需求) 的字体在前，效果一般的字体在后的顺序编写；")]),t._v(" "),s("li",[t._v("最后必须指定一个通用字体族( serif / sans-serif )；")])]),t._v(" "),s("p",[t._v("详细说明可参考 "),s("a",{attrs:{href:"http://www.zhihu.com/question/19911793/answer/13329819",target:"_blank",rel:"noopener noreferrer"}},[t._v("如何保证网页的字体在各平台都尽量显示为最高质量的黑体？"),s("OutboundLink")],1)]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" "),s("code",[t._v("font-family")]),t._v(" 不区分大小写，但在同一个项目中，同样的 Family Name 大小写必须统一；")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("body")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-family")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" arial"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sans-serif"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("h1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-family")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" Arial"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Microsoft YaHei"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sans-serif"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("body")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-family")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" Arial"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sans-serif"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("h1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-family")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" Arial"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Microsoft YaHei"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sans-serif"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_5-2-字重"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_5-2-字重"}},[t._v("#")]),t._v(" 5.2 字重")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" "),s("code",[t._v("font-weight")]),t._v(" 属性必须使用数值方式描述；")]),t._v(" "),s("p",[t._v("CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。")]),t._v(" "),s("p",[t._v("浏览器本身使用一系列"),s("a",{attrs:{href:"http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight",target:"_blank",rel:"noopener noreferrer"}},[t._v("启发式规则"),s("OutboundLink")],1),t._v("来进行匹配，在 >700 时一般匹配字体的 Regular 字重，>=700 时匹配 Bold 字重。")]),t._v(" "),s("p",[t._v("但已有浏览器开始支持 =600 时匹配 Semibold 字重 ("),s("a",{attrs:{href:"http://justineo.github.io/slideshows/font/#/3/15",target:"_blank",rel:"noopener noreferrer"}},[t._v("见此表"),s("OutboundLink")],1),t._v(")，故使用数值描述增加了灵活性，也更简短。")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" bold"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 700"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[s("a",{attrs:{href:"#"}},[t._v("[⬆]")])])]),t._v(" "),s("h2",{attrs:{id:"_6-变换与动画"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_6-变换与动画"}},[t._v("#")]),t._v(" 6 变换与动画")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 使用 "),s("code",[t._v("transition")]),t._v(" 定义属性时应遵循以下顺序：")]),t._v(" "),s("ol",[s("li",[s("code",[t._v("[ transition-property ]")]),t._v("：检索或设置对象中的参与过渡的属性；")]),t._v(" "),s("li",[s("code",[t._v("[ transition-duration ]")]),t._v("：检索或设置对象过渡的持续时间；")]),t._v(" "),s("li",[s("code",[t._v("[ transition-timing-function ]")]),t._v("：检索或设置对象中过渡的动画类型；")]),t._v(" "),s("li",[s("code",[t._v("[ transition-delay ]")]),t._v("：检索或设置对象延迟过渡的时间；")])]),t._v(" "),s("p",[s("code",[t._v("transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]")])]),t._v(" "),s("p",[t._v("如果顺序错乱，在某些安卓浏览器上会让动画失效。")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" color .2s 0 ease-in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" color .2s ease-in 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[t._v("【建议】")]),t._v(" 尽可能在浏览器能高效实现的属性上添加过渡和动画：")]),t._v(" "),s("p",[t._v("在可能的情况下应选择这样四种变换：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("transform: translate(npx, npx);")])]),t._v(" "),s("li",[s("code",[t._v("transform: scale(n);")])]),t._v(" "),s("li",[s("code",[t._v("transform: rotate(ndeg);")])]),t._v(" "),s("li",[s("code",[t._v("opacity: 0..1;")])])]),t._v(" "),s("p",[t._v("详见 "),s("a",{attrs:{href:"http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/",target:"_blank",rel:"noopener noreferrer"}},[t._v("High Performance Animations"),s("OutboundLink")],1)]),t._v(" "),s("p",[s("strong",[s("a",{attrs:{href:"#"}},[t._v("[⬆]")])])]),t._v(" "),s("h2",{attrs:{id:"_7-媒体查询"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_7-媒体查询"}},[t._v("#")]),t._v(" 7 媒体查询")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" "),s("code",[t._v("Media Query")]),t._v(" 不得单独编排，必须与相关的规则一起定义；")]),t._v(" "),s("p",[t._v("不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* header styles */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* main styles */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* footer styles */")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token atrule"}},[s("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@media")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("..."),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* header styles */")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* main styles */")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* footer styles */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* header styles */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token atrule"}},[s("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@media")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("..."),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* header styles */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* main styles */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token atrule"}},[s("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@media")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("..."),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* main styles */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* footer styles */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token atrule"}},[s("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@media")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("..."),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* footer styles */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"_8-兼容性"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_8-兼容性"}},[t._v("#")]),t._v(" 8 兼容性")]),t._v(" "),s("h3",{attrs:{id:"_8-1-属性前缀"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_8-1-属性前缀"}},[t._v("#")]),t._v(" 8.1 属性前缀")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 带私有前缀的属性由长到短排列，按冒号位置对齐；")]),t._v(" "),s("p",[t._v("标准属性放在最后，按冒号对齐方便阅读与编辑。")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" color .2s ease-in 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("-webkit-transition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" color .2s ease-in 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("-moz-transition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" color .2s ease-in 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("-webkit-transition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" color .2s ease-in 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n       "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("-moz-transition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" color .2s ease-in 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" color .2s ease-in 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_8-2-hack"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_8-2-hack"}},[t._v("#")]),t._v(" 8.2 hack")]),t._v(" "),s("p",[s("strong",[t._v("【建议】")]),t._v(" 如果有其他解决方案，请不要使用hack；")]),t._v(" "),s("p",[s("strong",[s("a",{attrs:{href:"#"}},[t._v("[⬆]")])])]),t._v(" "),s("h2",{attrs:{id:"_9-代码注释"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_9-代码注释"}},[t._v("#")]),t._v(" 9 代码注释")]),t._v(" "),s("p",[t._v("代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。")]),t._v(" "),s("h3",{attrs:{id:"_9-1-单行注释"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_9-1-单行注释"}},[t._v("#")]),t._v(" 9.1 单行注释")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 星号与内容之间必须保留一个空格；")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 新闻中心表格隔行变色 */")]),t._v("\n")])])]),s("h3",{attrs:{id:"_9-2-多行注释"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_9-2-多行注释"}},[t._v("#")]),t._v(" 9.2 多行注释")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 星号要一列对齐，星号与内容之间必须保留一个空格；")]),t._v(" "),s("p",[t._v("示例：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.\n */")]),t._v("\n")])])]),s("h3",{attrs:{id:"_9-3-文件注释"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_9-3-文件注释"}},[t._v("#")]),t._v(" 9.3 文件注释")]),t._v(" "),s("p",[s("strong",[t._v("【强制】")]),t._v(" 文件顶部必须包含文件注释，用 "),s("code",[t._v("@file")]),t._v(" 标识文件说明。星号要一列对齐，星号与内容之间必须保留一个空格，标识符冒号与内容之间必须保留一个空格；")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n * @file: 文件概要描述\n * @author: author-name(mail-name@domain.com)\n *          author-name2(mail-name2@domain.com)\n * @update: 2015-04-29 00:02:45\n */")]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("@update")]),t._v("为可选项，建议每次改动都更新一下；")]),t._v(" "),s("li",[t._v("当该业务项目主要由固定的一个或多个人负责时，需要添加"),s("code",[t._v("@author")]),t._v("标识，一方面是尊重劳动成果，另一方面方便在需要时快速定位责任人；")])]),t._v(" "),s("p",[s("strong",[s("a",{attrs:{href:"#"}},[t._v("[⬆]")])])]),t._v(" "),s("p",[t._v("参考资料：")]),t._v(" "),s("ol",[s("li",[s("a",{attrs:{href:"http://codeguide.bootcss.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("bootcss编码规范"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://github.com/kejun/CSS-Code-Guideline",target:"_blank",rel:"noopener noreferrer"}},[t._v("豆瓣CSS Code Guideline"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://github.com/ecomfe/spec/blob/master/css-style-guide.md",target:"_blank",rel:"noopener noreferrer"}},[t._v("spec css style guide"),s("OutboundLink")],1)])])])}),[],!1,null,null,null);s.default=e.exports}}]);