不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的
命名规则
项目命名
全部采用 小写 方式，以 下划线 分隔
例：my_project_name
目录命名
- 参照项目命名规则
- 有复数结构时，采用复数命名法
例如： scripts、styles、images、data_modals
JS文件命名
参照项目命名规则
例： lk-utils.js
CSS，SCSS文件命名
参照项目命名规则
例：lk-style.scss
HTML文件命名
参照项目命名规则
例：lk-index.html
HTML
语法
- 缩进使用2个空格（bootstrap规范）
- 嵌套的节点应该缩进标签不要大写，即便是 doctype 标签
- 在属性上，使用双引号，不要使用单引号
- 属性名全小写，用中划线做分隔符
- 不要在自动闭合标签结尾处使用斜线（HTML5 规范 指出他们是可选的）
- 不要忽略可选的关闭标签，例：
</li>和</body>
<!doctype html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company_logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
HTML doctype
为每个 HTML 页面的第一行添加standards mode（标准模式）声明，这样能够确保在每个浏览器中拥有一致的展现
lang属性
根据HTML5规范：
应在html标签上加上lang属性，从而为文档设置正确的语言。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。
更多关于 lang 属性的说明在这里
在菜鸟联盟上可以查到语言列表
charset 字符编码
通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为‘UTF-8’
IE兼容模式
- 用标签可以指定页面应该用什么版本的IE来渲染
如果想要了解更多，请点击这里
What does <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> do?
Depending upon what Microsoft browsers you support you may not need to continue using theX-UA-Compatibletag. If you need to support IE9 or IE8, then I would recommend using the tag. If you only support the latest browsers (IE11 and/or Edge) then I would consider dropping this tag altogether.
简而言之需要兼容IE9/8，加上X-UA-Compatible，否则不用加
- 不同doctype在不同浏览器下会触发不同的渲染模式（这篇文章总结的很到位）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
...
</html>
引入CSS,JS
根据html5规范，通常在引入CSS和JS时不需要指明type，因为 text/css和 text/javasctipt 分别是他们的默认值
HTML5规范链接
<!-- External CSS -->
<link rel="stylesheet" href="code_guide.css">
<!-- In-document CSS -->
<style>
...
</style>
<!-- External JS -->
<script src="code_guide.js"></script>
<!-- In-document JS -->
<script>
...
</script>
属性顺序
属性应该按照特定的顺序出现以保证易读性
classidnamedata-*src,for,type,href,value,max-length,max,min,patternplaceholder,title,altaria-*,rolerequired,readonly,disabled
class是为高可复用组件设计的，所以应处在第一位
id更加具体且应该尽量少使用，所以将它放在第二位
<a class="..." id="..." data-modal="toggle" href="#">Example link</a>
<input class="form-control" type="text">
<img src="..." alt="...">
boolean属性
boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5中并不需要
boolean属性的存在表示取值为true，不存在则表示取值为false。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
JS中生成标签
在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。
减少标签数量
- 在编写HTML代码时，需要尽量避免多余的父节点
- 很多时候， 需要通过迭代和重构来使HTML变得更少
<!-- Not well -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
实用高于完美
- 尽量遵循HTML标准和语义
- 任何时候都要用
尽量小的复杂度和尽量少的标签来解决问题 - 但是不应该以浪费实用性作为代价
CSS,SCSS
通识
/* 这样叫规则（下同） */
.element {
...
}
.element {
/* 这样叫属性（下同） */
height: 30px;
}
缩进
使用2空格
分号
每个属性声明末尾都要加分号
空格
以下几种情况不需要空格：
- 每条声明语句的
:后 - 多个规则的分隔符
".前 !important!后- 属性值中
()的前后 - 行末不要有多余的空格
以下几种情况需要空格：
- 属性值前
- 选择器
>,+,~前后 {前!important!前@else前后- 属性值中的
,后 - 注释
/*_后和 __*/_前
/* not good */
.element {
color :
最低0.47元/天 解锁文章
4222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
