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 的命名方式,在使用的過程中會進行具體的補充