HTML、CSS代码书写规范

1.说一说你平时写代码遵守的编码规范

• HTML语义化

  • 语义化标签优先

  • 基于功能、内容命名，尽量不使用表现命名

  • 简略、明了、无后患

    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.命名体现功能，不涉及表现样式(颜色、字体、边框、背景等)
      推荐：`<div class="text-lesser"></div>`
      不推荐： `<div class="light-grey"></div>`

• 常用命名

    .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

• 相关参考文章

• google html css编码规范

• bootstrap 编码规范

• 命名这货真难

作者：饥人谷_米弥轮
链接：https://www.jianshu.com/p/b87f9f8f8677