您好,登錄后才能下訂單哦!
這篇“怎么寫出優(yōu)雅耐看的css代碼”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“怎么寫出優(yōu)雅耐看的css代碼”文章吧。
BEM是什么
BEM是一種CSS命名規(guī)范。
BEM代表 “塊(block),元素(element),修飾符(modifier)”。
在選擇器中,由以下三種符號來表示擴展的關(guān)系:
- 中劃線 :僅作為連字符使用,表示某個塊或者某個子元素的多單詞之間的連接記號。 __ 雙下劃線:雙下劃線用來連接塊和塊的子元素 _ 單下劃線:單下劃線用來描述一個塊或者塊的子元素的一種狀態(tài)
使用BEM示例對比
如下面的例子,li.item 是列表的一個子元素
/* 常規(guī)寫法和BEM寫法相同 */ .list
/* 常規(guī)寫法 */ <ul class="list"> <li class="item">Pricing</li> <li class="item">Contact</li> </ul> /* BEM寫法 */ <ul class="list"> <li class="list__item">Pricing</li> <li class="list__item">Contact</li> </ul>
/* 常規(guī)寫法 */ .list{} .list .item{} /* BEM寫法 */ .list{} .list__item{}
一個“修飾符”可以理解為一個塊的特定狀態(tài)!
/* 常規(guī)寫法 */ <ul class="list"> <li class="item">Pricing</li> <li class="item">Contact</li> </ul> /* BEM寫法 */ <ul class="list"> <li class="list__item_active"> Pricing </li> <li class="list__item">Contact</li> </ul>
/* 常規(guī)寫法 */ .list{} .list .item{} .list .item.active{} /* BEM寫法 */ .list{} .list__item{} .list__item_active{}
BEM 的好處
擺脫特異性的困擾
修復(fù)繼承問題
停止擔心命名
短命名比長命名會更好
因為短命名縮短書寫時間,也減小了css文件大小!例如這個例子:
// 推薦 .some-intro{...} // 不推薦 .some-introduction{...}
組合命名比單命名會更好
// 不建議 .header{...} //推薦 .cs-header{...}
面向?qū)傩缘拿兔嫦蛘Z義的命名
面向?qū)傩缘拿高x擇器的命名是跟著具體的CSS樣式走的,與項目、頁面、模塊統(tǒng)統(tǒng)沒有關(guān)系。例如,比較經(jīng)典的清除浮動類名.clearfix:
.clearfix:after { content : ''; display: table; clear: both; }
面向語義的命名則是根據(jù)應(yīng)用元素所處的上下文來命名的。例如:
.header { background-color: #333; color: #fff; } .logo {font-size: 0; color : transparent;}
上述兩種命名方式各有優(yōu)缺點:
1、面向?qū)傩?/p>
優(yōu)點:在于CSS的重用率高,性能最佳,即插即用,方便快捷,開發(fā)也極為迅速,因為它省去了大量在 HTML 和CSS文件之間切換的時間。
缺點:在于由于屬性單一,其適用場景有限,另外因為使用方便,易被過度使用,從而帶來更高的維護成本。
2、面向語義
優(yōu)點是應(yīng)用場景廣泛,可以實現(xiàn)非常精致的布局效果,擴展方便;
缺點:在于代碼啰唆,開發(fā)效率一般,因為所有HTML都需要命名,哪怕是一個10像素的間距。這就導致很多開發(fā)者要么選擇直接使用標簽選擇器,要么就選擇一個簡單的類名,然后通過父子關(guān)系限定樣式,結(jié)果帶來了更糟糕的維護問題。
狀態(tài)
前一個 prev 后一個 next 當前的 current 顯示的 show 隱藏的 hide 打開的 open 關(guān)閉的 close 選中的 selected 有效的 active 默認的 default 反轉(zhuǎn)的 toggle 禁用的 disabled 危險的 danger 主要的 primary 成功的 success 提醒的 info 警告的 warning 出錯的 error 大型的 lg 小型的 sm 超小的 xs
布局
文檔 doc 頭部 header(hd) 主體 body 尾部 footer(ft) 主欄 main 側(cè)欄 side 容器 box/container
通用部件
列表 list 列表項 item 表格 table 表單 form 鏈接 link 標題 caption/heading/title 菜單 menu 集合 group 條 bar 內(nèi)容 content 結(jié)果 result
組件
按鈕 button(btn) 字體 icon 下拉菜單 dropdown 工具欄 toolbar 分頁 page 縮略圖 thumbnail 警告框 alert 進度條 progress 導航條 navbar 導航 nav 子導航 subnav 面包屑 breadcrumb(crumb) 標簽 label 徽章 badge 巨幕 jumbotron 面板 panel 洼地 well 標簽頁 tab 提示框 tooltip 彈出框 popover 輪播圖 carousel 手風琴 collapse 定位浮標 affix
語義化小部件
品牌 brand 標志 logo 額外部件 addon 版權(quán) copyright 注冊 regist(reg) 登錄 login 搜索 search 熱點 hot 幫助 help 信息 info 提示 tips 開關(guān) toggle 新聞 news 廣告 advertise(ad) 排行 top 下載 download
功能部件
左浮動 fl 右浮動 fr 清浮動 clear
以上就是關(guān)于“怎么寫出優(yōu)雅耐看的css代碼”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。