Bootstrap学习之编码规范介绍

本篇文章给大家带来的内容是Bootstrap学习之编码规范介绍,介绍一下Bootstrap的编码规范。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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) 在文件结尾添加一个空白行

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是Bootstrap学习之编码规范介绍的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Bootstrap 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏