成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

BEM命名 css模塊化解決方案

Lyux / 2282人閱讀

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

塊（block）

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

 ... 

.block {color：＃042; }
元素（element）

塊的一部分，沒有獨立的含義，在語義上與塊相關(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;
    }

  }

}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112885.html

相關(guān)文章

  • CSS命名規(guī)范

    摘要：本篇介紹幾種命名規(guī)范。使用的網(wǎng)站四其他命名規(guī)范等減少對結(jié)構(gòu)的依賴增加重復(fù)性的使用幾種命名規(guī)范比較與在命名上相反的點可以放心使用，以為都是在模塊內(nèi)但不推薦當(dāng)前我們的網(wǎng)站略有思想更概括，中的，相當(dāng)于的，相當(dāng)于的，相當(dāng)于的中文 本篇介紹幾種CSS命名規(guī)范。 （規(guī)范詳細請參考底部References) 一、NEC (nice easy css) 網(wǎng)易前端CSS開源項目 1.1 樣式分類 重...

    includecmath 評論0 收藏0

  • CSS規(guī)范--BEM入門

    摘要：一開始，公司推出的，包括了規(guī)范以及其配套構(gòu)建工具。代表的不同狀態(tài)或不同版本。再來看一個之前用常規(guī)方式命名的的例子這些類名真是太不精確了，并不能告訴我們足夠的信息。 這段時間在整理前端部分的代碼規(guī)范，前面提到的CSS規(guī)范里面會涉及到選擇器的命名，就參考BEM的命名規(guī)范，內(nèi)容整理如下，供大家參考，請斧正！如大家有興趣，可移步至CSS編碼規(guī)范 BEM是由Yandex公司推出的一套CSS命名...

    li21 評論0 收藏0

  • CSS哲學(xué)偽命題

    摘要：最早遇到的大概的是命名的問題了吧，因為本身積累的詞匯量就少，動不動就沒單詞可用了。用于解決項目命名規(guī)則問題。其哲學(xué)理念是模塊化，功能單一性，關(guān)注點分離。借助而解決了中的命名空間的問題，使得單文件變得簡單清晰。 標(biāo)題黨。這篇文章斷斷續(xù)續(xù)的修改過好幾次，也沒有滿意，本來是想總結(jié)一下我這些零散的 CSS 知識結(jié)構(gòu)，可能由于知識體系不全面，總是沒能把知識點串聯(lián)成一個通順的內(nèi)容。貼出來權(quán)當(dāng)大家一...

    Shimmer 評論0 收藏0

  • BEM命名 css模塊化解決方案

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

    QiShare 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<