HTML与CSS规范

2016-12-31

摘要：入坑前端后，css 书写向来随意——没人要求，自己也不在意。最近看了篇文章如何写出优雅的css代码？，感觉是时候规范一下了（挑部分常用的记下）。详细点这里NEC

HTML

1.注释方法
开始注释：（文案两头空格）
结束注释：（文案前加“/”符号，类似标签的闭合）
允许只有开始注释
单行代码的注释也保持同行，两端空格
多行代码的注释起始和结尾都另起一行并左缩进对齐。
2.根据HTML5规范，在引入CSS和JavaScript文件时一般不需要指定type属性，因为text/css和text/javascript分别是它们的默认值
3.属性顺序
class
id, name
data-
src, for, type, href
title, alt
aria-, role
4.对于属性的定义，确保全部使用双引号，绝不要使用单引号
5.用两个空格来代替制表符tab——这是唯一能保证在所有环境下获得一致展现的方法(早已习惯了tab键)

CSS

1.语法规范
为选择器分组时，将单独的选择器单独放在一行
长名称或词组可以使用中横线-来为选择器命名
为选择器中的属性添加双引号
在每个声明块的左花括号前添加一个空格
声明块的右花括号应当单独成行
每条声明语句的冒号:后应该插入一个空格
为了获得更准确的错误报告，每条声明都应该独占一行（只包含一条声明的要放在同一行）
所有声明语句都应当以分号结尾
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格
不要在 rgb()、rgba()、hsl()、hsla() 或 rect( )值的内部的逗号后面插入空格
合理使用 CSS 缩写属性
对于属性值或颜色参数，省略小于1的小数前面的0
十六进制值应该全部小写并尽量使用简写形式
避免为0值指定单位

.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

2.声明顺序
先是位置布局，然后是盒模型大小，接着是文字属性，再是背景边框，其他排最后

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

使用特定厂商的带有前缀的属性时，要先写带有浏览器私有标志的属性，每个属性的值在垂直方向对齐

.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

将媒体查询放在尽可能相关规则的附近（防止被遗忘）

3.常用的CSS命名规则
1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center
2)导航
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标籤页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright

4、CSS样式表文件命名
主要的：master.css
模块：module.css
基本共用：base.css
布局、版面：layout.css
主题：themes.css
专栏：columns.css
文字：font.css
表单：forms.css
补丁：mend.css
打印：print.css