国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

BEM 實戰(zhàn)之微信個人頁面

waltr / 2605人閱讀

摘要:簡介前端命名方法論是由團隊提出的一種前端命名方法論,是一個非常有用,強大,簡單的命名約定,可以讓你的前端代碼更容易閱讀和理解,更容易協(xié)作,更容易控制,更加健壯和明確而且更加嚴(yán)密。

1.BEM 簡介

BEM——前端命名方法論

BEM 是由 Yandex 團隊提出的一種前端命名方法論,是一個非常有用,強大,簡單的命名約定,可以讓你的前端代碼更容易閱讀和理解,更容易協(xié)作,更容易控制,更加健壯和明確而且更加嚴(yán)密。

BEM 命名約定模式

.block{}
.block__element{}
.block--modifier{}

其中

.block:表示一個抽象的塊,或一個獨立的組件

.block__element:element是.block的子節(jié)點,表示element屬于某個.block,用于形成一個完整的.block整體,__是向下降級的意思

.block--modifier:表示某個節(jié)點的狀態(tài)

2.微信個人頁面實戰(zhàn)

為了更清楚感受BEM的命名方式,我仿制了一下微信的個人頁面,其中圖標(biāo)來自Iconfont矢量圖標(biāo)庫,圖標(biāo)命名直接使用其原始的命名

一開始我設(shè)計的html,此時我對BEM有些認(rèn)識,但是使用上還是有點問題,這時,我將整個頁面看作一個模塊分為三部分:page__hd,page__bd,page__ft

微信
***
***
***
***
  • ***
  • ***
  • ***
  • ***
***
***
***
***

但當(dāng)一個模塊內(nèi)的部分多了些的時候,比如page__bd內(nèi)部的元素,我覺得我的命名有些混亂,為了給它命名還得百度翻譯,而且開始命名完后寫css時發(fā)現(xiàn)自己還是不太清楚它的位置,寫完css后發(fā)現(xiàn)還有有些沒有使用上的類名比如.right

我修改了我的html命名,感覺上結(jié)構(gòu)更加清晰而且觀察了一下微信的頁面,頭部和底部是不變的,每個頁面都是一樣的,還有page__bd內(nèi)的page__bd__list在微信的發(fā)現(xiàn)頁面也是開始可以使用的,這樣的命名就比較好復(fù)用。


微信

微信

通訊錄

發(fā)現(xiàn)

3.總結(jié)一下我使用 BEM 命名的感受

第一:讓你的代碼更容易閱讀和理解,可以清晰的指出某個節(jié)點屬于哪個塊下,層級關(guān)系比較明顯,也盡量避免使用節(jié)點承載的內(nèi)容來定義節(jié)點,這樣更好的復(fù)用某個模塊

第二:BEM 的降級關(guān)系不需要迫切的去使用,比如page__hd內(nèi)的.title,因為一個頁面只有一個title,所以使用page__title就可以代表,不需要使用page__hd__title

第三:使用BEM是為了讓我們的代碼更清晰,更易維護(hù),如果它使得你的代碼更難維護(hù),更難理解,也不必糾結(jié)

github 項目地址:https://github.com/EIVE/wx_ho...

以上是我學(xué)習(xí)BEM的一下感受,希望大家可以有所收獲,其中可能有些不太恰當(dāng)?shù)牡胤?,也希望大家可以多給我提一些意見

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/112796.html

相關(guān)文章

  • CSS相關(guān)文章

    摘要:如何用獲取虛擬鍵盤高度前端早讀課月號早讀文章由湯谷投稿分享。大殺器和把動畫轉(zhuǎn)換成原生動畫初來乍到,本文搬運自我月份在知乎發(fā)的文章。 前端面試之 CSS3 新特性 除了 HTML5 的新特性,CSS3 的新特性也是面試中經(jīng)常被問到的。 如何用 js 獲取虛擬鍵盤高度?-前端早讀課 9月7號早讀文章由@湯谷投稿分享。正文從這開始~ 這是一個存在很久的歷史問題了,對于這樣一個具有普遍性的問題...

    FrozenMap 評論0 收藏0
  • 「前端早讀君009」快速小程序開發(fā)微信小程序內(nèi)嵌 H5

    摘要:前言微信小程序中可以直接運行頁面,這一新組件的產(chǎn)生,可能直接導(dǎo)致小程序數(shù)量迎來一波高峰。微信小程序配置系列問題配置域名業(yè)務(wù)域名中配置的就是小程序以及和中引用的域名。 今日勵志語 要接受自己行動所帶來的責(zé)任而非自己成就所帶來的榮耀。 前言 微信小程序中可以直接運行 web 頁面,這一新組件 web-view 的產(chǎn)生,可能直接導(dǎo)致小程序數(shù)量迎來一波高峰。本篇博文將從業(yè)務(wù)選型,微信小程序后臺...

    wh469012917 評論0 收藏0
  • 微信開發(fā)微信jssdk錄音功能開發(fā)

    項目需求簡單描述 用戶長按錄音,松手后直接結(jié)束錄音,結(jié)束錄音后,用戶可以選擇重新錄音、播放剛才的錄音,上傳錄音(這里的上傳錄音指上傳到自己服務(wù)器,上傳步驟是,前端調(diào)用wx.uploadVoice,后臺再到微信服務(wù)器下載音頻文件,上傳到自己的服務(wù)器)。注意,音頻文件自上傳時間算起在微信服務(wù)器的有效期為3天。由于后臺從微信服務(wù)器下載的音頻文件是amr格式的,需要后臺先把amr文件轉(zhuǎn)換成MP3,前端用a...

    bingchen 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<