BOOTSTRAP 编码规范 by @mdo
来源:互联网 发布:淘宝客助手破解版 编辑:程序博客网 时间:2024/06/10 08:59
- 嵌套元素应当缩进一次(即两个空格)。
- 不要在自闭合(self-closing)元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
- 强烈建议为 html 根元素指定 lang 属性,从而为文档设置正确的语言。<html lang="zh-cn">
- IE 支持通过特定的
<meta>
标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。 - <metahttp-equiv="X-UA-Compatible"content="IE=Edge">
<meta charset="UTF-8">
<br />
属性顺序
HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。
class
id
,name
data-*
src
,for
,type
,href
title
,alt
aria-*
,role
class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位。
JavaScript 生成的标签
通过 JavaScript 生成的标签让内容变得不易查找、编辑,并且降低性能。能避免时尽量避免
声明顺序
相关的属性声明应当归为一组,并按照下面的顺序排列:
- Positioning 定位
- Box model 盒模型
- Typographic 印刷版式
- Visual 视觉的
- Misc 杂项
由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。
完整的属性列表及其排列顺序请参考 Recess。
不要使用
@import
与
<link>
标签相比,@import
指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。替代办法有以下几种:- 使用多个
<link>
元素 - 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
- 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能
请参考 Steve Souders 的文章了解更多知识。
- 使用多个
媒体查询(Media query)的位置
将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了,将来只会被大家遗忘。下面给出一个典型的实例。
带前缀的属性
当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。
- MDN(Mozilla Developer Network)上一片非常好的关于shorthand properties 的文章,对于不太熟悉简写属性声明及其行为的用户很有用。
选择器
- 对于通用元素使用 class ,这样利于渲染性能的优化。
- 对于经常出现的组件,避免使用属性选择器(例如,
[class^="..."]
)。浏览器的性能会受到这些因素的影响。 - 选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3 。
- 只有在必要的时候才将 class 限制在最近的父元素内(也就是后代选择器)(例如,不使用带前缀的 class 时 -- 前缀类似于命名空间)。
扩展阅读:
- Scope CSS classes with prefixes
- Stop the cascade
编辑器配置
将你的编辑器按照下面的配置进行设置,以避免常见的代码不一致和差异:
- 用两个空格代替制表符(soft-tab 即用空格代表 tab 符)。
- 保存文件时,删除尾部的空白符。
- 设置文件编码为 UTF-8。
- 在文件结尾添加一个空白行。
参照文档并将这些配置信息添加到项目的
.editorconfig
文件中。例如:Bootstrap 中的 .editorconfig 实例。更多信息请参考 about EditorConfig。
(全文)
http://codeguide.bootcss.com/
0 0
- BOOTSTRAP 编码规范 by @mdo
- 编码规范 by @mdo
- bootstrap html编码规范
- bootstrap css编码规范
- bootstrap编码规范
- BootStrap 编码规范
- Bootstrap 编码规范
- Bootstrap HTML编码规范
- Bootstrap CSS编码规范
- bootstrap前台编码规范
- HTML编码规范,借鉴bootstrap
- 编码规范总结 源自bootstrap
- bootstrap的html编码规范
- Python 编码规范 BY Google
- Bootstrap——Responsive Nav,编码规范
- 学习日记-Bootstrap HTML编码规范
- Bootstrap创始人Mark Otto发布了Bootstrap编码规范
- 【Bootstrap】html属性顺序的编码规范及表单
- 关于网站备案的44个问题
- 滤波算法总结
- Android自定义一个对话框
- Auto Layout用法剖析(1)
- C中自己做个“回调函数”,抛一个
- BOOTSTRAP 编码规范 by @mdo
- 自测3. 数组元素循环右移问题
- [汇文教育]手势密码SDK
- 剑指offer ——寻找丑数
- Auto Layout用法剖析(2)
- [BZOJ1485] [HNOI2009]有趣的数列 && 找规律 + 数学
- hdoj 2503 a/b + c/d
- java学习总结——你的前世今生
- Linux下python升级步骤