學習筆記《BEM》

BEM 是 Yandex 提出的一種 CSS 命名法,初衷是為了解決CSS命名沖突,但是會犧牲一點閱讀性,配合 Sass 的方式來撰寫 BEM 是比較推薦的方式

BEM的意思就是塊(block)、元素(element)、修飾符(modifier)

.block{}
.block__element{}
.block--modifier{}
  • .block 代表了更高級別的抽象或組件。
  • .block__element 代表.block的后代,用于形成一個完整的.block的整體。
  • .block--modifier 代表.block的不同狀態(tài)或不同版本。
.site-search{} /* 塊 */
.site-search__field{} /* 元素 */
.site-search--full{} /* 修飾符 */

關于 BEM 的介紹文章:
https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/

如何結合 Sass 使用 BEM:
https://mindtheshift.wordpress.com/2014/10/15/getting-the-best-out-of-bem-with-sass/

如何結合 Scss 使用 BEM:
http://mathayward.com/modular-css-with-sass-and-bem/

接下來會在新的頁面上使用 BEM 的命名方式,在使用的過程中會進行具體的補充

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 不是所有的問題依靠使用工具都能完美解決,軟件的參與者不是工具而是人。工程師之間怎樣合作與配合,同樣很重要。編碼約定...
    何幻閱讀 1,932評論 0 3
  • 【譯】前端BEM命名方法論之一:BEM 官方簡介文檔【譯】前端BEM命名方法論之三:命名慣例 重要概念 Block...
    咚門閱讀 5,398評論 0 7
  • 【譯】前端BEM命名方法論之一:BEM 官方簡介文檔【譯】前端BEM命名方法論之二:BEM中的重要概念 使用 BE...
    咚門閱讀 3,022評論 0 4
  • 大四快實習了,大家都在忙著實習找工作。我也不知道自己適合什么崗位,舍友說不管什么職位你都應該先去試試,其實也...
    川瑜文梅閱讀 237評論 0 1

友情鏈接更多精彩內容