BEM命名 css模塊化解決方案

QiShare 發布于2019-08-02 16:00 / 1451人閱讀

摘要：閱讀類似為什么要用網絡發展是由模塊化的目的驅動的將項目分割成幾部分以使其易于管理。模塊化環境中繞過繼承嵌套選擇器提高了的特異性。模塊化上下文需要低特異性塊獨立的實體，它本身是有意義的。，，，，修飾塊或元件上的標志。

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

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

塊（block）

獨立的實體，它本身是有意義的。
雖然塊可以嵌套和相互作用，在語義上，他們保持平等; 沒有優先級或層次結構。
僅使用類名稱選擇器
沒有標簽名稱或ID
不依賴頁面上的其他塊/元素
header，container，menu，checkbox，input，logo,button

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

元素（element）

塊的一部分，沒有獨立的含義，在語義上與塊相關聯
任何元素都被語義綁定到它的塊。
menu__item，list__item，checkbox__caption，header__title，menu__elements


      ...
     

.block__elem {color：＃042; }

修飾（modifier）

塊或元件上的標志。
用它們來改變外觀，行為或狀態
.block--mod或.block__elem--mod和.block--color-black與.block--color-red。復雜修飾符中的空格被短劃線代替
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;
    }

  }

}

GPU云服務器云服務器模塊名命名空間目錄名 BEM 模塊化機房解決方案施耐德模塊化機房技術方案

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54499.html

CSS命名規范

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

includecmath 2019-08-30 13:17 評論0 收藏0
CSS規范--BEM入門

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

li21 2019-08-29 12:49 評論0 收藏0
CSS哲學偽命題

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

Shimmer 2019-08-30 12:48 評論0 收藏0
BEM命名 css模塊化解決方案

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

Lyux 2019-08-29 14:03 評論0 收藏0