CSS如何使用BEM命名規(guī)范-創(chuàng)新互聯(lián)
這篇文章將為大家詳細(xì)講解有關(guān)CSS如何使用BEM命名規(guī)范，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比泗縣網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式泗縣網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋泗縣地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。
BEM（塊，元素，修飾符）是基于組件的Web開發(fā)的一種前端命名方法論，主要針對(duì)CSS。其背后的想法是將用戶界面分為獨(dú)立的塊。即使使用復(fù)雜的UI，這也使界面開發(fā)變得容易和快速，并且允許重用現(xiàn)有代碼而無需復(fù)制和粘貼。
優(yōu)勢(shì)
避免樣式?jīng)_突
減小名稱長(zhǎng)度
提高可閱讀性
增加樣式重用
怎么使用BEM
Block
一個(gè)功能獨(dú)立的頁面組件，可以重復(fù)使用
塊不應(yīng)影響其環(huán)境，這意味著您不應(yīng)設(shè)置塊的外部幾何形狀（邊距）或位置
< div class = "header" >
< div class = "red-text" >
Element
塊的復(fù)合部分，不能單獨(dú)使用
元素全名的結(jié)構(gòu)為block-name__element-name
Search
一個(gè)元素始終是塊的一部分，而不是另一個(gè)元素，因此元素名稱不可定義為 block__elem1__elem2 的層次結(jié)構(gòu)
Search
Search
元素始終是一個(gè)塊的一部分，您不應(yīng)該與該塊分開使用
Search
Search
Modifier
定義塊或元素的外觀，狀態(tài)或行為的實(shí)體
修飾符的兩種類型
Boolean
修飾符全名的結(jié)構(gòu)遵循以下模式：
block-name_modifier-name
block-name--modifier-name
block-name_element-name_modifier-name
block-name_element-name--modifier-name
Search
Key-value
修飾符全名的結(jié)構(gòu)遵循以下模式：
block-name_modifier-name_modifier-value
block-name_modifier-name--modifier-value
block-name__element-name_modifier-name_modifier-value
block-name__element-name_modifier-name--modifier-value
Search
不能將修飾符與修飾的塊或元素隔離使用。修飾符應(yīng)更改實(shí)體的外觀，行為或狀態(tài)，而不是替換它
Search
Search
在修飾符和元素名稱中添加塊名稱的好處
有助于減少一個(gè)塊的元素和修飾符對(duì)另一個(gè)塊的實(shí)現(xiàn)的影響
可更清楚的知道修飾符應(yīng)用于該DOM節(jié)點(diǎn)上的哪個(gè)實(shí)體
名稱使查找代碼或文件系統(tǒng)中的實(shí)體變得更加容易
什么時(shí)候應(yīng)該用 BEM 格式
使用 BEM 的訣竅是，你要知道什么時(shí)候哪些東西是應(yīng)該寫成 BEM 格式的。
并不是每個(gè)地方都應(yīng)該使用 BEM 命名方式。當(dāng)需要明確關(guān)聯(lián)性的模塊關(guān)系時(shí)，應(yīng)當(dāng)使用 BEM 格式。
比如只是一條公共的單獨(dú)的樣式，就沒有使用 BEM 格式的意義：
.hide {
display: none !important;
}命名規(guī)范
雙下劃線風(fēng)格
block-name__elem-name--mod-name--mod-val
名稱以小寫拉丁字母書寫。
BEM實(shí)體名稱中的單詞由連字符（-）分隔。
元素名稱與塊名稱之間用雙下劃線（__）分隔。
布爾修飾符用雙連字符（--）與塊或元素的名稱分隔。
修飾符的值與其名稱之間用雙連字符（--）分隔。
（重要提示：注釋（--）中的雙連字符可能會(huì)在HTML文檔驗(yàn)證期間導(dǎo)致錯(cuò)誤。）
CamelCase style
blockName-elemName_modName_modVal
React命名范式
BlockName-ElemName_modName_modVal
名稱以拉丁字母書寫。
塊和元素的名稱以大寫字母開頭。修飾符的名稱以小寫字母開頭。
名稱中的每個(gè)單詞都以大寫字母開頭。
元素名稱與塊名稱之間用單個(gè)連字符（-）分隔。
修飾符的名稱和值之間的分隔符與標(biāo)準(zhǔn)方案中的相同。
沒有命名空間樣式
_available
常用的CSS命名
例子
vant 組件 css 命名
使用的命名是雙下劃線風(fēng)格：block-name__element-name--modifier-name
搜索
重慶分公司
重慶分公司
