前言

在HTML的樣式組件開發(fā)的過程中，比較混亂以及頭痛的一件事情便是css選擇器的命名。所以在這里以sidebar（側(cè)邊欄）組件的書寫為例，約定一個css選擇器的命名規(guī)則，以規(guī)范自己的開發(fā)。

約定規(guī)則

1.首先確定組件布局，設(shè)計(jì)html框架
2.選定根元素的id或class
3.盡量減少選擇器的命名而使用 '>' 來控制子級的樣式
4.當(dāng)標(biāo)簽使>語法超過4級，或需要JavaScript來操作時(shí)，則根據(jù)根元素類名或ID，使用 '-' 來構(gòu)建新的名字。

例子

開發(fā)工具

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="#">標(biāo)簽1</a>
                    <a href="#">標(biāo)簽2</a>
                    <a href="#">標(biāo)簽3</a>
                    <a href="#">標(biāo)簽4</a>
                    <a href="#">標(biāo)簽5</a>
                    <a href="#">標(biāo)簽6</a>
                    <a href="#">標(biāo)簽7</a>
                    <a href="#">標(biāo)簽8</a>
                    <a href="#">標(biāo)簽9</a>
                    <a href="#">標(biāo)簽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="#">標(biāo)簽1</a>
                    <a href="#">標(biāo)簽2</a>
                    <a href="#">標(biāo)簽3</a>
                    <a href="#">標(biāo)簽4</a>
                    <a href="#">標(biāo)簽5</a>
                    <a href="#">標(biāo)簽6</a>
                    <a href="#">標(biāo)簽7</a>
                    <a href="#">標(biāo)簽8</a>
                    <a href="#">標(biāo)簽9</a>
                    <a href="#">標(biāo)簽10</a>
                </div>
            </div>
        </div>
    </div>
</div>