HTML、CSS程式碼書寫規範

1.說一說你平時寫程式碼遵守的編碼規範

• HTML語義化

  • 語義化標籤優先

  • 基於功能、內容命名，儘量不使用表現命名

  • 簡略、明瞭、無後患

    1.所有命名都使用英文小寫
      推薦：`
     `
      不推薦： `
     `
    2.命名用引號包裹
      推薦：`
     `
      不推薦： `
     `
    3.用中橫線連線
      推薦：`
     `
      不推薦： `
     `
    4.命名體現功能，不涉及表現樣式(顏色、字型、邊框、背景等)
      推薦：`
    `
      不推薦： `
    `

• 常用命名

    .wrap或.wrapper -- 用於外側包裹
    .container或 .ct -- 包裹容器
    .header -- 用於頭部
    .body -- 頁面 body
    .footer -- 頁面尾部
    aside、sidebar -- 用於側邊欄
    .content -- 和header footer 對應，用於主要內容
    .navigation -- 導航元素
    .pagination -- 分頁
    .tabs > .tab -- tab 切換
    .breadcrumbs -- 導航列表、麵包屑
    .dropdown -- 下拉選單
    .article -- 文章
    .main -- 用於主體
    .thumbnail -- 頭像，小影像
    .media -- 媒體資源
    .panel -- 皮膚
    .tooltip -- 滑鼠放置上去的提示
    .popup -- 滑鼠點選彈出的提示
    .button、.btn -- 按鈕
    .ad -- 廣告
    .subnav -- 二級導航
    .menu -- 選單
    .tag -- 標籤
    .message或者.notice -- 提示訊息
    .summary -- 摘要
    .logo -- logo
    .search -- 搜尋框
    .login -- 登入
    .register -- 註冊
    .username -- 使用者名稱
    .password -- 密碼
    .banner -- 廣告條
    .copyright -- 版權
    .modal或者 .dialog -- 彈窗var 名字 = {
  狀態: ['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書寫規範

• tab 用兩個空格表示

• css的 :後加個空格， {前加個空格

• 每條宣告後都加上分號

• 換行，而不是放到一行

• 顏色用小寫，用縮寫, #fff

• 小數不用寫字首, 0.5s -> .5s；0不用加單位

• 儘量縮寫， margin: 5px 10px 5px 10px -> margin: 5px 10px

• 相關參考文章

作者：飢人谷_米彌輪
連結：