html和css编码规范内容一、html规范二、css规范三、注意事项：四、常用的命名规则五、css样式表文件命名六、文件命名规则一、html规范：1.代码规范页面的第一行添加标准模式声明 代码缩进：tab键设置四个空格（通常在软件右下角设置相应空格大小）html中除了开头的doc和 'utf-8'或者head里特殊情况可以大写外，其他都为小写，css类都为小写建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言 lang=zh-cn不同doctype在不同浏览器下会触发不同的渲染模式 html lang=zh-cn> head> meta charset=utf-8> meta http-equiv=x-ua-compatible content=ie=edge> head> ....html>
不要使用@import 
与 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：使用多个 元素通过 sass 或 less 类似的 css 预处理器将多个 css 文件编译为一个文件通过 rails、jekyll 或其他系统中提供过 css 文件合并功能
引入 css 和 javascript 文件根据html5规范, 通常在引入css和js时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值
2.注释
6.布尔型属性布尔型属性可以在声明时不赋值。xhtml 规范要求为其赋值，但是 html5 规范不需要。换句话说，不用赋值。 1
二、css规范1、语法1.1、缩进[强制]使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。
1.2、空格[强制]为了代码易读性，每个声明块的左花括号前添加一个空格[强制]每条声明语句的 : 后应该插一个空格[强制]属性多值每个逗号后应该插入空格 eg:box-shadow,border-image[强制]不要在rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代,替 -0.5px）1.3、选择器[强制]为选择器分组时，将单独的选择器单独存放在一行 eg:tr,td{}[强制] >、+、~ 选择器的两边各保留一个空格。[强制]为选择器中的属性添加双引号 不允许单引号
例如，input[type=text]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。[强制] 如无必要，不得为 id、class 选择器添加类型选择器进行限定。[建议] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
eg:
/* good */ #error, .danger-message { font-color: #c00;}#username input {}.comment .avatar {}/* bad */dialog#error,p.danger-message { font-color: #c00;}.page .header .login #username input {}.comment div * {}
1.4、行[强制]每行不得超过 120 个字符，除非单行不可分割。[强制]声明块右花括号应当成行[建议] 对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组。
eg:background:url(....) 此处应有换行 no-repeat;1.5、属性[强制] 属性定义必须另起一行。[强制] 属性定义后必须以分号结尾。即每条声明应单独成行，以分号结尾[建议] 在可以使用缩写的情况下，尽量使用属性缩写。
eg:font: 12px/1.5 arial, sans-serif;1.6、前缀[强制] 带私有前缀的属性由长到短排列，按冒号位置对齐。[建议] 可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。1.7、简写十六进制值应该全部小写,尽可能简写 eg:#fff.避免为 0 值指定单位
例如，用 margin: 0; 代替 margin: 0px;/* bad css */main>nav { padding: 10px;}.selector, .selector-secondary, .selector[type=text] { padding:15px; margin:0px 0px 15px; background-color:rgba(0, 0, 0, 0.5); box-shadow:0px 1px 2px #ccc,inset 0 1px 0 #ffffff } .selector, .selector-secondary, .selector[type=text] {padding:15px;margin:0px 0px 15px;}/* good css */ main > nav { padding: 10px;}.selector, .selector-secondary, .selector[type=text] { padding: 15px; margin-bottom: 15px; background-color: rgba(0,0,0,.5); background: transparent url(averyveryverylongurlisplacedhere) no-repeat 0 0; box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;}
2.注释/* 注释内容 */
注意：*后不要留空格，若留空格，其他注释全加空格（方便后续程序开发）换句话说，注释要全局统一eg: /* s 注释内容 */
为书写规范，最好每一个需要注释都需要开头和结尾，减少后续麻烦和错误。不要翻行。css、js注释亦然。
/* e 注释内容 */
3.命名规范1.应用 英文缩写命名法，杜绝用中文拼音或者中文拼音缩写（这是因为英文具有简易性，必要时可上网搜索国际缩写英文）2. 只能出现小写字符或者中划线（破折号符），不用下划线，驼峰命名法。
eg: .btn 或者 .btn-danger3.避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思4.class 名称应当尽可能短，并且意义明确。使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。基于最近的父 class 或基本（base） class 作为新 class 的前缀。使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 css 文件中。在为 sass 和 less 变量命名是也可以参考上面列出的各项规范。
/* bad example */.t { ... }.red { ... }.header { ... }/* good example */.tweet { ... }.important { ... }.tweet-header { ... }
4.选择器对于通用元素使用 class ，这样利于渲染性能的优化。对于经常出现的组件，避免使用属性选择器（例如，[class=...]）。浏览器的性能会受到这些因素的影响。选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。/* bad example */span { ... }.page-container #stream .stream-item .tweet .tweet-header .username { ... }.avatar { ... }/* good example */.avatar { ... }.tweet-header .username { ... } //不要超过3个.tweet .avatar { ... }
5.声明顺序5.1. 相关的属性声明应当归为一组，并按照下面的顺序排列：* positioning* box model* typographic* visual
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。 eg:
.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;}
5.2.设置盒子模型 - 是否脱离标准（子絶父相）- 其他属性注意兼容性写法（纯属个人习惯）
盒子模型1.设置是否需要浮动元素 或者 转块(float,display)2.设置盒子边框、背景颜色、字体颜色（border,background，font,color）3.设置宽高大小（width,height）4.文字垂直居中（line-hight,text-align,vertical-align等等）5.设置margin、padding值标准流（子絶父相）position ：relative、absolute、static、fixedleft/top/right/bottomz-index其他属性opcaity、cursor等css3新属性transition、transform、animation等每个范围可由首字母开头为排序：
eg:盒子模型中的第2条中，可由background,border,color等首字母为先排序; 但有些例外，如position肯定排先，后定义left等方向位属性
ps:需要用到媒体查询，将媒体查询放在尽可能相关规则的附近
eg:
.declaration-order { display: block; float: right; background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px; color: #333; font: normal 13px helvetica neue, sans-serif; width: 100px; height: 100px; text-align: center; line-height: 100px; margin: 0 auto; padding: 10px 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; opacity: 1; transtion: all .5s ease 0s; animation: name initial 2s;}@keyframes name{ 0%{} 100{} /// from{} to{}}@media screen and (min-width) and (max-width){ and左右之间要留空格}
5.3.按照首字母排列顺序编写
注意事项：1. 尽量不使用 !important 声明。[建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。2.媒体查询（media query）的位置将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。3.带前缀的属性当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。
在 textmate 中，使用 text → edit each line in selection (⌃⌘a)。在 sublime text 2 中，使用 selection → add previous line (⌃⇧↑) 和 selection → add next line (⌃⇧↓)。
prefixed properties */ lector { webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15);
4.单行规则声明对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行 (能仔细分析，检测错误)5.简写形式的属性声明在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：paddingmarginfontbackgroundborderborder-radius/* bad example */.element { margin: 0 0 10px; background: red; background: url(image.jpg); border-radius: 3px 3px 0 0;}/* good example */.element { margin-bottom: 10px; background-color: red; background-image: url(image.jpg); border-top-left-radius: 3px; border-top-right-radius: 3px;}
6.less 和 sass 中的嵌套避免非必要的嵌套。这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。// without nesting.table > thead > tr > th { … }.table > thead > tr > td { … }// with nesting.table > thead > tr { > th { … } > td { … }}
了解更多请点击，本文更多参照此文章
常用的命名规则class的命名用中划线 ' - '头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体佈局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签：tags文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guide服务：service注册：regsiter状态：status投票：vote合作伙伴：partner
id的命名:用下划线 ' _ '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
css样式表文件命名主要的 master.css模块 module.css基本共用 base.css布局、版面 layout.css主题 themes.css专栏 columns.css文字 font.css表单 forms.css补丁 mend.css打印 print.css
文件命名规则项目命名 全部采用小写方式，以下划线分隔 例：my_project_name 目录命名
参照项目命名规则；
有复数结构时，要采用复数命名法。
例：scripts, styles, images, data_models js文件命名
参照项目命名规则。
例：account_model.js css, scss文件命名
参照项目命名规则。
例：retina_sprites.scss html文件命名
参照项目命名规则。
例：error_report.html