说一说你平时写代码遵守的编码规范
每个程序员都会有自己的编码习惯，但是几乎每个项目，各个公司都会有自己的编码规范，开发软件是一个团队活动，不能搞个人英雄主义，这就要求团队成员有一个统一的编码规范了。
那么我们为什么要遵守规范？它有什么作用呢？
- 提高代码可读性
- 统一全局，加强团队合作
- 减少维护成本
- 规范的代码有助于审查代码
- 养成好习惯，有助于程序员个人能力的成长
理解了其重要性，现在我们来谈谈有哪些编码规范
HTML规范
- HTML标签语义化，减少无意义的标签
- 标签名小写，正确闭合标签
- 使用HTML5的doctype来启用标准模式，<!DOCTYPE html>
- 在html标签上设置正确的lang属性，一般是<html lang="zh-CN">
- 属性值必须用引号包围
- 在meta里声明字符编码为utf-8
- 遵守正交原则，写HTML时不要想CSS的写法
- 使用外链的CSS和JavaScripe，属性type可以省略
- 尽量用alt标签去描述图片
- 习惯性书写注释，方便日后维护
- 布尔（boolean）型属性不用赋值
- 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;
- 声明顺序遵循以下
1.Positioning 位置属性,比如position / top / right / bottom / left / float / display / overflow等
2.Box model 盒模型属性，比如border / margin / padding / width / height 等
3.Typographic 文字相关属性，比如font / line-height / text-align / word-wrap等
- Visual 视觉相关属性，比如background / color / transition / list-style 等
eg:
.sidebar {
/* formatting model: positioning schemes / offsets / z-indexes / display / ... */
position: absolute;
top: 50px;
left: 0;
overflow-x: hidden;
/* box model: sizes / margins / paddings / borders / ... */
width: 200px;
padding: 5px;
border: 1px solid #ddd;
/* typographic: font / aligns / text styles / ... */
font-size: 14px;
line-height: 20px;
/* visual: colors / shadows / gradients / ... */
background: #f5f5f5;
color: #333;
}
- class命名的语义化
- 语义化优先
- 基于功能命名、基于内容命名、基于表现命名
- 简略、明了、无后患
- 编程过程中我们时常被class命名所困扰，现在来列举一些常用的命名
- 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-- 弹窗
还有其他的一些，有需要请自行查阅
状态: [ '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' ]}
以下为参考链接:
bootstrap
segmentfault
jirengu
垂直居中有几种实现方式，给出代码范例
- absolute+margin,需要固定高宽
- absolute+translate
- flex
- 伪元素+vertical-align+text-align
- tabel-cell+vertical-align+text-align
有一个需要值得注意的是，1、2作用的都是当前元素本身，使其水平垂直居中，3、4、5作用的都是当前元素的子元素，使子元素在当前元素内水平元素居中，注意作用对象
