每个程序员都会有自己的编码习惯，但是几乎每个项目，各个公司都会有自己的编码规范，开发软件是一个团队活动，不能搞个人英雄主义，这就要求团队成员有一个统一的编码规范了。
编码规范有什么作用呢？
- 提高代码可读性
- 统一全局，加强团队合作
- 减少维护成本
- 规范的代码有助于审查代码
- 养成好习惯，有助于程序员个人能力的成长
下面进入正题，开始谈谈编码规范
HTML规范
-
HTML标签语义化，减少无意义的标签 - 标签名小写，正确闭合标签
- 使用
HTML5的doctype来启用标准模式，<!DOCTYPE html> - 在
html标签上设置正确的lang属性，一般是<html lang="zh-CN"> - 属性值必须用双引号包围
- 在
meta里声明字符编码为utf-8 - 遵守正交原则，写HTML时不要想CSS的写法
- 使用外链的CSS和JavaScripe，属性
type可以省略 - 尽量用
alt标签去描述图片 - 习惯性书写注释，方便日后维护
- IE 支持通过特定的
<meta>标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。如<meta http-equiv="X-UA-Compatible" content="IE=Edge"> - HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
- class
- id，name
- data-*
- src,，for， type， href
- title，alt
- aria-*，role
CSS规范
- tab缩进用两个空格代替
- css的
:后加个空格，{前加个空格 - 每条声明后都加分号
; - 换行，而不要放在同一行
- 颜色用小写，能缩写就缩写，如#fff
- 小数不用写前缀，
0.5s可写成.5s，0不用加单位 - 尽量缩写，如
margin:5px 10px 5px 10px;可写成margin:5px 10px; - 缩写属性，如
font: 16px/1.5 palatino, georgia, serif; - 声明顺序遵循以下
- 结构性属性
display、position、overflow、float、margin、padding - 表现性属性
width、height、background、border、font
- 结构性属性
class命名的语义化
- 语义化优先
- 基于功能命名、基于内容命名、基于表现命名
- 简略、明了、无后患
编程过程中我们时常被class命名所困扰，现在来列举一些常用的命名
常用命名1：
- .wrap或.wrapper-- 用于外侧包裹
- .container或 .ct -- 包裹容器
- .header-- 用于头部
- .body -- 页面 body
- .footer-- 页面尾部
- aside、sidebar -- 用于侧边栏
- content -- 和header footer 对应，用于主要内容
- .navigation-- 导航元素
- .pagination -- 分页
常用命名2：
- .tabs > .tab-- tab 切换
- .breadcrumbs-- 导航列表、面包屑
- .dropdown-- 下拉菜单
- .article -- 文章
- .main-- 用于主体
- .thumbnail-- 头像，小图像
- .media-- 媒体资源
- .panel-- 面板
- .tooltip-- 鼠标放置上去的提示
- .popup-- 鼠标点击弹出的提示
常用命名3：
- .button、.btn-- 按钮
- .ad-- 广告
- .subnav-- 二级导航
- .menu-- 菜单
- .tag-- 标签
- .message或者.notice-- 提示消息
- .summary-- 摘要
- .logo-- logo
- .search-- 搜索框
- .login-- 登录
- .register-- 注册
- .username-- 用户名
- .password-- 密码
- .banner -- 广告条
- .copyright -- 版权
- .modal或者 .dialog-- 弹窗
常用命名4：
状态: [ 'inverse', 'toggled', 'switched', 'original', 'initial', 'identified', 'disabled', 'loading', 'pending', 'syncing', 'default' ],
修饰: [ 'dark', 'light', 'shaded', 'flat', 'ghost', 'maroon', 'pale', 'intense', 'twisted', 'narrow', 'wide', 'smooth', 'separate', 'clean', 'sharp', 'aligned' ],
元素: [ 'pagination', 'modal', 'popup', 'article', 'story', 'flash', 'status', 'state', 'media', 'block', 'card', 'teaser', 'badge', 'label', 'sheet', 'poster', 'notice', 'record', 'entry', 'item', 'figure', 'square', 'module', 'bar', 'button', 'action', 'knob' ],
布局: [ 'navigation', 'wrapper', 'inner', 'header', 'footer', 'aside', 'section', 'divider', 'content', 'container', 'panel', 'pane', 'construct', 'composition', 'spacing', 'frame' ]}
网友评论