Bootstrap 编码规范
来源:互联网 发布:linux 循环 编辑:程序博客网 时间:2024/09/21 06:17
1 HTML
(1) 语法
缩进使用两个空格代替 Tab
嵌套元素缩进一次
属性定义全部使用双引号,避免单引号
不需要在自闭和元素的尾部添加斜杠(/),如
<input type="password">
不能省略可选的结束标签,如
</li>
,</body>
(2) HTML5 DOCTYPE
在每个 HTML 页面第一行添加标准模式(Standard Mode)声明,确保在每个浏览器中表现一致
<!DOCTYPE html>
(3) IE 兼容模式
IE 支持根据特定的 <meta>
标签确定绘制当前页面所应采用的 IE 版本,建议设置如下
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
(4) 字符编码
明确声明字符编码,确保浏览器能够快速定位页面内容的渲染方式,建议采用 UTF-8 编码
<head> <meta charset="UTF-8"></head>
(5) 引入 CSS 文件
根据 HTML5 规范,引入 CSS 文件时不需要指定 type
属性,默认值是 text/css
,如
<link rel="stylesheet" href="xxx.css">
(6) 引入 JavaScript 文件
根据 HTML5 规范,引入 JavaScript 文件时不需要指定 type
属性,默认值是 text/javascript
,如
<script src="xxx.js"></script>
(7) 属性顺序
HTML 属性建议按照以下顺序依次排列
class
id
,name
data-*
src
,for
,type
,href
title
,alt
aria-*
,role
注意:
class
用于标识可复用组件,应该放在首位id
用于标识某一具体组件,应该放在次位
(8) boolean 类型属性
根据 HTML5 规范,boolean 类型属性在声明时不需要赋值,如
<input type="text" disabled><input type="checkbox" value="1" checked><select> <option value="1" selected>1</option></select>
(9) 尽量减少嵌套的标签数量
(10) 尽量避免通过 JavaScript 动态生成标签,这样做不利于查找、编辑且影响性能
2 CSS
(1) 语法
缩进使用两个空格代替 Tab
将单独的选择器单独放在一行
在每个声明块的左花括号前添加一个空格
声明块的右花括号单独成行
每条声明语句的
:
后插入一个空格每条声明独占一行
所有声明语句以分号结尾
对于以逗号分隔的属性值,每个逗号后面插入一个空格
margin: 0 0 15px 0;
不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格),如
background-color: rgba(0,0,0,.5);
对于属性值或颜色参数,省略小于 1 的小数前面的 0,如
background-color: rgba(0,0,0,.5);
十六进制值应该全部小写,如使用
#fff
替代#FFF
尽量使用简写形式的十六进制值,如使用
#fff
替代#ffffff
为选择器中的属性添加双引号,如使用
input[type="text"]
替代input[type=text]
避免为 0 值指定单位,如使用
margin: 0;
替代margin: 0px;
(2) 声明顺序
/* Positioning */position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 100;/* Box-model */display: block;float: right;width: 100px;height: 100px;/* Typography */font: normal 13px "Helvetica Neue", sans-serif;line-height: 1.5;color: #333;text-align: center;/* Visual */background-color: #f5f5f5;border: 1px solid #e5e5e5;border-radius: 3px;/* Misc */opacity: 1;
(3) 避免使用 @import
与 <link>
标签相比,@import
指令慢很多
<!-- Use link elements --><link rel="stylesheet" href="core.css"><!-- Avoid @imports --><style> @import url("more.css");</style>
解决方案:
使用多个
<link>
元素通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能
(4) class 命名
class 名称中只能出现小写字符和破折号(
-
非_
)class 名称应当尽可能短,并且意义明确
避免过度简写
基于最近的父 class 或基本(base) class 作为新 class 的前缀
(5) 选择器
- 对于通用元素使用 class ,这样利于渲染性能的优化
- 对于经常出现的组件,避免使用属性选择器
- 选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3
(6) 设置文件编码为 UTF-8
(7) 在文件结尾添加一个空白行
- bootstrap html编码规范
- bootstrap css编码规范
- bootstrap编码规范
- BootStrap 编码规范
- Bootstrap 编码规范
- Bootstrap HTML编码规范
- Bootstrap CSS编码规范
- bootstrap前台编码规范
- HTML编码规范,借鉴bootstrap
- 编码规范总结 源自bootstrap
- BOOTSTRAP 编码规范 by @mdo
- bootstrap的html编码规范
- Bootstrap——Responsive Nav,编码规范
- 学习日记-Bootstrap HTML编码规范
- Bootstrap创始人Mark Otto发布了Bootstrap编码规范
- 【Bootstrap】html属性顺序的编码规范及表单
- 编码规范
- 规范编码
- Redis介绍
- 移动端视口等宽正方形写法
- Android AlertDialog 6种不同效果使用方法
- 深入浅出,一篇超棒的机器学习入门文章
- byte 和 char 的区别
- Bootstrap 编码规范
- 菜鸟的逆向经验(一):尝试脱壳UltraISO
- linux最简单搭建邮件服务器
- 探究MFC之Dialog系统菜单添加
- PPPoE-在配置PPPoE的用户名和密码的时候一定要准确严格,不要在后面加空格,千万记住,特别是复制张贴的时候,同时还有注意大小写的问题!!!
- TP:20C9A58A
- eval函数的危害和禁用方法
- Linux网络编程04——套接字
- Git工作流的最佳实践总结