CSS綜合

  • 說一說你平時寫代碼遵守的編碼規范
    常見的編碼規范
    語義化:
    1.語義化標簽優先
    2.基于功能命名、基于內容命名、基于表現命名
    3.簡略、明了、無后患
    命名規范:
    1.所有命名都使用英文小寫
    2.命名用引號包裹
    3.用中橫線“-”連接
    4.命名體現功能,不涉及表現樣式(顏色、字體、邊框、背景等)
    書寫規范:
    1.tab 用兩個空格表示
    2.css的 :后加個空格, {前加個空格
    3.每條聲明后都加上分號
    4.換行,而不是放到一行
    5.顏色用小寫,用縮寫, #fff
    6.小數不用寫前綴, 0.5s -> .5s;0不用加單位
    7.盡量縮寫, margin: 5px 10px 5px 10px -> margin: 5px 10px
    8.定義相同css屬性的選擇器逗號隔開,縱向排列
    9.每每相鄰選擇器之間空一行
    10.HTML 屬性應當按照以下給出的順序(class>id,name>data->src,for,type,href,value>title,alt>role,aria-)依次排列,確保代碼的易讀性。
    11.相關的屬性聲明應當歸為一組,并按照下面的順序排列:
    positioning: position top right bottom left z-index
    box model: display float width height
    typographic: font line-height color txet-align
    visual: background-color border border-radius
    misc: opacity
    12.不要使用@import
    13.不要濫用簡寫,例如background-color:red中color不要簡寫
    我遵守的編碼規范
    語義化
    1.所有命名都使用英文小寫
    2.用中橫線“-”連接
    3.命名體現功能,不涉及表現樣式(顏色、字體、邊框、背景等)
    書寫規范
    1.tab 用兩個空格表示
    2.css的 :后加個空格, {前加個空格
    3.每條聲明后都加上分號
    4.換行,而不是放到一行
    5.顏色用小寫,用縮寫, #fff
    6.盡量縮寫, margin: 5px 10px 5px 10px -> margin: 5px 10px
    常見命名:

1 .wrap或.wrapper -- 用于外側包裹
2 .container或 .ct -- 包裹容器
3 .header -- 用于頭部
4 .body -- 頁面 body
5 .footer -- 頁面尾部
6 aside、sidebar -- 用于側邊欄
7 .content -- 和header footer 對應,用于主要內容
8 .navigation -- 導航元素
9 .pagination -- 分頁
10 .tabs > .tab -- tab 切換
11 .breadcrumbs -- 導航列表、面包屑
12 .dropdown -- 下拉菜單
13 .article -- 文章
14 .main -- 用于主體
15 .thumbnail -- 頭像,小圖像
16 .media -- 媒體資源
17 .panel -- 面板
18 .tooltip -- 鼠標放置上去的提示
19 .popup -- 鼠標點擊彈出的提示
20 .button、.btn -- 按鈕
21 .ad -- 廣告
22 .subnav -- 二級導航
23 .menu -- 菜單
24 .tag -- 標簽
25 .message或者.notice -- 提示消息
26 .summary -- 摘要
27 .logo -- logo
28 .search -- 搜索框
29 .login -- 登錄
30 .register -- 注冊
31 .username -- 用戶名
32 .password -- 密碼
33 .banner -- 廣告條
34 .copyright -- 版權
35 .modal或者 .dialog -- 彈窗

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 淺談編碼規范 命名技巧 語義化標簽優先 基于功能命名、基于內容命名、基于表現命名 簡略、明了(翻譯成英文) 所有命...
    饑人谷_秦勤閱讀 369評論 0 0
  • 編碼規范 命名技巧語義化語義化標簽優先基于功能命名、基于內容命名、基于表現命名簡略、明了、無后患命名范例所有命名都...
    cccccccc7355608閱讀 459評論 0 0
  • 1.說一說你平時寫代碼遵守的編碼規范 語義化·語義化標簽優先·基于功能命名、基于內容命名、基于表現命名·簡略、明了...
    FLYSASA閱讀 246評論 0 0
  • 1、說一說你平時寫代碼遵守的編碼規范 關于命名:語義化標簽優先命名體現功能,不涉及表現樣式(顏色、字體、邊框、背景...
    饑人谷_關飛閱讀 398評論 0 0
  • 1.說一說你平時寫代碼遵守的編碼規范 命名技巧語義化標簽優先基于功能命名,基于內容命名,基于表現命名簡明、明了、無...
    basd1995閱讀 269評論 0 0