亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

BEM命名 css模塊化解決方案

QiShare / 1547人閱讀

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

塊（block）

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

 ... 

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

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


      ...
     


.block__elem {color：＃042; }
修飾（modifier）

塊或元件上的標(biāo)志。
用它們來(lái)改變外觀，行為或狀態(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/54499.html

相關(guān)文章

  • CSS命名規(guī)范

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

    includecmath 評(píng)論0 收藏0

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

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

    li21 評(píng)論0 收藏0

  • CSS哲學(xué)偽命題

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

    Shimmer 評(píng)論0 收藏0

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

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

    Lyux 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<