前言??
- 最近在搭自己的組件庫，關于
CSS前處理器用的是SCSS， - 對于樣式的命名使用了
BEM，借此機會分享一下，
怎么命名🔥
樣式命名有多難
- 我以前覺得這是一個特別特別難的問題，這難的有恐怖呢，這就像產品讓我做一個頁面但沒有設計圖甚至原型圖只是幾個框框的情況下讓我做的特別好看，色彩特別鮮艷一樣，真是有（tian）點（da）困（lei）難（pi）🤏，
- 大家有沒有遇到一種情況就是再寫一個模塊的時候它的內容給他樣式命名
container，那他的左邊內容呢？右邊內容呢？left-container?right-container?如果內容里面還有內容呢，原諒我英語不好，我還是會想用container，要瘋🤷?♂?， class既要表達清楚這個樣式代表什么又要不能有重復，樣式重復的后果大家懂的都懂，所以我才說這對大部分前端來說是挺難的一個問題，但對一小部分前端程式員來說根本不值一提，為什么這么說呢？因為我遇見過名字按順序one，two和three來排列的class名，我想這可能對他們來說不算什么事吧🤦?♂?，- 開個玩笑，在正常情況下，我們對樣式進行命名的時候都會去查對應模塊的英文來進行命名（英文好的當我沒說），起一個獨一無二的名字，
- 但事實上我們不能保證我們"當時認為獨一無二的名字"就是"獨一無二的"，當我們給一個tab加動態時可能會用到
actived來代表被激活被選中，用了這個之后本能的其他的模塊動態還是會想用這個名字actived，如果有同感的可以留個贊了，說明我們是一類人哈哈哈😵， - 有的同學可能會說，哎呀能跑就行不沖突就行反正客戶又不會看你原始碼管你寫的好不好看，但試想一下如果這個專案不是你一個人開發呢，當涉及到更大、更復雜的專案時，你如何組織代碼是提高效率的關鍵！如果你提桶了之后輪到別人接手呢？別人看著你的代碼就會跟別人抱怨：“看！這人寫的什么屎山！” 是不是你曾經也這樣吐槽過別人呢🙇，
關于BEM🌊
BEM是什么
BEM—Block Element Modifier是一種幫助您在前端開發中創建可重用組件和代碼共享的方法，由Yandex團隊提出的一種前端CSS命名方法論，- 所謂
BEM說白了就是把樣式按照BEM三種來進行命名，
-
BEM:
- B -
Block一個獨立的模塊，一個本身就有意義的獨立物體 比如：header、menu、container - E -
Element元素,塊的一部分但是自身沒有獨立的含義 比如：header title、container input - M -
Modifier修飾符，塊或者元素的一些狀態或者屬性標志 比如：small、checked
- B -
BEM使用
- 知道了
BEM的基本概念后接下來就是使用了，上面我也說了，說白了BEM也就是把三個連接在一起組成一個class名,那怎么連接他們三呢？ BEM提出的一個概念是用連接符號來表達,它并不規定必須用什么連接符,但規定用不同連接符做團隊內約定區分BEM 3類元素，B其實可以理解成一個模塊，就比如Element的el-button、Ant Design的ant-btn，E的連接用官方的方式就是塊名稱加兩個下劃線加元素名稱構成（__）就比如Element的el-radio__input，M的連接用官方的方式就是.block__elem--mod，就比如Element的el-button--small、vant的van-button--danger，
BEM的好處
- 可以發現很多開源優秀的組件庫都是用的BEM規范來命名，那為什么會這么受歡迎呢？
- 要知道我們用一個技識訓者框架或者規范目的都是只有一個，讓自己更舒服，就好像編輯器裝插件，不用原生
js開發而用框架開發一個道理， 方便查看BEM可以讓開發人員在樣式命名上就知道這個樣式屬于哪里，從名字就可以知道某個標記的含義，假設一個樣式命名left-content,光是找這個樣式在哪里就已經很麻煩了，結構明了在我們用scss和less前處理器的時候都習慣嵌套很多層，但有了BEM命名后模塊層級關系簡單清晰，而且css書寫上也不必作過多的層級選擇，可復用性在寫了一個元素的樣式后需要對他的修飾符進行拼接樣式修改，我們在scss中可以使用@mixin做些處理拼接E和M放到公共的scss中別的地方再進行復用,就比如element的mixins配置，
示例
說了這么多光看文字也煩了吧，還是放個簡單的代碼示例出來大家品吧,下面是一個按鈕的組件封裝，
<template>
<button
class="zl-button"
:class="[
type ? 'zl-button--' + type : '',
size ? 'zl-button--' + size : ''
]"
type="button"
>
<slot />
</button>
</template>
<script>
export default {
name: 'ZlButton',
props: {
type: {
validator (value) {
return oneOf(value, ['default', 'primary', 'info', 'success', 'warning', 'danger']);
},
type: String,
default: 'default'
},
size:{
validator (value) {
return oneOf(value, ['','medium', 'small', 'mini']);
},
type: String,
default: ''
}
}
};
</script>
zl-button可以看到這里用了B的連接，zl-button--small可以看到這里用了B+M中間用--連接起來來代表塊和修飾符連接，
寫在最后👋
- 對于樣式的規范其實也沒有那么難，只是平時為了追求速度而放棄了規范，實際上如果時間允許的話還是用主流的規范來約束自己不讓自己的代碼變成別人口中的屎山，
- 如果您覺得這篇文章有幫助到您的的話不妨🍉一鍵三連+評論+轉發🍉支持一下喲~~😛
參考👈
如何看待 CSS 中 BEM 的命名方式？
GET BEM
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/300774.html
標籤：其他
上一篇：Vue_Music練習專案總結
下一篇：uniapp 滑動評分