前言

在HTML的样式组件开发的过程中，比较混乱以及头痛的一件事情便是css选择器的命名。所以在这里以sidebar（侧边栏）组件的书写为例，约定一个css选择器的命名规则，以规范自己的开发。

约定规则

1.首先确定组件布局，设计html框架
2.选定根元素的id或class
3.尽量减少选择器的命名而使用 '>' 来控制子级的样式
4.当标签使>语法超过4级，或需要JavaScript来操作时，则根据根元素类名或ID，使用 '-' 来构建新的名字。

例子

开发工具

sublime + emmet

css样式

<style type="text/css">
    .sidebar{}
    .sidebar>div{}
    .sidebar>div>h3 {}
    .sidebar>div>div>{}
    .sidebar>div>div>a{}
    .sidebar_sub>a{}
    .sidebar_sub>div{}
    .sidebar_sub>div>a{}
</style>

HTML代码

<div class="col-md-3 sidebar">
    <div>
        <h3>abc1</h3>
        <div>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <div class="sidebar_sub">
                <a href="#">1</a>
                <div>
                    <a href="#">标签1</a>
                    <a href="#">标签2</a>
                    <a href="#">标签3</a>
                    <a href="#">标签4</a>
                    <a href="#">标签5</a>
                    <a href="#">标签6</a>
                    <a href="#">标签7</a>
                    <a href="#">标签8</a>
                    <a href="#">标签9</a>
                    <a href="#">标签10</a>
                </div>
            </div>
        </div>
    </div>
    <div>
        <h3>abc2</h3>
        <div>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <div class="sidebar_sub">
                <a href="#">2</a>
                <div>
                    <a href="#">标签1</a>
                    <a href="#">标签2</a>
                    <a href="#">标签3</a>
                    <a href="#">标签4</a>
                    <a href="#">标签5</a>
                    <a href="#">标签6</a>
                    <a href="#">标签7</a>
                    <a href="#">标签8</a>
                    <a href="#">标签9</a>
                    <a href="#">标签10</a>
                </div>
            </div>
        </div>
    </div>
</div>