1.說一說你平時寫代碼遵守的編碼規(guī)范
-
HTML語義化
語義化標(biāo)簽優(yōu)先
基于功能、內(nèi)容命名蹲蒲，盡量不使用表現(xiàn)命名
-
簡略番甩、明了、無后患
1.所有命名都使用英文小寫 推薦：`<div class="main"></div> ` 不推薦： `<div class="Main"></div> ` 2.命名用引號包裹 推薦：`<div id="header"></div> ` 不推薦： `<div id=header></div> ` 3.用中橫線連接 推薦：`<div class="mod-modal"></div> ` 不推薦： `<div class="modModal"></div> ` 4.命名體現(xiàn)功能悠鞍，不涉及表現(xiàn)樣式(顏色对室、字體、邊框咖祭、背景等) 推薦：`<div class="text-lesser"></div>` 不推薦： `<div class="light-grey"></div>`
-
常用命名
.wrap或.wrapper -- 用于外側(cè)包裹 .container或 .ct -- 包裹容器 .header -- 用于頭部 .body -- 頁面 body .footer -- 頁面尾部 aside掩宜、sidebar -- 用于側(cè)邊欄 .content -- 和header footer 對應(yīng)，用于主要內(nèi)容 .navigation -- 導(dǎo)航元素 .pagination -- 分頁 .tabs > .tab -- tab 切換 .breadcrumbs -- 導(dǎo)航列表么翰、面包屑 .dropdown -- 下拉菜單 .article -- 文章 .main -- 用于主體 .thumbnail -- 頭像牺汤，小圖像 .media -- 媒體資源 .panel -- 面板 .tooltip -- 鼠標(biāo)放置上去的提示 .popup -- 鼠標(biāo)點擊彈出的提示 .button、.btn -- 按鈕 .ad -- 廣告 .subnav -- 二級導(dǎo)航 .menu -- 菜單 .tag -- 標(biāo)簽 .message或者.notice -- 提示消息 .summary -- 摘要 .logo -- logo .search -- 搜索框 .login -- 登錄 .register -- 注冊 .username -- 用戶名 .password -- 密碼 .banner -- 廣告條 .copyright -- 版權(quán) .modal或者 .dialog -- 彈窗 var 名字 = { 狀態(tài): ['inverse','toggled','switched','original','initial','dentified','disabled','loading','pending','syncing','default], 修飾: ['dark','light','shaded','flat','ghost','maroon','pale,'intense','twisted','narrow','wide','smooth','separate','clan', 'sharp','aligned'], 元素: ['pagination','modal','popup','article','story','flash,'status','state','media','block','card','teaser','badge','lbel', 'sheet','poster','notice','record','entry','item','figue','square','module','bar','button','action','knob'], 布局: ['navigation','wrapper','inner','header','footer','asie','section','divider','content','container','panel','pane', construct','composition','spacing','frame'] } CSS書寫規(guī)范
tab 用兩個空格表示
css的 :后加個空格浩嫌， {前加個空格
每條聲明后都加上分號
換行檐迟，而不是放到一行
顏色用小寫，用縮寫, #fff
小數(shù)不用寫前綴, 0.5s -> .5s码耐；0不用加單位
盡量縮寫追迟， margin: 5px 10px 5px 10px -> margin: 5px 10px
相關(guān)參考文章
