HTML 编码习惯
- 每个 HTML 页面的第一行添加标准模式的声明
<!DOCTYPE html>
- 为 html 根元素指定 lang 属性,从而为文档设置正确的语言
<html lang="zh">
- 在 head 标签内部声明字符编码
<meta charset="UTF-8">
- 引入 CSS 和 JavaScript 文件时不需要指定 type 属性
<link rel="stylesheet" href="XXXX.css">
<script src="XXXX.js"></script>
- 自闭合标签尾部不要添加斜线
- 对于属性的定义统一用双引号,且 class 属性放在第一个
CSS 编码习惯
-
CSS 文件命名习惯
- CSS 文件使用无 BOM 的 UTF-8 编码 ;
- 引入 Normalize.css 初始化样式作为每个页面的基础样式,且最好不要做任何修改;
- 采用 style.css 作为页面公共样式,比如 body 等元素,或 .hidden、.unselect;
- 采用 themes.css 文件名实现项目换肤功能;
- 采用 模块名.css 作为各模块私有样式,如 print.css;
-
CSS 样式命名习惯
- 尽量采用 class 作为选择器,避免用 id 选择器;
- 避免 class 和 id 命名重复;
- 样式与结构分离,避免行内样式;
- 代码命名中,一律采用小写加连接符,如:header-container;
- 属性值尽量采用缩写,如:padding、margin;
- 十六进制颜色尽量采用缩写,如:#fff;
-
CSS书写顺序习惯
- 位置属性(position, top, right, z-index, display, float等);
- 大小(width, height, padding, margin);
- 文字系列(font, line-height, letter-spacing, color- text-align等);
- 背景(background, border等);
- 其他(animation, transition等);
-
CSS 常见命名习惯
- 容器:container
- 页眉:header
- 导航:nav
- 标志:logo
- 标题:title
- 菜单:menu
- 子菜单:submenu
- 横幅:banner
- 轮播图:swipe
- 主体:main
- 页尾:footer
- 版权:copyright
- 友情链接:link
- 按钮:btn
- 图标:icon