-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcss.html
More file actions
78 lines (76 loc) · 19.1 KB
/
css.html
File metadata and controls
78 lines (76 loc) · 19.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>CSS规范 | 待亲康前端开发规范</title>
<meta name="description" content="">
<meta name="generator" content="VuePress 1.5.2">
<meta name="description" content="前端开发指南">
<link rel="preload" href="/docs/assets/css/0.styles.a55d3f03.css" as="style"><link rel="preload" href="/docs/assets/js/app.a18d18f6.js" as="script"><link rel="preload" href="/docs/assets/js/2.1aac3b13.js" as="script"><link rel="preload" href="/docs/assets/js/13.42aeee93.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.669c8692.js"><link rel="prefetch" href="/docs/assets/js/11.1afe600c.js"><link rel="prefetch" href="/docs/assets/js/12.26b5d7fc.js"><link rel="prefetch" href="/docs/assets/js/14.0a22d62c.js"><link rel="prefetch" href="/docs/assets/js/15.7fb730d9.js"><link rel="prefetch" href="/docs/assets/js/16.981718eb.js"><link rel="prefetch" href="/docs/assets/js/3.2015c0d7.js"><link rel="prefetch" href="/docs/assets/js/4.eb112812.js"><link rel="prefetch" href="/docs/assets/js/5.1ddf0cac.js"><link rel="prefetch" href="/docs/assets/js/6.7667d3a7.js"><link rel="prefetch" href="/docs/assets/js/7.76f4b9bd.js"><link rel="prefetch" href="/docs/assets/js/8.b3732d04.js"><link rel="prefetch" href="/docs/assets/js/9.89dd4ac4.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.a55d3f03.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"><img src="/docs/assets/image/logo.png" alt="待亲康前端开发规范" class="logo"> <span class="site-name can-hide">待亲康前端开发规范</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/about/" class="nav-link">
前端体系
</a></div><div class="nav-item"><a href="/docs/code/" class="nav-link router-link-active">
代码规范
</a></div><div class="nav-item"><a href="/docs/course/markdown.html" class="nav-link">
常用教程
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/about/" class="nav-link">
前端体系
</a></div><div class="nav-item"><a href="/docs/code/" class="nav-link router-link-active">
代码规范
</a></div><div class="nav-item"><a href="/docs/course/markdown.html" class="nav-link">
常用教程
</a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>前端体系</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>代码规范</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/code/" aria-current="page" class="sidebar-link">目录规范</a></li><li><a href="/docs/code/html.html" class="sidebar-link">html编码规范</a></li><li><a href="/docs/code/css.html" aria-current="page" class="active sidebar-link">css规范</a></li><li><a href="/docs/code/js.html" class="sidebar-link">js规范</a></li><li><a href="/docs/code/vue.html" class="sidebar-link">vue项目创建规范</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>常用教程</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css规范"><a href="#css规范" class="header-anchor">#</a> CSS规范</h1> <h2 id="命名规范：采用bem的一种变体规范-re3规范"><a href="#命名规范：采用bem的一种变体规范-re3规范" class="header-anchor">#</a> 命名规范：采用<a href="http://www.getbem.com/" target="_blank">BEM</a>的一种变体规范(re3规范)</h2> <p>.namespace-unit.xmodifier</p> <h3 id="名词解释"><a href="#名词解释" class="header-anchor">#</a> 名词解释</h3> <ul><li>样式模块：指页面中有明显视觉边界的视觉单元或完整的功能模块(如:导航，布局结构等);</li> <li>功能单元：指整站通用的单一功能性样式;</li> <li>命名空间：指项目采用的统一css前缀,分为两种：
<ul><li><code>.sqk-</code>：表示一个样式模块前缀;</li> <li><code>.name-function</code>：表示一个功能单元。</li></ul></li></ul> <h3 id="命名方式"><a href="#命名方式" class="header-anchor">#</a> 命名方式</h3> <ol><li>样式单元：命名空间-单元名称(如: <code>.sqk-nav</code> )；</li> <li>后代元素：样式单元-后代元素类名(如: <code>.sqk-nav-link</code> 或 <code>.sqk-nav-linkico</code> )。</li> <li>功能单元：命名空间-x功能名称(如: <code>.sqk-xhide</code> )</li></ol> <h3 id="修饰符"><a href="#修饰符" class="header-anchor">#</a> 修饰符</h3> <ol><li>使用场景：当一个样式单元类某些小细节需要修改时，加修饰符来控制需要修改部份的样式；</li> <li>用法限制：修饰符不能单独使用，必须配合组件或组件后代元素一起使用；</li> <li>命名原则：修饰符统一以x字母开头，后面跟修饰符名；</li> <li>"x"解析：避免与引入的其它样式库的类名冲突，英文中以x开头的字母最少，为中文修饰符【修】字的拼音首字母。</li></ol> <h3 id="选择器"><a href="#选择器" class="header-anchor">#</a> 选择器</h3> <ul><li>禁止使用ID选择器；</li> <li>慎用标签选择器,除非能够保证其唯一性；</li> <li>慎用后代选择器，只有当存在修饰符时，或后代为唯一的标签选择器时，才允许使用后代选择器。</li></ul> <h3 id="代码示例"><a href="#代码示例" class="header-anchor">#</a> 代码示例</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 头部:通用 */</span>
<span class="token selector">.sqk-header</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span>60px<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">.sqk-header-logo</span> <span class="token punctuation">{</span> <span class="token property">padding-top</span><span class="token punctuation">:</span>12px<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">.sqk-header-logotext</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span>16px<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token comment">/* 头部:小尺寸(用修饰符更改细节) */</span>
<span class="token selector">.sqk-header.xsmall</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span>45px<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">.sqk-header-logo.xsmall</span> <span class="token punctuation">{</span> <span class="token property">padding-top</span><span class="token punctuation">:</span>8px<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">.sqk-header-logotext.xsmall</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span>14px<span class="token punctuation">;</span> <span class="token punctuation">}</span>
</code></pre></div><h3 id="错误示例"><a href="#错误示例" class="header-anchor">#</a> 错误示例</h3> <table><thead><tr><th>错误写法</th> <th>正确写法</th> <th>错误说明</th></tr></thead> <tbody><tr><td><code>.card</code></td> <td><code>.sqk-card</code></td> <td>必须有命名空间前缀</td></tr> <tr><td><code>.sqk-card li</code></td> <td><code>.sqk-list > li</code></td> <td>污染性大，不能确定后代li选择器的唯一性</td></tr> <tr><td><code>.sqk-card > .sqk-card-header</code></td> <td><code>.sqk-card-header</code></td> <td>无意义的父类限定</td></tr> <tr><td><code>.sqk-card-header-text</code></td> <td><code>.sqk-card-headertext</code></td> <td>样式单元所有后代元素的类名:样式单元-后代类名</td></tr> <tr><td><code>.xblue</code></td> <td><code>.sqk-card.xblue</code></td> <td>修饰符不能单独使用</td></tr> <tr><td><code>.sqk-card.blue</code></td> <td><code>.sqk-card.xblue</code></td> <td>修饰符必须以字母x开头</td></tr> <tr><td><code>.sqk-textmain {color: $color-text-main;}</code></td> <td><code>.text-main {color: $color-text-main;}</code></td> <td>功能单元命名格式为 <code>.name-function</code></td></tr></tbody></table> <h2 id="css-reset示例"><a href="#css-reset示例" class="header-anchor">#</a> css reset示例</h2> <h2 id="pc端"><a href="#pc端" class="header-anchor">#</a> PC端</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form,header,section,article,footer</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">body,button,input,select,textarea</span><span class="token punctuation">{</span><span class="token property">font</span><span class="token punctuation">:</span>12px/1.5 tahoma<span class="token punctuation">,</span><span class="token string">'\5FAE\8F6F\96C5\9ED1'</span><span class="token punctuation">,</span>sans-serif<span class="token punctuation">}</span>
<span class="token selector">h1,h2,h3,h4,h5,h6</span><span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span>100%<span class="token punctuation">}</span>
<span class="token selector">em,b</span><span class="token punctuation">{</span><span class="token property">font-style</span><span class="token punctuation">:</span>normal<span class="token punctuation">}</span>
<span class="token selector">a</span><span class="token punctuation">{</span><span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">}</span>
<span class="token selector">a:hover</span><span class="token punctuation">{</span><span class="token property">text-decoration</span><span class="token punctuation">:</span>underline<span class="token punctuation">}</span>
<span class="token selector">img</span><span class="token punctuation">{</span><span class="token property">border</span><span class="token punctuation">:</span>0<span class="token punctuation">}</span>
<span class="token selector">body</span><span class="token punctuation">{</span><span class="token property">padding-top</span><span class="token punctuation">:</span>42px<span class="token punctuation">}</span>
<span class="token selector">button,input,select,textarea</span><span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span><span class="token property">outline</span><span class="token punctuation">:</span>none<span class="token punctuation">}</span>
<span class="token selector">table</span><span class="token punctuation">{</span><span class="token property">border-collapse</span><span class="token punctuation">:</span>collapse<span class="token punctuation">;</span><span class="token property">border-spacing</span><span class="token punctuation">:</span>0<span class="token punctuation">}</span>
<span class="token selector">td,th,ul,ol</span><span class="token punctuation">{</span><span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">}</span>
</code></pre></div><h2 id="移动端"><a href="#移动端" class="header-anchor">#</a> 移动端</h2> <p>有较多文字的文章类页面：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 移动端常用reset.css (文字版本) */</span>
<span class="token comment">/* reset */</span>
<span class="token selector">html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5</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 selector">a,img,input</span> <span class="token punctuation">{</span><span class="token property">border</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">body</span><span class="token punctuation">{</span><span class="token property">font</span><span class="token punctuation">:</span> 14px/1.75 -apple-system<span class="token punctuation">,</span> <span class="token string">"Helvetica Neue"</span><span class="token punctuation">,</span> Helvetica<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">a</span> <span class="token punctuation">{</span><span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">ul,li</span><span class="token punctuation">{</span><span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">}</span>
</code></pre></div><p>如果页面无文字，或者不希望文字被长按选中，可使用下面的reset；适合于大多数专题页面:</p> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">/* 移动端常用reset.css (无文字版本) */</span>
<span class="token comment">/* reset */</span>
<span class="token selector">html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 </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 selector">a,img,input </span><span class="token punctuation">{</span><span class="token property">border</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">body</span><span class="token punctuation">{</span><span class="token property">font</span><span class="token punctuation">:</span> 14px/1.75 -apple-system<span class="token punctuation">,</span> <span class="token string">"Helvetica Neue"</span><span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span><span class="token property">-webkit-tap-highlight-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">a </span><span class="token punctuation">{</span><span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">ul,li</span><span class="token punctuation">{</span><span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">}</span>
<span class="token selector">a, img </span><span class="token punctuation">{</span><span class="token property">-webkit-touch-callout</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token comment">/* 禁止长按链接与图片弹出菜单 */</span><span class="token punctuation">}</span>
<span class="token selector">html, body </span><span class="token punctuation">{</span>
<span class="token property">-webkit-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token comment">/* 禁止选中文本（如无文本选中需求，此为必选项） */</span>
<span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">提示</p> <p>移动端页面不需要设置微软雅黑、宋体等字体，终端浏览器字体取决于设备上的系统字体。</p></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/allce231/web-standard/edit/master/docs/code/css.md" target="_blank" rel="noopener noreferrer">帮助我们改善此页面！</a> <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></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">7/8/2020, 5:55:45 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/docs/code/html.html" class="prev">
html编码规范
</a></span> <span class="next"><a href="/docs/code/js.html">
js规范
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/docs/assets/js/app.a18d18f6.js" defer></script><script src="/docs/assets/js/2.1aac3b13.js" defer></script><script src="/docs/assets/js/13.42aeee93.js" defer></script>
</body>
</html>