每個(gè)程序員都會(huì)有自己的編碼習(xí)慣厕九，但是幾乎每個(gè)項(xiàng)目自晰，各個(gè)公司都會(huì)有自己的編碼規(guī)范，開(kāi)發(fā)軟件是一個(gè)團(tuán)隊(duì)活動(dòng)浙宜，不能搞個(gè)人英雄主義官辽，這就要求團(tuán)隊(duì)成員有一個(gè)統(tǒng)一的編碼規(guī)范了。
編碼規(guī)范有什么作用呢粟瞬？
- 提高代碼可讀性
- 統(tǒng)一全局同仆，加強(qiáng)團(tuán)隊(duì)合作
- 減少維護(hù)成本
- 規(guī)范的代碼有助于審查代碼
- 養(yǎng)成好習(xí)慣，有助于程序員個(gè)人能力的成長(zhǎng)
下面進(jìn)入正題裙品，開(kāi)始談?wù)劸幋a規(guī)范
HTML規(guī)范
-
HTML標(biāo)簽語(yǔ)義化俗批，減少無(wú)意義的標(biāo)簽 - 標(biāo)簽名小寫(xiě)，正確閉合標(biāo)簽
- 使用
HTML5的doctype來(lái)啟用標(biāo)準(zhǔn)模式市怎，<!DOCTYPE html> - 在
html標(biāo)簽上設(shè)置正確的lang屬性岁忘，一般是<html lang="zh-CN"> - 屬性值必須用雙引號(hào)包圍
- 在
meta里聲明字符編碼為utf-8 - 遵守正交原則，寫(xiě)HTML時(shí)不要想CSS的寫(xiě)法
- 使用外鏈的CSS和JavaScripe区匠，屬性
type可以省略 - 盡量用
alt標(biāo)簽去描述圖片 - 習(xí)慣性書(shū)寫(xiě)注釋?zhuān)奖闳蘸缶S護(hù)
- IE 支持通過(guò)特定的
<meta>標(biāo)簽來(lái)確定繪制當(dāng)前頁(yè)面所應(yīng)該采用的 IE 版本干像。除非有強(qiáng)烈的特殊需求帅腌，否則最好是設(shè)置為 edge mode，從而通知 IE 采用其所支持的最新的模式麻汰。如<meta http-equiv="X-UA-Compatible" content="IE=Edge"> - HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列速客，確保代碼的易讀性。
- class
- id五鲫，name
- data-*
- src,溺职，for， type位喂， href
- title浪耘，alt
- aria-*，role
CSS規(guī)范
- tab縮進(jìn)用兩個(gè)空格代替
- css的
:后加個(gè)空格忆某，{前加個(gè)空格 - 每條聲明后都加分號(hào)
; - 換行点待，而不要放在同一行
- 顏色用小寫(xiě)，能縮寫(xiě)就縮寫(xiě)弃舒，如#fff
- 小數(shù)不用寫(xiě)前綴癞埠，
0.5s可寫(xiě)成.5s，0不用加單位 - 盡量縮寫(xiě)聋呢，如
margin:5px 10px 5px 10px;可寫(xiě)成margin:5px 10px; - 縮寫(xiě)屬性苗踪，如
font: 16px/1.5 palatino, georgia, serif; - 聲明順序遵循以下
- 結(jié)構(gòu)性屬性
display、position削锰、overflow通铲、float、margin器贩、padding - 表現(xiàn)性屬性
width颅夺、height、background蛹稍、border吧黄、font
- 結(jié)構(gòu)性屬性
class命名的語(yǔ)義化
- 語(yǔ)義化優(yōu)先
- 基于功能命名、基于內(nèi)容命名唆姐、基于表現(xiàn)命名
- 簡(jiǎn)略拗慨、明了、無(wú)后患
編程過(guò)程中我們時(shí)常被class命名所困擾奉芦，現(xiàn)在來(lái)列舉一些常用的命名
常用命名1：
- .wrap或.wrapper-- 用于外側(cè)包裹
- .container或 .ct -- 包裹容器
- .header-- 用于頭部
- .body -- 頁(yè)面 body
- .footer-- 頁(yè)面尾部
- aside赵抢、sidebar -- 用于側(cè)邊欄
- content -- 和header footer 對(duì)應(yīng)，用于主要內(nèi)容
- .navigation-- 導(dǎo)航元素
- .pagination -- 分頁(yè)
常用命名2：
- .tabs > .tab-- tab 切換
- .breadcrumbs-- 導(dǎo)航列表声功、面包屑
- .dropdown-- 下拉菜單
- .article -- 文章
- .main-- 用于主體
- .thumbnail-- 頭像烦却，小圖像
- .media-- 媒體資源
- .panel-- 面板
- .tooltip-- 鼠標(biāo)放置上去的提示
- .popup-- 鼠標(biāo)點(diǎn)擊彈出的提示
常用命名3：
- .button、.btn-- 按鈕
- .ad-- 廣告
- .subnav-- 二級(jí)導(dǎo)航
- .menu-- 菜單
- .tag-- 標(biāo)簽
- .message或者.notice-- 提示消息
- .summary-- 摘要
- .logo-- logo
- .search-- 搜索框
- .login-- 登錄
- .register-- 注冊(cè)
- .username-- 用戶(hù)名
- .password-- 密碼
- .banner -- 廣告條
- .copyright -- 版權(quán)
- .modal或者 .dialog-- 彈窗
常用命名4：
狀態(tài): [ 'inverse', 'toggled', 'switched', 'original', 'initial', 'identified', 'disabled', 'loading', 'pending', 'syncing', 'default' ],
修飾: [ 'dark', 'light', 'shaded', 'flat', 'ghost', 'maroon', 'pale', 'intense', 'twisted', 'narrow', 'wide', 'smooth', 'separate', 'clean', 'sharp', 'aligned' ],
元素: [ 'pagination', 'modal', 'popup', 'article', 'story', 'flash', 'status', 'state', 'media', 'block', 'card', 'teaser', 'badge', 'label', 'sheet', 'poster', 'notice', 'record', 'entry', 'item', 'figure', 'square', 'module', 'bar', 'button', 'action', 'knob' ],
布局: [ 'navigation', 'wrapper', 'inner', 'header', 'footer', 'aside', 'section', 'divider', 'content', 'container', 'panel', 'pane', 'construct', 'composition', 'spacing', 'frame' ]}
