CSS命名规范

每个 Vue 组件的最外层容器采用 组件名+root 的方式命名，如:

<template>
    <div class="paging-table-root">
        ...
    </div>
</template>

这样做是为了更快速定位一个组件，而不用先通过 vue-devtool 找到组件名，然后再去项目里找。

其余元素的命名按照下面的规则:

1、命名规则

按照 B--E-M 的书写格式，详情可见BEM介绍。

B: 代表 Block

每个 Block 都由多个 Element 组成，应尽量保证每个组件只有一个 Block：

<template>
    <div class="paging-root">
        <ul class="paging-list">
            <li class="paging-item">
                <a class="paging-btn">上一页</a>
            </li>
            ...
            <li class="paging-item">
                <a class="paging-link">5</a>
            </li>
            ...
            <li class="paging-item">
                <a class="paging-btn">下一页</a>
            </li>
        </ul>
    </div>
</template>

当一个 Block 实在无法满足使用的时候，再将该 Block 按结构划分为多个部分，这几个部分作为其它具体元素的 Block。

<template>
    <div class="article-root">
        <div class="article-header">
            <ul class="header-list">
                <li class="header-item"></li>
            </ul>
        </div>
        ...
        <div class="article-main">
            <ul class="main-list">
                <li class="main-item"></li>
            </ul>
        </div>
    </div>
</template>

E: 代表 Element

每一个 Element 都应该具有独立性，可以用在 Block 的任何地方，而不需要做额外处理。

<template>
    <div class="comment-root">
        ...
        <div class="comment-header">
            <p class="comment-txt">重要的是命名的思想，而不是完全照搬。</p>
        </div>
        ...
        <div class="comment-main">
            <p class="comment-txt">赞同！</p>
        </div>
    </div>
</template>

另外每一个 Element 都可能存在不同的状态，比如选中状态，激活状态，以及大小颜色等。

<template>
    <div class="login-root">
        ...
        <input class="login-input" type="text">
        <input class="login-input login-input-error" type="text">
        ...
    </div>
</template>

M: 代表 Modifier

Modifier 是 Element 的修饰符，用来区分 Element 可能存在不同的状态。

在一些特殊情况下，通常是 UI 做的不够标准统一时候，单一的 Element 内外边距不能即满足独立可复用性，又满足 UI 样式。这时 Modifier 也可以用来表示元素的容器，比如：

<template>
    <div class="login-root">
        ...
        <div class="login-form-wrap">
            <form class="login-form">
                ...
            </form>
        </div>
    </div>
</template>

2、书写规则

每个组件的 <style> 标签都需要添加 scoped 属性：

<style scoped>
    ...
</style>

选择器之间禁止嵌套，便于代码阅读和后期维护，以及避免权重所带来的影响：

<!-- 好的写法 -->
<style scoped>
    .news-list {}
    .news-item {}
    .news-txt {}
</style>

<!-- 不允许的写法 -->
<style scoped>
    .news-list {}
    .news-list .news-item {}
    .news-item .news-txt {}
</style>

css样式书写时按照定位、盒模型、样式、功能的顺序，比如：

<style scoped>
    .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;
    }
</style>

3、命名常用词汇

Block 与 Element 之间不需要进行层层嵌套，父级的 Element 也可以作为子级的 Block，这样能避免当元素嵌套较深时，class 需要写很长一串的问题。

常用块（Block）

结构类：header, nav, subnav, menu, submenu, main, aside, footer

内容类：summary, banner, article, login, register, form, news

对于一个简单的组件，优先使用组件名作为 Block，不用把组件名全写出来，选其中一个典型单词就可以，比如：

<div class="morning-news-root">
    <div class=news-header>
        <p class="news-title">早间新闻</p>
        <a class="news-btn" href="#">更多</a>
    </div>
    <ul class="news-list">
        <li class="news-item">特普朗退出TTP</li>
    </ul>
</div>

常用元素（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

基于Vue组件的CSS命名规范