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

資訊專欄INFORMATION COLUMN

CSS命名規范

includecmath / 2920人閱讀

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

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

一、NEC (nice easy css)

網易前端CSS開源項目

1.1 樣式分類

重置和默認：reset + base

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

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

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

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

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

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

j- 專門用于js獲取節點，勿占用

舉個例子：

1.2 命名規則

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

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

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

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

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

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

1.3 代碼格式

選擇器，屬性和值小寫

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

盡量不要省略分號

省略0時的單位

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

根據屬性重要性順序書寫

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

1.4 優化方案

背景圖優化合并

圖片本身的優化
-- 色彩過于豐富無透明要求 --> jpg較高質量

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

多張圖片合并的優化
-- 排列方式

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

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

1.5 最佳實踐

統一語義理解及命名:

1.6 典型錯誤

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

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

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

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

1.7 使用NEC的網站

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

二、AliceUI規范

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

基礎框架（reset+iconfont+柵格）

通用模塊

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

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

2.1 命名規范

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

第一個前綴作為通用模塊標識，各業務線選取自己的前綴

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

模塊內部類名繼承上層名稱

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

參看模塊的樣式：

Alice類命名規范

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

三、BEM(Block,Element,Modifier)

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

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

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

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

3.2 BEM命名約定

一種命名規則：

塊名：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 {}

其他命名規則也有很多，例如：

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

CamelCase style
例如MyBlock__SomeElem_modName_modVal

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

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

3.3 使用BEM的網站

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

四、其他命名規范

OOCSS、SMACSS、SUITCSS、Atomic等
OOCSS:

減少對 HTML 結構的依賴

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

幾種命名規范比較：


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

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

當前我們的網站略有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)

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115439.html

相關文章

  • CSS命名規范

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

    vvpale 評論0 收藏0

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

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

    stormjun 評論0 收藏0

  • 好的 CSS 命名規范可以節約 Debug 時間

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

    wean 評論0 收藏0

  • css命名和書寫規范

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

    wua_wua2012 評論0 收藏0

  • css命名和書寫規范

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

    王笑朝 評論0 收藏0

發表評論

0條評論

includecmath

男|高級講師

TA的文章

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