編程大白話之—— 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解決
? ? ? ? 嚴(yán)格模式
ECMAScript 5 嚴(yán)格模式可在整個腳本或獨個方法內(nèi)被激活埃篓。它對應(yīng)不同的 javascript 語境會做更加嚴(yán)格的錯誤檢查处坪。嚴(yán)格模式也確保了 javascript 代碼更加的健壯，運行的也更加快速架专。
嚴(yán)格模式會阻止使用在未來很可能被引入的預(yù)留關(guān)鍵字同窘。
你應(yīng)該在你的腳本中啟用嚴(yán)格模式，最好是在獨立的 IIFE 中應(yīng)用它部脚。避免在你的腳本第一行使用它而導(dǎo)致你的所有腳本都啟動了嚴(yán)格模式想邦，這有可能會引發(fā)一些第三方類庫的問題。
? ? ? 變量聲明
總是使用 var 來聲明變量委刘。如不指定 var丧没，變量將被隱式地聲明為全局變量
采用嚴(yán)格模式帶來的好處是，當(dāng)你手誤輸入錯誤的變量名時锡移，它可以通過報錯信息來幫助你定位錯誤出處骂铁。
? ? ? ? js聲明提前
javascript會自動將函數(shù)作用域內(nèi)的變量和方法的定義提前（只是提前聲明，賦值還是在原處）
? ? ? ? 使用嚴(yán)格等
總是使用 === 精確的比較操作符罩抗，避免在判斷的過程中，由 JavaScript 的強制類型轉(zhuǎn)換所造成的困擾
等同== 和嚴(yá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()）不要使用引號遣钳。
? ? ? ?
