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
相关参考文章
