一待锈、組件最高類名

1個單詞的類名

BS4的組件漠其，以組件名單詞作為最高的類名，比如警告條竿音，最高的類名是alert和屎，又比如徽章，最高類名就是badge春瞬。

也就是說柴信，組件與布局是解耦的，不管你把這個組件用在什么地方宽气，這個組件的基本形態(tài)首先就是這個樣子随常，之后你想為項目進行個性化定制潜沦，那么你可以給最高層追加定制類。

2個單詞的類名

下面的btn-toolbar就是兩個單詞組成最高組件類名绪氛，反而子元素的類名有1個單詞的btn唆鸡，這其中的奧妙，就看你怎么看待你的組件了枣察。如果你的組件里面的主要元素是子元素争占，整個組件就是這些子元素的集合，那么就像btn-toolbar一樣就好了序目，如果是警告條這種肯定是單個使用的組件臂痕，那么最高類名就用一個單詞就OK。

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <span class="input-group-addon" id="btnGroupAddon">@</span>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

二猿涨、對最高層的外觀附加類握童、功能附加類、工具類

外觀附加類

比如警告條叛赚，BS4的做法是澡绩，最高層除了alert，還會緊跟著一個alert-primary或者其他類红伦，也就是對alert進行外觀定制化英古，一個基本的alert可以拓展出無數(shù)的附加類。這種類的寫法是昙读，把主類放前面召调，附加詞放后面，用短橫線鏈接蛮浑。

alert-primary強調(diào)的是語境唠叛，分為了主要的、次要的沮稚、危險的艺沼、成功的等等這些詞，如果還要給一個“可收起的”屬性蕴掏，怎么辦障般？BS4給出的方案是再加一個alert-dismissible，這就是功能附加類盛杰。

再比如挽荡，徽章可以這么寫<span class="badge badge-pill badge-primary">Primary</span>，有2個附加類即供，badge-pill表示像膠囊一樣的形狀定拟，跟后面的語境外觀不是一回事，所以要另外摘出來定義逗嫡。

再說一個特殊的栗子<button type="button" class="btn btn-outline-primary">Primary</button>青自，這是包邊的按鈕株依，有帶色邊線，里面是白色背景填充延窜。為什么不寫成<button type="button" class="btn btn-outline btn-primary">Primary</button>呢恋腕？因為btn-primary主要特征是填充帶色的背景，跟包邊是沖突的兩套東西逆瑞，所以沒辦法配合吗坚，只能是另外單獨定義一套btn-outline-xxx系列。

還有一個特殊的栗子是active類呆万，它并不是獨立的工具類，而是外觀附加類车份，因為它都是用于.btn.active {...}這樣的形式谋减，所以沒必要寫成btn-active了。同理的還有disabled等扫沼。

功能附加類

在最高層div身上出爹，為了實現(xiàn)不同的目的，可以施加多個類缎除，比如alert-warning負責外觀表現(xiàn)严就，alert-dismissible負責功能（可收起的），還有其他功能的話器罐，可以繼續(xù)加梢为。

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

工具類

最后我們還可以看到fade show，這是2個工具類，可以對任何元素起作用，效果一致惩猫，fade是漸變動效果泌绣，show表示當前是顯示的狀態(tài)。如果你能做出跟具體組件無關的通用的工具類柿祈，也可以繼續(xù)追加到后面。

又如mb-0類，它表示margin-bottom:0;悲幅，這個類的意義是什么呢？因為BS的原則是站蝠，上下兩個模塊拉開間距汰具，一律采用margin-bottom，不要寫任何的margin-top沉衣，原因是間距折疊效應郁副，所以比如一系列<p>，都統(tǒng)一只設置margin-bottom的值就可以了豌习。于是有一個問題就是存谎，最后一個<p>可能不需要margin-bottom拔疚，怎么辦？給最后的<p>加個mb-0類就好了既荚。

三稚失、使用者自己對最高層的外觀附加類、功能附加類恰聘、工具類

自定義外觀附加類

使用者使用BS4的時候句各，可以給最高層再加一個外觀附加類，比如alert-xxx晴叨，這個類的作用應該是凿宾，在alert和alert-primary基礎上，再做外觀修改兼蕊，比如改一改字體大小初厚，改一改行高，等等孙技。這個xxx可以是更高級的概念产禾，比如模塊名、頁面名牵啦，甚至網(wǎng)站名：

• 如果利用模塊名亚情，比如新聞列表，那可以叫alert-newslist哈雏，意思是新聞列表里的警告條楞件，就應該是這樣子的。
• 如果利用頁面名僧著，比如頁面是投票頁履因，那就可以是alert-poll，意思是盹愚，用在投票頁的警告條就得是我寫的這樣的長相栅迄。
• 如果利用網(wǎng)站名，比如你這是新浪的頁面皆怕，可以干脆叫做alert-sina毅舆，也就是說，我們新浪的警告條愈腾，就應該是這個標準憋活。

自定義功能附加類

寫到這里的時候還沒想出好的例子，先不寫了虱黄。

自定義工具類

也沒想出好的栗子悦即，先不寫了。

最終，最高層的類的樣子應當是：“主類 外觀類 自定義外觀類 功能類 自定義功能類 工具類 自定義工具類”這樣的順序辜梳，就對了粱甫。

四、上下級類怎么寫

下級專門定義一個類的情況

從BS4來看作瞄，比如警告條茶宵，警告條里面有能點擊的鏈接，這樣形成了上下級類宗挥，BS4的方案是：

<div class="alert alert-primary" role="alert">
  This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

就是說警告條里的鏈接乌庶，它的類的寫法就應該是alert-link。前面還是主類契耿，后面加功能名稱瞒大。

BS的原則是：能不級聯(lián)就不級聯(lián)，盡量只給最頂級標簽加各種類搪桂，這樣方便管理糠赦，而且，這些類定義的樣式盡量是能繼承的樣式锅棕。所以，BS直接給alert-link設樣式淌山，不寫成級聯(lián)形式裸燎。這樣，alert-link繼承了祖先元素的一部分樣式泼疑，自己又定義了一部分樣式德绿，這差不多就夠用了，沒必要寫成.alert .alert-link這樣的聲明退渗。

下級不專門定義類的情況

看一個栗子：

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

<p>標簽沒有加任何樣式移稳，原因是BS4給全局<p>設置了統(tǒng)一的樣式，從實踐中会油，很可能你的組件需要跟全局不一樣的行高个粱，怎么辦呢？應當定義一個類似于這樣一個樣式：

.alert-sina p {
    line-height: 1.8;
}

這時候問題來了翻翩，為什么不給<p>加上alert-p類都许？因為首先這個類好像BS官方類一樣，容易混淆視聽嫂冻，其次胶征，你這個組件的<p>的樣式，雖然可能跟全局<p>的樣式不一致桨仿，但總不至于同一個組件內(nèi)的<p>與<p>互相樣式都不一致吧睛低？所以只要統(tǒng)一給組件內(nèi)設置一個樣式就夠了。設置類的原則就是一定要盡量精簡，也要盡量降低耦合钱雷。

接上面問題骂铁，為什么組件里面的<a>就得加上alert-link呢？因為<p>的用途比<a>窄急波，<p>除了表示一段話从铲，通常沒別的作用，<a>就難講了澄暮，有各種用途名段，所以<a>不可能統(tǒng)一樣式，不可以寫成.alert a的樣子泣懊。

三層及以上結構

Card確實是BS4里面比較復雜的一個組件了伸辟，我們看一下：

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

主類是card沒懸念。

頂部的圖片是card-img-top馍刮，為啥有個top呢信夫？因為還有一個類是card-img。

card-body可以看出卡啰，如果你的一個組件有上中下三部分静稻，你就可以用-top、-body匈辱、-bottom振湾，也可以用-header、-body亡脸、-footer押搪。這個元素一般是做容器用，設置簡單的樣式即可浅碾，一般不作為級聯(lián)樣式表的父元素大州。

card-title、card-text單詞都是表意的垂谢，很好理解不解釋厦画。除非為了避免歧義，否則card-title不要寫成card-body-title滥朱，一共就2個單詞連起來就完事苛白。這就好比，你說“她的眼睛是藍色的”焚虱，沒有哪個神經(jīng)病會說“她的腦袋上的眼睛是藍色的”购裙，因為眼睛只有一對，一定在她的腦袋上鹃栽，所以不需要特意寫出來躏率。

類名用詞的慣例：

• 一條一條的項目躯畴，通常就是-item了；

• 上中下結構薇芝，上面提過蓬抄，就是用-top、-body夯到、-bottom嚷缭，也可以用-header、-body耍贾、-footer阅爽；

• 若沒有上中下結構，而是分為主體和主體旁邊的一些零碎荐开，那么主體可以用-inner付翁，旁邊的零碎可以另外設定具體名字。

• 如果語義是菜單晃听，通常用-menu包裹一系列的-item百侧。

五、3個單詞組成的類名

第3個單詞作為修飾詞的情況

看個栗子：

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    This dropdown's menu is right-aligned
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

dropdown-menu-right是3個單詞的類名能扒，第三個單詞right是修飾詞佣渴。這跟BEM命名法是一致的。

3個單詞連起來才描述清楚一個類的情況

看個栗子：

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

form-check-label是3個單詞組成的類初斑，它的意思是form中的check容器中的label標簽观话。通常有一個父元素叫form-check。

form-check-input也是3個單詞組成的類越平，它的意思是form中的check容器中的input標簽。通常有一個父元素叫form-check灵迫。

總結

• 可以把組件當做一個人體來看秦叛。比如眼睛，它雖然屬于頭部瀑粥，但你并不用強調(diào)眼睛是“頭部的眼睛”挣跋。雖然不用強調(diào)，但是眼睛還是會繼承頭部的特性狞换，比如頭部的海拔高避咆，所以你眼睛的海拔也高。這就算是繼承修噪。栗子可能不太恰當查库，理解意思即可。

• 如果用sass來寫css黄琼，不要沉迷于sass的級聯(lián)寫法樊销，因為組件化的特征就是盡量不級聯(lián)。sass里的級聯(lián)，最多是2級連一起就夠了围苫。所以裤园，請努力讓級聯(lián)扁平起來。

• 想給一個組件加樣式剂府，應當盡量放在最頂級類里拧揽，然后多利用CSS的繼承，能在最高級類里面定義的腺占，一定要在最高級類里定義淤袜，遇到不能繼承的，再在下級類里另寫樣式湾笛。

• <p>這種標簽饮怯，屬于用的場合多，但意義簡單嚎研，所以蓖墅，要修改<p>的樣式，不要給<p>身上放類临扮，應該用.xxx p {}這種級聯(lián)形式论矾。反之，<a>就最好在它身上放類杆勇。

• 從dropdown的栗子可以看出贪壳，一個組件可以包含其他組件，這是允許的蚜退，其他組件的類名不要寫成dropdown-xxx-xxx闰靴，這樣等于你把好容易解耦的樣式又耦合起來了，應當直接定義一個xxx-xxx類钻注，然后用.dropdown .xxx-xxx {}來定義樣式蚂且。

• 容器名字一般就是header/body/footer這種。

• 即使是很底層的標簽幅恋，類名也不要繁復杏死，除非有必要，否則應當盡量短捆交。form-check-input之所以長淑翼，是因為它專門用于<input type="checkbox">，實在沒辦法簡寫成form-input品追。

• 注意區(qū)分兩個概念“模塊”和“組件”玄括。模塊是什么？比如頁面左側導航肉瓦，比如新聞列表惠豺，比如天氣預報模塊银还，等等。組件就好比螺絲洁墙，模塊就好比各種型號的自行車蛹疯，螺絲生產(chǎn)的時候有自己的工業(yè)標準，并不關心螺絲將來是用在哪個廠家的哪輛自行車上热监。所以捺弦，組件的標簽上不要帶模塊名字，而是應該用級聯(lián)寫法孝扛，比如模塊是評論框列吼，那么模塊最外層的類可以叫comments，它里面有幾個組件苦始，任何組件的類名都不要帶comments字樣寞钥。最后，用.comments .xxx {}就搞定了樣式陌选。

• 有時候你會糾結模塊的類名理郑，比如評論區(qū)，到底類名應該是comment-section還是comment咨油。說白了您炉，如果下級有類名叫comment，那么頂級類名叫comment-section是可以的役电，如果一個個的comment形成了list的感覺赚爵，頂級類也可以叫comment-list，如果下級并沒有一個類名叫comment法瑟，那么頂級類名就可以直接叫comment冀膝，應該是沒問題的。所以霎挟，一切看情況而定窝剖，類名盡量簡單。

附錄一：id什么時候用氓扛？怎么寫？

錨鏈接定位

<a href="#header">跳轉到header</a>配合上<a id="header"></a>實現(xiàn)錨鏈接论笔。

<label for="...">

<label for="a"><input id="a" type="checkbox"></label>用于讓label操作控件采郎。

當做JS的操作綁定元素

比如BS里面有id="btnGroupDrop1"和aria-labelledby="btnGroupDrop1"：

    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>

由于JS的元素選擇器查找id比查找其他的形式要快，所以給被選擇的元素加上id是個好習慣狂魔。

另外蒜埋，最好給id名的前面加上js-，這表示這個元素是一個js鉤子最楷。

當做最大的模塊名

比如你的頁面有5個大模塊整份，比如header待错、footer、main等等的烈评，你除了可以用<header>標簽外火俄，也可以用<div id="header">，當然了讲冠，這種情況下能不用id就別用瓜客，因為id主要不是干這個用的。

id的寫法

可以有2種竿开，一種是駝峰寫法btnGroupAddon2谱仪，一種是下劃線寫法btn_group_addon_2，具體用哪種都可以否彩，真心沒有任何區(qū)別疯攒，所以項目內(nèi)部統(tǒng)一一種即可。我個人偏向于下劃線寫法列荔，因為我喜歡給變量名使用駝峰寫法敬尺，這樣的話兩種寫法在js中就可以一眼區(qū)分。

一般不要用連接線寫法肌毅，因為容易跟class混淆筷转，而且id名可以直接拿來當js的window對象的屬性，也就是window.btn_group_addon_2就指向該元素悬而，但是window.btn-group-addon-2是非法的寫法呜舒。

附錄二：注釋什么時候?qū)懀?/h1>

業(yè)界目前認為最正確的做法，是只給hack做注釋笨奠，因為你不注釋袭蝗，我真的不好理解你這個hack是干嘛的。其他情況下般婆，應當通過類名就可以讓人明白這個類是干什么的到腥。