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