css基础知识六(编码规范)

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

每个程序员都会有自己的编码习惯，但是几乎每个项目，各个公司都会有自己的编码规范，开发软件是一个团队活动，不能搞个人英雄主义，这就要求团队成员有一个统一的编码规范了。
那么我们为什么要遵守规范？它有什么作用呢？

提高代码可读性
统一全局，加强团队合作
减少维护成本
规范的代码有助于审查代码
养成好习惯，有助于程序员个人能力的成长

理解了其重要性，现在我们来谈谈有哪些编码规范

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

垂直居中有几种实现方式，给出代码范例

有一个需要值得注意的是，1、2作用的都是当前元素本身，使其水平垂直居中，3、4、5作用的都是当前元素的子元素，使子元素在当前元素内水平元素居中，注意作用对象

实现如下效果，每种效果都只使用一个html 标签来实现效果范例

demo1
demo2
demo3