前端编码规范

一般规范

• 减号（-）用来分隔文件名。
• 文件命名总是以字母开头而不是数字。
• 不要指定引入资源所带的具体协议。
• 一次缩进两个空格。

HTML规范

• 不要省略可选标签。
• 不要将无内容元素的标签闭合。
• 出于性能考虑，脚本异步加载很关键。
• 脚本引用写在 body 结束标签之前，并带上 async 属性。
• 用上alt（备选文本）属性。
• 不使用行内样式和行内脚本。
• 不在元素上使用 style 属性。
• 不要将 img 元素当做专门用来做视觉设计的元素。
• 省略样式表与脚本上的 type 属性。
• 通常一个比较好的做法是将页面内所有的头部标题元素都加上 ID. 这样做，页面 URL 的 hash 中带上对应的 ID 名称，即形成描点，方便跳转至对应元素所处位置。
• 在每一个块状元素，列表元素和表格元素后，加上一新空白行，并对其子孙元素进行缩进。
• 内联元素写在一行内。
• 块状元素还有列表和表格要另起一行。
• 使用双引号(“”) 而不是单引号(”) 。

CSS编码规范

• 首选具体和反映元素目的的名称作为ID或class(类)名。
• 一般情况下ID不应该被应用于样式。
• CSS选择器中避免标签名。
• 尽可能的精确，总是考虑直接子选择器而不是后代选择器。
• 尽可能地使用缩写属性。
• 不要在0值后面使用单位，除非有值。
• 在可能的情况下，使用3个字符的十六进制表示法，且始终使用小写的十六进制数字。
• 使用连字符（中划线）分隔ID和Class（类）名中的单词。
• 避免用户代理检测以及CSS“hacks”。
• 声明顺序：
  • 结构性属性：
    display
    position, left, top, right etc.
    overflow, float, clear etc.
    margin, padding
  • 表现性属性：
    background, border etc.
    font, text
• 每个声明应该用分号结束，每个声明换行。
• 属性名的冒号后使用一个空格。
• 每个选择器和属性声明总是使用新的一行。
• 规则之间始终有一个空行（双换行符）分隔。
• 属性选择器或属性值用双引号（””），而不是单引号（”）括起来。
• URI值（url()）不要使用引号。
• 嵌套选择器和CSS属性之间空一行。
• 嵌套顺序：
  • 当前选择器的样式属性
  • 父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
  • 伪类元素 (:before and :after)
  • 父级选择器的声明样式 (.selected, .active, .enlarged etc.)
  • 用Sass的上下文媒体查询
  • 子选择器作为最后的部分