從QQtabBar看css命名規(guī)范BEM的詳細(xì)介紹
我要評(píng)論從QQtabBar看BEM
首先BEM是什么意思？
BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團(tuán)隊(duì)提出的一種前端命名方法論，是一種 CSS命名規(guī)范
weui-primary_loading__dot：庫(kù)名-組件_狀態(tài)__元素名
庫(kù)名：一般是各公司約定俗成的。
組件：一般用來(lái)創(chuàng)建單獨(dú)的css來(lái)修飾特定的標(biāo)簽。
狀態(tài)：一般以標(biāo)簽處于的狀態(tài)或者可以進(jìn)行交互的效果命名
元素名：一般以標(biāo)簽作用描述命名。
BEM的優(yōu)點(diǎn)：
易用性 如果想使用BEM，你只需要采用BEM命名規(guī)范即可單元性 獨(dú)立的塊和CSS選擇器，可以使得你的代碼可重用和單元化靈活性 使用BEM之后，方法和工具可以按照你喜歡的方式去組織和配置
詳細(xì)介紹一下BEM
B（Block）:塊
塊（Block）：可重復(fù)使用的功能獨(dú)立的頁(yè)面組件
塊名稱(chēng)描述了它的目的（“它是什么？” 功能庫(kù)或者組件），而不是它的狀態(tài)（紅色或者大?。?/p>
- 塊不應(yīng)影響其環(huán)境，這意味著您不應(yīng)為塊設(shè)置外部幾何（邊緣）或定位。
- 使用 BEM 時(shí)，也不應(yīng)使用 CSS 標(biāo)簽或ID選擇器
E(element):元素
元素（ELement）：塊的復(fù)合部分。元素是依賴(lài)上下文的：它們只有處于他們應(yīng)該屬于的塊的上下文中時(shí)才是有意義的，所以不能單獨(dú)使用。
元素名稱(chēng)描述它的用途（“這是什么？”items、text等），而不是它的狀態(tài)（“它是什么類(lèi)型，或者看起來(lái)像什么？”紅色、大的等等）。
M(modifier):修飾符
定義方塊或元素的外觀、狀態(tài)或行為的實(shí)體
描述了它的外觀（“什么尺寸？” 或"哪個(gè)主題？等等）
了解了BEM后我們就需要思考一下，我們應(yīng)該怎樣使用
- 創(chuàng)建塊：如果代碼的一部分可能重復(fù)使用，并且它不依賴(lài)于正在實(shí)施的其他頁(yè)面組件。
- 創(chuàng)建元素：在代碼中起到作用描述下，在你所創(chuàng)建的塊下使用。
- 創(chuàng)建修飾符：當(dāng)你需要修飾元素的特性時(shí)。 分析一下qq應(yīng)用欄結(jié)構(gòu)
整體來(lái)看，他是一個(gè)大塊包含4個(gè)小塊，每個(gè)小塊里包含三個(gè)元素。
塊 appBar
小塊 item
圖標(biāo) icon
標(biāo)簽 desc
小圓點(diǎn) pointer
<div class="qqui-appBar">
<a href="#" class="qqui-appBar__item qqui-appBar__item_on">
<span>
<i class="iconfont icon-icon-test1 icon_on"></i>
<span class="qqui__pointer qqui__pointer_on">1</span>
</span>
<p class="qqui__desc qqui__desc_on">消息</p>
</a>
<a href="#" class="qqui-appBar__item">
<span>
<i class="iconfont icon-icon-test2"></i>
<span class="qqui__pointer"></span>
</span>
<p class="qqui__desc">聯(lián)系人</p>
</a>
<a href="#" class="qqui-appBar__item">
<span>
<i class="iconfont icon-icon-test"></i>
<span class="qqui__pointer"></span>
</span>
<p class="qqui__desc">看點(diǎn)</p>
</a>
<a href="#" class="qqui-appBar__item">
<span>
<i class="iconfont icon-icon-test3"></i>
<span class="qqui__pointer qqui__pointer_oOn"></span>
</span>
<p class="qqui__desc">動(dòng)態(tài)</p>
</a>
</div>
* {
padding: 0;
margin: 0;
}
a:link {
color: #b0b3bf;
}
a:vistied {
color: #b0b3bf;
}
a:hover {
color: #2ec4fc;
}
a:active {
color: #2ec4fc;
}
a i.iconfont {
display: inline-block;
width: 36px;
height: 36px;
overflow: hidden;
margin-bottom: 3.5px;
font-size: 36px;
}
a i.icon_on{
color: #2ec4fc;
}
.qqui-appBar {
display: flex;
position: absolute;
bottom: 0;
width: 100%;
z-index: 500;
background-color: #f9f9f9;
}
.qqui-appBar .qqui-appBar__item {
flex: 1;
text-align: center;
padding-top: 25px;
font-size: 0;
color: #b0b3bf;
text-decoration: none;
}
.qqui-appBar__item>span{
display: inline-block;
position: relative;
margin-bottom: 9px;
}
.qqui-appBar .qqui__desc {
font-size: 18px;
text-align: center;
line-height: 18px;
margin-bottom: 13px;
}
.qqui-appBar .qqui__desc_on{
color: black;
}
.qqui-appBar .qqui__pointer{
position: absolute;
top: -2px;
right: -2px;
width: 20px;
height:20px;
display: inline-block;
line-height: 18px;
color: white;
border-radius: 50%;
font-size: 10px;
}
.qqui-appBar .qqui__pointer_on{
background-color: #F43539;
}
.qqui-appBar .qqui__pointer_oOn{
width: 12px;
height: 12px;
line-height: 12px;
background-color: #F43539;
}
最后的效果圖
上圖圖標(biāo)皆來(lái)自阿里圖標(biāo)庫(kù)： https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=16472
使用方式為下載方法，從上面網(wǎng)址下載。然后將其以css引入，使用類(lèi)名進(jìn)行添加。
到此這篇關(guān)于從QQtabBar看css命名規(guī)范BEM的詳細(xì)介紹的文章就介紹到這了,更多相關(guān)css命名規(guī)范BEM內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了CSS使用BEM命名規(guī)范實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-28
CSS樣式書(shū)寫(xiě)順序和命名規(guī)范及注意事項(xiàng)
這篇文章主要介紹了CSS樣式書(shū)寫(xiě)順序和命名規(guī)范,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-04值得收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則
本文是小編精心給大家收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則 ，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-10-19
好的 CSS 命名規(guī)范可以節(jié)約 Debug 時(shí)間
Debug CSS 是一種很耗時(shí)的操作，如果有良好的命名規(guī)范可以節(jié)約很多的 Debug 時(shí)間。下面通過(guò)本文給大家?guī)?lái)了CSS 命名規(guī)范可以節(jié)約 Debug 時(shí)間的相關(guān)知識(shí)，感興趣的朋友一起2018-01-23css 命名：BEM, scoped css, css modules 與 css-in-js詳解
這篇文章主要介紹了css 命名：BEM, scoped css, css modules 與 css-in-js的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，,需要的朋友2020-08-24
CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解
這篇文章主要介紹了CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-28- BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團(tuán)隊(duì)提出的一種前端命名方法論。本文主要介紹了詳解css BEM書(shū)寫(xiě)規(guī)范,非常具有實(shí)用價(jià)值，需要的2018-12-17
