編碼規范

• 命名技巧

  • 語義化

    1. 語義化標簽優先
    2. 基于功能命名、基于內容命名、基于表現命名
    3. 簡略、明了、無后患

  • 命名范例

    1. 所有命名都使用英文小寫
    2. 命名用引號包裹
    3. 用中橫線鏈接
    4. 命名體現功能，不涉及表現樣式（顏色、字體、邊框、背景等）

    命名	場景
    .wrap 或 .wrapper	用于外側包裹
    .container 或 .ct	包裹容器
    .header	用于頭部
    .body	頁面body
    .footer	頁面尾部
    aside、sidebar	用于側邊欄
    .content	和header、footer 對應，用于主要內容
    .navigation	導航元素
    .pagination	分頁
    .tab > .tab	tab切換
    .breadcrumbs	導航列表、面包屑
    .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	彈窗

CSS規范

• 書寫規范
  1. tab用兩個空格表示
  2. css的:后加個空格，{前加個空格
  3. 每條聲明后都加上分號
  4. 換行，不要放到一行
  5. 顏色用小寫，用縮寫#fff
  6. 小數不用寫前綴，0.5s -> .5s，0不用加單位
  7. 盡量縮寫，margin: 5px 10px 5px 10px; -> margin: 5px 10px;

實現垂直居中的多種方法

1. table自帶功能

     <table>
       <tr>
         <td>
           我能實現垂直居中我能實現垂直居中我能實現垂直居中我能實現垂直居中我能實現垂直居中我能實現垂直居中我能實現垂直居中我能實現垂直居中我能實現垂直居中我能實現垂直居中我能實現垂直居中我能實現垂直居中我能實現垂直居中我能實現垂直居中我能實現垂直居中
         </td>
       </tr>
     </table>
   

2. 100%高度的 after before 加上 inline-block
3. div模擬table
4. margin-top: -50%;
5. translate -50%
6. absolute margin auto
7. flex