我的 HTML,CSS 编码习惯
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
