前端开发基本原则

猿哥说 2018-02-28

结构、样式、行为分离

尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。

缩进

统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。

文件编码

使用不带 BOM 的 UTF-8 编码。

在 HTML 中指定编码<meta charset="utf-8">；

无需使用@charset 指定样式表的编码，它默认为 UTF-8（参考 Mixed Content问题，减小文件字节数。

其它协议（ftp 等）的 URL 不省略。

<!-- Recommended -->
<script ></script>

<!-- Not recommended -->
<script ></script>
/* Recommended */
.example {
  background: url(//www.google.com/images/example);
}

/* Not recommended */
.example {
  background: url(http://www.google.com/images/example);
}

统一注释

通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

HTML 注释

<!-- 文章列表列表模块 -->
<div class="article-list">
...
</div>

<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Ashu(Aaaaaashu@gmail.com)
-->

CSS 注释

组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；

/* ==========================================================================
   组件块
 ============================================================================ */

/* 子组件块
 ============================================================================ */
.selector {
  padding: 15px;
  margin-bottom: 15px;
}

/* 子组件块
 ============================================================================ */
.selector-secondary {
  display: block; /* 注释*/
}

.selector-three {
  display: span;
}