寫程式碼的女生酷不酷
阿新 • • 發佈：2019-01-30
作為一個前端，寫頁面結構，寫CSS怎麼命名?
就算不用，但你的瞭解， 讓自己的程式碼更規範。
BEM是什麼
它是css命名的一種規範。試想，你寫了一個頁面，有input, button, div, 這些元素是什麼樣的關係，給他們新增樣式的時候，怎麼知道他們是一個頁面的？ 怎麼知道input 是否放在div裡面的？ 不要急，這就說到了下面的命名之作用
BEM是怎麼命名的
<html>
<div class="loggin-from">
<input class="loggin-from__input"/>
<button 通過上面命名可以很直接看出，input 和button 在div 裡面。
這裡講 後面的 __input/__confim 這裡後面接兩個下劃線，表示的是div裡面的子元素。
<html>
<div class="loggin-from--big">
<input class="loggin-from__input"/>
<button class="loggin-from__confim" 這裡說， –big表示新增的描述， 很明顯是大的登錄檔單的樣式嘛。
BEM總結
好了， 這裡loggin-from 相當於一塊整體(block)， 裡面包含了元素input/button(element), 還有這個塊或者一些元素的修飾big(modifier) => BEM
它一般和sass一起使用，在用@C代表塊、 @d代表元素、 @m程式碼修飾符的時候， css可以這樣寫了
@C loggin-from {
width: 100px;
height: 100px; 怎麼樣，這樣是不是就不用寫那麼長了， 而且一看樣式檔案，就能知道頁面佈局是什麼樣的。
以上寫法， 要通過sass 外掛配置的
這裡有一個包 ，可以使用sass-bem-constructor