成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS命名規(guī)范

includecmath / 2944人閱讀

摘要：本篇介紹幾種命名規(guī)范。使用的網(wǎng)站四其他命名規(guī)范等減少對結(jié)構(gòu)的依賴增加重復性的使用幾種命名規(guī)范比較與在命名上相反的點可以放心使用，以為都是在模塊內(nèi)但不推薦當前我們的網(wǎng)站略有思想更概括，中的，相當于的，相當于的，相當于的中文

本篇介紹幾種CSS命名規(guī)范。 （規(guī)范詳細請參考底部References)

一、NEC (nice easy css)

網(wǎng)易前端CSS開源項目

1.1 樣式分類

重置和默認：reset + base

布局(g-) 例如頭部，尾部，主體，側(cè)欄等

模塊(m-) 較大整體，如登錄注冊，搜索等

元件(u-) 不可再分個體，例如按鈕，input框等

功能(f-) 使用頻率較高樣式，例如清除浮動

皮膚(s-) 例如文字色，背景色，邊框色等

狀態(tài)(z-) 例如hover，選中等

j- 專門用于js獲取節(jié)點，勿占用

舉個例子：

1.2 命名規(guī)則

樣式命名時始終以以上幾類（g-等）開頭，然后使用后代選擇器

約定后代選擇器不使用單個字母+“-”的形式，不使用單個字母

通過使用后代選擇器，==后代選擇器不需要考慮名字是否已被使用==，因為只在當前模塊生效
（還是有可能會污染，注意避免）

命名簡約不失語義 .green2 --bad .wrap2 --good

相同語義的不同類命名 —可直接加數(shù)字或字母區(qū)分 .m-list .m-list2

出現(xiàn)率高的做成基類，再做擴展類：
基類+擴展類 ：class="m-list m-list-2” class="u-btn u-btn-hover”

1.3 代碼格式

選擇器，屬性和值小寫

NEC規(guī)范推薦單行寫完一個選擇器定義（sass，不適用）

盡量不要省略分號

省略0時的單位

十六進制表示顏色，盡量縮寫

根據(jù)屬性重要性順序書寫

按布局、盒模型，修飾的順序
推薦插件css comb （sublime text 插件）

1.4 優(yōu)化方案

背景圖優(yōu)化合并

圖片本身的優(yōu)化
-- 色彩過于豐富無透明要求 --> jpg較高質(zhì)量

-- 色彩過于豐富且有透明或者陰影要求--> png24
-- 色彩不太豐富且無論有無透明要求--> png8

多張圖片合并的優(yōu)化
-- 排列方式

-- 合并后圖片大小不宜超過50k，
-- 為了保持一致性，記得保留PSD原圖

如果CSS能做到，不要用js
css控制視覺變化，js只需要更改classname

1.5 最佳實踐

統(tǒng)一語義理解及命名:

1.6 典型錯誤

不要以沒有語義的標簽作為選擇器
.m-nav div{}

不要越級控制
.m-xxx .m-yyy a{}

不要在頁面布局中使用后代選擇器
.g-xxx .btn{}

不要用頁面布局去控制模塊或者元件
.g-xxx .m-yyy

1.7 使用NEC的網(wǎng)站

http://nec.netease.com/case
http://yuedu.163.com/

二、AliceUI規(guī)范

Alice的樣式模塊組織方式追求扁平化方式，分為三個層級：

基礎(chǔ)框架（reset+iconfont+柵格）

通用模塊

頁面樣式 (繼承通用模塊)

任何模塊在頁面中應該像一個盒模型，不和頁面的其他元素互相影響，完美的Alice模塊應該是一個“口”字型

2.1 命名規(guī)范

用“-”做命名空間上的區(qū)隔，最小化兩個模塊之間的命名沖突

第一個前綴作為通用模塊標識，各業(yè)務(wù)線選取自己的前綴

模塊名是必選的，要求表意的

模塊內(nèi)部類名繼承上層名稱

不推薦這樣寫，很容易造成命名沖突：

參看模塊的樣式：

Alice類命名規(guī)范

一個簡單的使用Alice的例子：
https://github.com/aliceui/al...

三、BEM(Block,Element,Modifier)

Yandex團隊提出的前端CSS命名方法論。
優(yōu)點：less confusing & recognizable

3.1 BEM定義 
Block： 一個塊是一個獨立的實體，塊可以包含其他塊；  
例如一個搜索塊；

Element: 一個元素是塊的一部分，具有某種功能。元素是依賴上下文的，它們只有處于它們應該屬于的塊的上下文時才有意義。
例如搜索塊里的input框或button；

Modifier: 修飾符作為一個塊或者一個元素的屬性，代表這個塊或者是元素在外觀或是行為上的改變。
例如tab選中高亮。

3.2 BEM命名約定

一種命名規(guī)則：

塊名：block-name，它為元素和修飾符定義了命名空間

元素名：與塊名使用“__”連接(double underscore)，block-name__ele-name

修飾符名：使用“_”連接(single underscore)
對于Boolean類型修飾符 —— owner-name_mod-name;

對于key-value類型的修飾符 —— owner-name_mod-name_mod-val;

舉個例子：
html：

CSS:

.form {}
.form_theme_forest {}
.form_login {}
.form__input {}
.form__submit {}
.form__submit_disabled {}

其他命名規(guī)則也有很多，例如：

Two dash style
例如：block-name__elem-name--mod-name

CamelCase style
例如MyBlock__SomeElem_modName_modVal

--BEM提供一種規(guī)范，具體命名規(guī)則可以根據(jù)個人偏好選擇

BEM的關(guān)鍵是光憑名字就可以判斷某個標記是用來干什么的。通過瀏覽HTML代碼中的class屬性，你就能夠明白模塊之間是如何關(guān)聯(lián)的：有一些僅僅是組件，有一些則是這些組件的子孫或者是元素,還有一些是組件的其他形態(tài)或者是修飾符。
BEM可能看上去有點滑稽，而且有可能導致我們輸入更長的文本（大部分編輯器都有自動補全功能，而且gzip壓縮將會讓我們消除對文件體積的擔憂），但是它依舊強大。

3.3 使用BEM的網(wǎng)站

http://company.yandex.ru/
https://hh.ru/

四、其他命名規(guī)范

OOCSS、SMACSS、SUITCSS、Atomic等
OOCSS:

減少對 HTML 結(jié)構(gòu)的依賴

增加 CSS class 重復性的使用
http://www.w3cplus.com/css/oo...

幾種命名規(guī)范比較：


NEC 與 AliceUI 在命名上相反的點：

.m-list .title 可以放心使用，以為都是在模塊內(nèi),但AliceUI不推薦

當前我們的網(wǎng)站略有OOCSS思想

BEM更概括，NEC中的g-，m-相當于BEM的block，u-相當于BEM的element, f-，z-,s-相當于BEM的modifier.

References

[1].http://nec.netease.com/
[2].https://github.com/aliceui/al...
[3].http://getbem.com/introduction/ (BEM)
[4].https://en.bem.info/methodolo...
**http://www.w3cplus.com/css/be...中文)
[5].https://segmentfault.com/a/11... (BEM)

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115439.html

相關(guān)文章

  • CSS命名規(guī)范

    摘要：命名規(guī)則樣式類名全部用小寫，首字符必須是字母，禁止數(shù)字或其他特殊字符。其他禁止使用在樣式表命名中，一律使用命名。什么是命名空間通過統(tǒng)一的命名規(guī)范定義命名的范圍，成為命名空間。1 前端開發(fā)命名規(guī)范 1.1 為什么要制定CSS命名規(guī)范 統(tǒng)一的命名規(guī)范，便于多人開發(fā)維護時代碼統(tǒng)一，減少項目溝通和交接的成本，增加代碼的語義化。 1.2 CSS命名規(guī)則 樣式類名全部用小寫，首字符必須是字母，禁止數(shù)...

    vvpale 評論0 收藏0

  • CSS學習筆記(十二) CSS命名規(guī)范

    摘要：引言最近想將這幾個月做過的東西組件化，然后首先想到的是編碼規(guī)范化本文只涉及命名規(guī)范，搬來了造好的輪子。舉例對齊樣式使用對齊目標的英文名稱。舉例注意事項一律小寫盡量用英文不加中杠和下劃線盡量不縮寫，除非一看就明白的單詞。 引言：最近想將這幾個月做過的東西組件化，然后首先想到的是 編碼規(guī)范化！本文只涉及 CSS 命名規(guī)范，搬來了Alloyteam 造好的輪子?？赡懿⒉煌耆m用，在以后...

    stormjun 評論0 收藏0

  • 好的 CSS 命名規(guī)范可以節(jié)約 Debug 時間

    摘要：簡評是一種很耗時的操作，如果有良好的命名規(guī)范可以節(jié)約很多的時間。一些團隊使用連字符分隔符，而其他團隊則傾向于使用更加結(jié)構(gòu)化的稱為的命名規(guī)范。一般來說，命名規(guī)范有三個問題要解決能夠通過名字就能清楚選擇器的功能。 簡評：Debug CSS 是一種很耗時的操作，如果有良好的命名規(guī)范可以節(jié)約很多的 Debug 時間。 使用連字符（-）分隔字符串 你可能習慣了在 Javascript 中使用小駝...

    wean 評論0 收藏0

  • css命名和書寫規(guī)范

    摘要：前言在項目開發(fā)中對于名字的命名和書寫老是感覺很混亂，這對于代碼的可讀性以及維護提出了挑戰(zhàn)，所以在閑暇之余看了一些這方面的內(nèi)容，現(xiàn)總結(jié)如下命名規(guī)則說明所有的命名最好都小寫屬性的值一定要用雙引號括起來，且一定要有值如每個標簽都要有開始和結(jié)束，且 前言 在項目開發(fā)中對于css名字的命名和書寫老是感覺很混亂，這對于代碼的可讀性以及維護提出了挑戰(zhàn)，所以在閑暇之余看了一些這方面的內(nèi)容，現(xiàn)總結(jié)如下....

    wua_wua2012 評論0 收藏0

  • css命名和書寫規(guī)范

    摘要：前言在項目開發(fā)中對于名字的命名和書寫老是感覺很混亂，這對于代碼的可讀性以及維護提出了挑戰(zhàn)，所以在閑暇之余看了一些這方面的內(nèi)容，現(xiàn)總結(jié)如下命名規(guī)則說明所有的命名最好都小寫屬性的值一定要用雙引號括起來，且一定要有值如每個標簽都要有開始和結(jié)束，且 前言 在項目開發(fā)中對于css名字的命名和書寫老是感覺很混亂，這對于代碼的可讀性以及維護提出了挑戰(zhàn)，所以在閑暇之余看了一些這方面的內(nèi)容，現(xiàn)總結(jié)如下....

    王笑朝 評論0 收藏0

發(fā)表評論

0條評論

includecmath

男|高級講師

TA的文章

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