編程大白話之—— CSS命名規(guī)范及推薦

? ? ? ? css命名看似簡單，但常常困擾著編程人員，特別是初入編程行業(yè)的小白，在遇到?jīng)]接觸過的領(lǐng)域或大的項目時，更是無從下手，今天我就帶大家一起來熟悉一些常用或不常用、常見及不常見的一些命名規(guī)范及推薦，希望通過今天的編程大白話，讓你對CSS命名有更多的了解。

? ? ? ? 還記得剛接觸前端編程時，對于開始書寫div的時候，給它們?nèi)∶志头鸽y，從簡單的a,b,c組合或拼音開始，慢慢發(fā)現(xiàn)大家都是用一些簡短的字母表達一些常用的名字，那么各種常見的div一般都是如何取名字的呢？下面歸納總結(jié)以及借鑒了部分內(nèi)容，由于時間較急，后續(xù)注釋備注會陸續(xù)更新補充請笑納~~

常見class關(guān)鍵詞

布局類：header, footer, container, main, content, aside, page, section

包裹類：wrap, inner

區(qū)塊類：region, block, box

結(jié)構(gòu)類：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span

列表類：list, item, field

主次類：primary, secondary, sub, minor

大小類：s, m, l, xl, large, small

狀態(tài)類：active, current, checked, hover, fail, success, warn, error, on, off

導(dǎo)航類：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last

交互類：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay

星級類：rate, star

分割類：group, seperate, divider

等分類：full, half, third, quarter

表格類：table, tr, td, cell, row

圖片類：img, thumbnail, original, album, gallery

語言類：cn, en

論壇類：forum, bbs, topic, post

方向類：up, down, left, right

其他語義類：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

常用的CSS命名

頭：header　　內(nèi)容：content/container　　尾：footer　　導(dǎo)航：nav　　側(cè)欄：sidebar

欄目：column　　頁面外圍控制整體布局寬度：wrapper　　左右中：left right center

登錄條：loginbar　　標(biāo)志：logo　　廣告：banner　　頁面主體：main　　熱點：hot

新聞：news　　下載：download　　子導(dǎo)航：subnav　　菜單：menu

子菜單：submenu　　搜索：search　　友情鏈接：friendlink　　頁腳：footer

版權(quán)：copyright　　滾動：scroll　　內(nèi)容：content　　標(biāo)簽頁：tab

文章列表：list　　提示信息：msg　　小技巧：tips　　欄目標(biāo)題：title

加入：joinus　　指南：guild　　服務(wù)：service　　注冊：regsiter

狀態(tài)：status　　投票：vote　　合作伙伴：partner

? ? ? ? (1)頁面結(jié)構(gòu)

容器: container　　頁頭：header　　內(nèi)容：content/container

頁面主體：main　　頁尾：footer　　導(dǎo)航：nav

側(cè)欄：sidebar　　欄目：column　　頁面外圍控制整體布局寬度：wrapper

左右中：left right center

? (2)導(dǎo)航

導(dǎo)航：nav　　主導(dǎo)航：mainbav　　子導(dǎo)航：subnav

頂導(dǎo)航：topnav　　邊導(dǎo)航：sidebar　　左導(dǎo)航：leftsidebar

右導(dǎo)航：rightsidebar　　菜單：menu　　子菜單：submenu

標(biāo)題: title　　摘要: summary

? (3)功能

標(biāo)志：logo　　廣告：banner　　登陸：login　　登錄條：loginbar

注冊：regsiter　　搜索：search　　功能區(qū)：shop

標(biāo)題：title　　加入：joinus 　狀態(tài)：status　　按鈕：btn

滾動：scroll　　標(biāo)簽頁：tab　　文章列表：list　　提示信息：msg

當(dāng)前的: current　　小技巧：tips　　圖標(biāo): icon　　注釋：note

指南：guild　服務(wù)：service　　熱點：hot　　新聞：news

下載：download　　投票：vote　　合作伙伴：partner

友情鏈接：link　　版權(quán)：copyright

? ? ? ? 注意事項::

1.一律小寫;

2.盡量用英文;

3.不加中槓和下劃線;

4.盡量不縮寫，除非一看就明白的單詞。

? ? ? ? CSS樣式表文件命名

主要的 master.css

模塊 module.css

基本共用 base.css

布局、版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補丁 mend.css

打印 print.css

? ? ? ? 修改類名-取名規(guī)范

(1)顏色:使用顏色的名稱或者16進制代碼,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字體大小,直接使用’font+字體大小’作為名稱,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)對齊樣式,使用對齊目標(biāo)的英文名稱,如

.left { float:left; }

.bottom { float:bottom; }

(4)標(biāo)題欄樣式,使用’類別+功能’的方式命名,如

.barnews { }

.barproduct { }

? ? ? 駝峰式命名法介紹

Pascal Case 大駝峰式命名法：首字母大寫。eg：StudentInfo、UserInfo、ProductInfo

Camel Case 小駝峰式命名法：首字母小寫。eg：studentInfo、userInfo、productInfo

? ? ? ? 文件資源命名

文件名不得含有空格

文件名建議只使用小寫字母，不使用大寫字母。( 為了醒目，某些說明文件的文件名，可以使用大寫字母，比如README、LICENSE。 )

文件名包含多個單詞時，單詞之間建議使用半角的連詞線 ( - ) 分隔。

引入資源使用相對路徑，不要指定資源所帶的具體協(xié)議 ( http:,https: ) ，除非這兩者協(xié)議都不可用。

? ? ? 變量命名

命名方式 : 小駝峰式命名方法

命名規(guī)范 : 類型+對象描述的方式，如果沒有明確的類型，就可以使前綴為名詞

? ? ? ? 函數(shù)

命名方式 : 小駝峰方式 ( 構(gòu)造函數(shù)使用大駝峰命名法 )

命名規(guī)則 : 前綴為動詞

can 判斷是否可執(zhí)行某個動作 ( 權(quán)限 ) 函數(shù)返回一個布爾值。true：可執(zhí)行；false：不可執(zhí)行

has 判斷是否含有某個值 函數(shù)返回一個布爾值。true：含有此值；false：不含有此值

is 判斷是否為某個值 函數(shù)返回一個布爾值。true：為某個值；false：不為某個值

get 獲取某個值 函數(shù)返回一個非布爾值

set 設(shè)置某個值 無返回值、返回是否設(shè)置成功或者返回鏈?zhǔn)綄ο?/p>

? ? ? 常量

命名方法 : 全部大寫

命名規(guī)范 : 使用大寫字母和下劃線來組合命名，下劃線用以分割單詞。

? ? ? ? 類的成員

公共屬性和方法 : 同變量命名方式

私有屬性和方法 : 前綴為下劃線(_)后面跟公共屬性和方法一樣的命名方式

? ? ? ? 注釋規(guī)范

? ? ? ? 單行注釋 ( // )

單獨一行：//(雙斜線)與注釋文字之間保留一個空格

在代碼后面添加注釋：//(雙斜線)與代碼之間保留一個空格，并且//(雙斜線)與注釋文字之間保留一個空格。

注釋代碼：//(雙斜線)與代碼之間保留一個空格。

? ? ? ? 多行注釋 ( /* 注釋說明 */ )

若開始(/*和結(jié)束(*/)都在一行，推薦采用單行注釋

若至少三行注釋時，第一行為/*，最后行為*/，其他行以*開始，并且注釋文字與*保留一個空格。

? ? ? ? HTML規(guī)范

? ? ? ? 文檔規(guī)范

使用 HTML5 的文檔聲明類型 : <!DOCTYPE html>

DOCTYPE標(biāo)簽是一種標(biāo)準(zhǔn)通用標(biāo)記語言的文檔類型聲明，它的目的是要告訴標(biāo)準(zhǔn)通用標(biāo)記語言解析器，它應(yīng)該使用什么樣的文檔類型定義（DTD）來解析文檔。

使用文檔聲明類型的作用是為了防止開啟瀏覽器的怪異模式。

沒有DOCTYPE文檔類型聲明會開啟瀏覽器的怪異模式，瀏覽器會按照自己的解析方式渲染頁面，在不同的瀏覽器下面會有不同的樣式。

如果你的頁面添加了

? ? ? ? 腳本加載

說到j(luò)s和css的位置，大家應(yīng)該都知道js放在下面，css放在上面。

但是，如果你的項目只需要兼容ie10+或者只是在移動端訪問，那么可以使用HTML5的新屬性async，將腳本文件放在<head>內(nèi)

? ? ? 兼容老舊瀏覽器(IE9-)時：

腳本引用寫在 body 結(jié)束標(biāo)簽之前，并帶上 async 屬性。這雖然在老舊瀏覽器中不會異步加載腳本，但它只阻塞了 body 結(jié)束標(biāo)簽之前的 DOM 解析，這就大大降低了其阻塞影響。

? ? ? ? 而在現(xiàn)代瀏覽器中：

腳本將在 DOM 解析器發(fā)現(xiàn) body 尾部的 script 標(biāo)簽才進行加載，此時加載屬于異步加載，不會阻塞 CSSOM（但其執(zhí)行仍發(fā)生在 CSSOM 之后）。

? ? ? ? 語義化

我們一直都在說語義化編程，語義化編程，但是在代碼中很少有人完全使用正確的元素。使用語義化標(biāo)簽也是有理由SEO的。

關(guān)于語義化的一些建議:

在開始之前，我想推薦兩種簡單的編寫較好的CSS代碼的指導(dǎo)方針:

1、為CSS類名定義的時候，盡量使用小寫字母，如果有兩個以上的單詞，在每個單詞之間使用”-”符或單詞首字母大寫(第一個單詞除外)。如:”main-content”或”mainContent”。

2、優(yōu)化CSS代碼，僅創(chuàng)建關(guān)鍵主要的CSS類并重新為子元素使用符合HTML標(biāo)準(zhǔn)的標(biāo)簽(h1, h2, p, ul, li, blockquote,…)，例如,

<div class=“main”>

? ? <h1>…</h1>

? ? <p>…</p>

</div>

? ? ? alt標(biāo)簽不為空

<img>標(biāo)簽的 alt 屬性指定了替代文本，用于在圖像無法顯示或者用戶禁用圖像顯示時，代替圖像顯示在瀏覽器中的內(nèi)容。

假設(shè)由于下列原因用戶無法查看圖像，alt 屬性可以為圖像提供替代的信息：

網(wǎng)速太慢

src 屬性中的錯誤

瀏覽器禁用圖像

用戶使用的是屏幕閱讀器

從SEO角度考慮，瀏覽器的爬蟲爬不到圖片的內(nèi)容，所以我們要有文字告訴爬蟲圖片的內(nèi)容

? ? ? ? 結(jié)構(gòu)、表現(xiàn)、行為三者分離

盡量在文檔和模板中只包含結(jié)構(gòu)性的 HTML；而將所有表現(xiàn)代碼，移入樣式表中；將所有動作行為，移入腳本之中。

在此之外，為使得它們之間的聯(lián)系盡可能的小，在文檔和模板中也盡量少地引入樣式和腳本文件。

? ? ? ? 建議：

不使用超過一到兩張樣式表

不使用超過一到兩個腳本（學(xué)會用合并腳本）

不使用行內(nèi)樣式（<style>.no-good {}</style>）

不在元素上使用 style 屬性（<hr style="border-top: 5px solid black">）

不使用行內(nèi)腳本（<script>alert('no good')</script>）

不使用表象元素（i.e. <b>, <u>, <center>, <font>, <b>）

不使用表象 class 名（i.e. red, left, center）

HTML只關(guān)注內(nèi)容

HTML只顯示展示內(nèi)容信息

不要引入一些特定的 HTML 結(jié)構(gòu)來解決一些視覺設(shè)計問題

不要將img元素當(dāng)做專門用來做視覺設(shè)計的元素

樣式上的問題應(yīng)該使用css解決

? ? ? ? 嚴格模式

ECMAScript 5 嚴格模式可在整個腳本或獨個方法內(nèi)被激活。它對應(yīng)不同的 javascript 語境會做更加嚴格的錯誤檢查。嚴格模式也確保了 javascript 代碼更加的健壯，運行的也更加快速。

嚴格模式會阻止使用在未來很可能被引入的預(yù)留關(guān)鍵字。

你應(yīng)該在你的腳本中啟用嚴格模式，最好是在獨立的 IIFE 中應(yīng)用它。避免在你的腳本第一行使用它而導(dǎo)致你的所有腳本都啟動了嚴格模式，這有可能會引發(fā)一些第三方類庫的問題。

? ? ? 變量聲明

總是使用 var 來聲明變量。如不指定 var，變量將被隱式地聲明為全局變量

采用嚴格模式帶來的好處是，當(dāng)你手誤輸入錯誤的變量名時，它可以通過報錯信息來幫助你定位錯誤出處。

? ? ? ? js聲明提前

javascript會自動將函數(shù)作用域內(nèi)的變量和方法的定義提前（只是提前聲明，賦值還是在原處）

? ? ? ? 使用嚴格等

總是使用 === 精確的比較操作符，避免在判斷的過程中，由 JavaScript 的強制類型轉(zhuǎn)換所造成的困擾

等同== 和嚴格等===的區(qū)別

==， 兩邊值類型不同的時候，要先進行類型轉(zhuǎn)換，再比較。

===，不做類型轉(zhuǎn)換，類型不同的一定不等。

? ? ? ? ==等同操作符

- 如果兩個值具有相同類型，會進行===比較，返回===的比較值

- 如果兩個值不具有相同類型，也有可能返回true

- 如果一個值是null另一個值是undefined，返回true

- 如果一個值是string另個是number，會把string轉(zhuǎn)換成number再進行比較

- 如果一個值是true，會把它轉(zhuǎn)成1再比較，false會轉(zhuǎn)成0

false 除了和自身比較為 true 外，和 0，”” 比較也為 true

null 只和 undefined 比較時為 true， 反過來 undefined 也僅和 null 比較為 true，沒有第二個

0 除了和 false 比較為 true，還有空字符串 ”” 和空數(shù)組 []

空字符串 ” 除了和 false 比較為 true，還有一個數(shù)字 0

? ? ? ? ===操作符：

要是兩個值類型不同，返回false

要是兩個值都是number類型，并且數(shù)值相同，返回true

要是兩個值都是stirng，并且兩個值的String內(nèi)容相同，返回true

要是兩個值都是true或者都是false，返回true

要是兩個值都是指向相同的Object，Arraya或者function，返回true

要是兩個值都是null或者都是undefined，返回true

? ? ? ? 真假判斷

js中以下內(nèi)容為假：

false

null

undefined

0

” (空字符串)

NaN

? ? ? ? ? 屬性格式

為了保證一致性和可擴展性，每個聲明應(yīng)該用分號結(jié)束，每個聲明換行。

屬性名的冒號后使用一個空格。出于一致性的原因，

屬性和值（但屬性和冒號之間沒有空格）的之間始終使用一個空格。

每個選擇器和屬性聲明總是使用新的一行。

屬性選擇器或?qū)傩灾涤秒p引號（””），而不是單引號（”）括起來。

URI值（url()）不要使用引號。

? ? ? ?