BEM命名 css模塊化解決方案

Lyux 發(fā)布于2019-08-29 14:03 / 2274人閱讀

摘要：閱讀類似為什么要用網(wǎng)絡(luò)發(fā)展是由模塊化的目的驅(qū)動(dòng)的將項(xiàng)目分割成幾部分以使其易于管理。模塊化環(huán)境中繞過繼承嵌套選擇器提高了的特異性。模塊化上下文需要低特異性塊獨(dú)立的實(shí)體，它本身是有意義的。，，，，修飾塊或元件上的標(biāo)志。

BEM Block Element Modifier

閱讀

http://getbem.com/introduction/
https://cssguidelin.es/#bem-l...
https://www.w3cplus.com/css/s...
http://www.sohu.com/a/1501527...

類似

http://suitcss.github.io/
https://smacss.com/   scalable modular architecture
http://oocss.org/    object oriented

為什么要用BEM

網(wǎng)絡(luò)發(fā)展是由模塊化的目的驅(qū)動(dòng)的：將項(xiàng)目分割成幾部分以使其易于管理。Web組件
1.避免繼承，并通過每個(gè)元素（如）使用獨(dú)特的 CSS類提供某種范圍。.my-component__list-item
2.通過將CSS 特性保持在最低水平來減少樣式?jīng)_突。
3.模塊化環(huán)境中繞過繼承
4.嵌套選擇器提高了CSS的特異性。需要變得更具體，以贏得現(xiàn)有的特異性。模塊化上下文需要低特異性

塊（block）

獨(dú)立的實(shí)體，它本身是有意義的。
雖然塊可以嵌套和相互作用，在語義上，他們保持平等; 沒有優(yōu)先級(jí)或?qū)哟谓Y(jié)構(gòu)。
僅使用類名稱選擇器
沒有標(biāo)簽名稱或ID
不依賴頁面上的其他塊/元素
header，container，menu，checkbox，input，logo,button

 ... 
.block {color：＃042; }

元素（element）

塊的一部分，沒有獨(dú)立的含義，在語義上與塊相關(guān)聯(lián)
任何元素都被語義綁定到它的塊。
menu__item，list__item，checkbox__caption，header__title，menu__elements


      ...
     

.block__elem {color：＃042; }

修飾（modifier）

塊或元件上的標(biāo)志。
用它們來改變外觀，行為或狀態(tài)
.block--mod或.block__elem--mod和.block--color-black與.block--color-red。復(fù)雜修飾符中的空格被短劃線代替
disabled，highlighted，checked，fixed，size big，color yellow,
input size big ,button theme green

...
...

例子（Example）


  
  

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

Sass3.3 for BEM

.note {
  color: #ffffff;

  &__content {
    background: white;
  }

  &__meta {
    background: #f1f1f1;
    border-top: 1px solid #eee;
  }

  &--featured {
    box-shadow: 0 3px 1px rgba(0, 0, 0, 0.1);
  }

}

$module: "note";

.#{$module} {
  // By default, our note has a white background…

  &__content {
    background: white;
  }

  // But “featured” notes have an offwhite background

  &--featured {

    .#{$module}__content {
      background: #eee;
    }

  }

}