CSS规范
<p><strong>每个 Vue 组件的最外层容器采用 组件名+com 的方式命名，如:</strong></p>
<pre><code class="language-html">&lt;template&gt;
&lt;div class=&quot;paging-table-com&quot;&gt;
...
&lt;/div&gt;
&lt;/template&gt;</code></pre>
<p>这样做是为了更快速定位一个组件，而不用先通过 vue-devtool 找到组件名，然后再去项目里找。
<strong>其余元素的命名按照下面的规则:</strong>
1、命名规则
按照 B--E-M 的书写格式，详情可见BEM介绍。
B: 代表 Block
每个 Block 都由多个 Element 组成，应尽量保证每个组件只有一个 Block：</p>
<pre><code class="language-html">&lt;template&gt;
&lt;div class=&quot;paging-root&quot;&gt;
&lt;ul class=&quot;paging-list&quot;&gt;
&lt;li class=&quot;paging-item&quot;&gt;
&lt;a class=&quot;paging-btn&quot;&gt;上一页&lt;/a&gt;
&lt;/li&gt;
...
&lt;li class=&quot;paging-item&quot;&gt;
&lt;a class=&quot;paging-link&quot;&gt;5&lt;/a&gt;
&lt;/li&gt;
...
&lt;li class=&quot;paging-item&quot;&gt;
&lt;a class=&quot;paging-btn&quot;&gt;下一页&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/template&gt;</code></pre>
<p>当一个 Block 实在无法满足使用的时候，再将该 Block 按结构划分为多个部分，这几个部分作为其它具体元素的 Block。</p>
<pre><code class="language-html">&lt;template&gt;
&lt;div class=&quot;article-root&quot;&gt;
&lt;div class=&quot;article-header&quot;&gt;
&lt;ul class=&quot;header-list&quot;&gt;
&lt;li class=&quot;header-item&quot;&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
...
&lt;div class=&quot;article-main&quot;&gt;
&lt;ul class=&quot;main-list&quot;&gt;
&lt;li class=&quot;main-item&quot;&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;</code></pre>
<p>E: 代表 Element
每一个 Element 都应该具有独立性，可以用在 Block 的任何地方，而不需要做额外处理。</p>
<pre><code class="language-html">&lt;template&gt;
&lt;div class=&quot;comment-root&quot;&gt;
...
&lt;div class=&quot;comment-header&quot;&gt;
&lt;p class=&quot;comment-txt&quot;&gt;重要的是命名的思想，而不是完全照搬。&lt;/p&gt;
&lt;/div&gt;
...
&lt;div class=&quot;comment-main&quot;&gt;
&lt;p class=&quot;comment-txt&quot;&gt;赞同！&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;</code></pre>
<p>另外每一个 Element 都可能存在不同的状态，比如选中状态，激活状态，以及大小颜色等。</p>
<pre><code class="language-html">&lt;template&gt;
&lt;div class=&quot;login-root&quot;&gt;
...
&lt;input class=&quot;login-input&quot; type=&quot;text&quot;&gt;
&lt;input class=&quot;login-input login-input-error&quot; type=&quot;text&quot;&gt;
...
&lt;/div&gt;
&lt;/template&gt;</code></pre>
<p>M: 代表 Modifier
Modifier 是 Element 的修饰符，用来区分 Element 可能存在不同的状态。
在一些特殊情况下，通常是 UI 做的不够标准统一时候，单一的 Element 内外边距不能即满足独立可复用性，又满足 UI 样式。这时 Modifier 也可以用来表示元素的容器，比如：</p>
<pre><code class="language-html">&lt;template&gt;
&lt;div class=&quot;login-root&quot;&gt;
...
&lt;div class=&quot;login-form-wrap&quot;&gt;
&lt;form class=&quot;login-form&quot;&gt;
...
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;</code></pre>
<p>2、书写规则
每个组件的 <style> 标签<strong><em>禁止</em></strong>添加 scoped 属性，但是主要最外层需要包含根节点标签类名class：</p>
<h6>错误示范</h6>
<pre><code class="language-html">&lt;style scoped&gt;
...
&lt;/style&gt;</code></pre>
<h6>正确示范</h6>
<pre><code class="language-html">&lt;style &gt;
.demo-com{
.a{
}
}
&lt;/style&gt;</code></pre>
<p>选择器之间禁止嵌套，便于代码阅读和后期维护，以及避免权重所带来的影响：</p>
<pre><code class="language-html">&lt;!-- 好的写法 --&gt;
&lt;style scoped&gt;
.news-list {}
.news-item {}
.news-txt {}
&lt;/style&gt;
&lt;!-- 不允许的写法 --&gt;
&lt;style scoped&gt;
.news-list {}
.news-list .news-item {}
.news-item .news-txt {}
&lt;/style&gt;</code></pre>
<p>css样式书写时按照定位、盒模型、样式、功能的顺序，比如：</p>
<pre><code class="language-html">&lt;style scoped&gt;
.news-list {
/* 定位 */
position: absolute;
left: 0;
z-index: 10;
/* 盒模型 */
float: left;
display: block;
flex: 1;
align-items: center;
width: 0;
height: 0;
padding: 0;
margin: 0;
border: 0;
outline: 0;
/* 样式 */
background: #fff;
color: #fff;
font: italic bold 12px/20px arial,sans-serif;
/* 功能 */
transition: all 1s;
transform: translate(10px, 10px);
cursor: pointer;
}
&lt;/style&gt;</code></pre>
<p>3、命名常用词汇
Block 与 Element 之间不需要进行层层嵌套，父级的 Element 也可以作为子级的 Block，这样能避免当元素嵌套较深时，class 需要写很长一串的问题。
常用块（Block）
结构类：header, nav, subnav, menu, submenu, main, aside, footer
内容类：summary, banner, article, login, register, form, news
对于一个简单的组件，优先使用组件名作为 Block，不用把组件名全写出来，选其中一个典型单词就可以，比如：</p>
<pre><code class="language-html">&lt;div class=&quot;morning-news-root&quot;&gt;
&lt;div class=news-header&gt;
&lt;p class=&quot;news-title&quot;&gt;早间新闻&lt;/p&gt;
&lt;a class=&quot;news-btn&quot; href=&quot;#&quot;&gt;更多&lt;/a&gt;
&lt;/div&gt;
&lt;ul class=&quot;news-list&quot;&gt;
&lt;li class=&quot;news-item&quot;&gt;特普朗退出TTP&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</code></pre>
<p>常用元素（Element）
结构类：header, main, content, footer
文本类：txt, link,
表单类：form, input, label
表格类：table, cloumn, row, cell
列表类：list, item, filed
按钮：button
常用修饰符（Modifier）
状态类：primary, success, warning, error, active
形状类：large, big, small
样式类：fl, center, middle, fr
容器类：box, wrap</p>