Json对象与Json字符串互转(4种转换方式)

发表于2016年2月26日由xiaofang

1.jQuery插件支持的转换方式：

$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象

2.浏览器支持的转换方式(Firefox，chrome，opera，safari，ie9，ie8)等浏览器：

JSON.parse(jsonstr); //可以将json字符串转换成json对象

JSON.stringify(jsonobj); //可以将json对象转换成json对符串

注：ie8(兼容模式),ie7和ie6没有JSON对象，推荐采用JSON官方的方式，引入json.js。

3.Javascript支持的转换方式：
eval(‘(‘ + jsonstr + ‘)’); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号
注：ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象，但不推荐这些方式，这种方式不安全eval会执行json串中的表达式。

4.JSON官方的转换方式：
http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；
可以在https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。

sea.js学习中、遇到的问题

发表于2015年12月26日由xiaofang

// 加载入口模块
seajs.use("../static/hello/src/main")  //加载的时候要写相对路径，不然找不熬     ./要加上代表当前路径

2.require 的参数值必须是字符串直接量。
3.模块 factory 构造方法的第一个参数必须命名为 require 。
4.

iOS上的jQuery.on()冒泡事件绑定以及 iOS绝对定位元素中的输入框

发表于2015年11月24日由xiaofang

iOS的冒泡，如果一直没有handler来处理事件，则只会冒泡到body的内层，而不会冒泡到body上。因此，加了个children()可以解决：

$("body").children().on("click",".contentup",Reply.replyOneHandler);

如果是zepto.js

$(document).children().on("click",".contentup",Reply.replyOneHandler);

绝对定位（或者fixed 的元素）的元素中，如果有输入框，input或者textarea，获取焦点，自动弹出输入法之后，绝对定位的元素会在屏幕最上方到输入法最上边框的中间位置。

$(“.test”).scrollTop(0);可以解决

grunt 学习

发表于2015年10月18日由xiaofang

一、工具安装
1.yeoman 安装 npm install -g yo
2.bower 安装 npm install -g bower
3.grunt 安装 npm install -g grunt
备注：三个是独立开发的，但要配合使用，完成一个自动化工作流

二、实践

1.建立一个简单的项目 yo webapp grunt-by-yo 项目名
2.执行其中一个task grunt sass:xiaofangsass
3.初始化一个项目
npm init ; //生成 package.json 文件
安装两个好用的模块：npm install load-grunt-tasks –save-dev npm install time-grunt –save-dev
4.npm install grunt-contrib-copy –save-dev 拷贝
npm install grunt-contrib-clean –save-dev 清除
4.执行单个任务 grunt copy:dist_html
5.yo webapp grunt-yo-webapp 通过yoman 安装一个简单的webapp
启动一个server ，grunt server –allow-remote

发布自己的插件：
1.先要去https://www.npmjs.com/ 注册账号
2.npm adduser
3.npm publish <你的项目，git的的下载地址>
4.然后就可以到 https://www.npmjs.com 去搜索你的项目了
备注：1.npm install -g generator-gruntplugin 2.yo gruntplugin grunt-xiaofang（插件名字）

使用compass自动合并css雪碧图

发表于2015年9月27日由xiaofang

css雪碧图又叫css精灵或css sprite，是一种背景图片的拼合技术。使用css雪碧图，能够减少页面的请求数、降低图片占用的字节，以此来达到提升页面访问速度的目的。但是它也有令人诟病的地方，就是拼图和后期维护的成本比较大。也正是因为这一点，导致很多开发者懒于使用css雪碧图。

对于这种耗时、枯燥、重复性的工作，最好的解决方法还是交给工具去处理。本文就介绍下怎样使用compass来自动合并css雪碧图。

compass

安装compass

首先请确认电脑已经安装ruby及sass环境，ruby及sass的安装过程可参考：

sass入门指南

安装完成后可通过以下指令确认：

$ ruby -v
ruby 2.0.0p451 (2014-02-24) [x64-mingw32]
$ sass -v
Sass 3.4.6 (Selective Steve)

接着安装compass:

$ gem install compass

// 查看compass版本
$ compass -v
Compass 1.0.1 (Polaris)

ps: 本文中代码运行环境为：sass: 3.4.6, compass: 1.0.1, 测试时请确认sass版本不低于3.4.6，compass版本不低于1.0.1。

配置compass项目

进入项目目录，命令行中运行：

$ compass init

会生成相应的目录和配置文件。在images目录下建立share目录存放需合并的图标。项目目录结构如下：

- sass
- stylesheet
- images
  |-- share
  |-- magic
  |-- setting

config.rb文件配置如下：

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

relative_assets = true    // 使用相对目录
line_comments = false    // 关闭行注释

完整的项目目录示例可在github上查看：https://github.com/Bubblings/compass-sprite

合并雪碧图

输出所有雪碧图样式

在sass目录下新建share.scss文件，并写入以下代码：

@import "compass/utilities/sprites";    // 加载compass sprites模块
@import "share/*.png";                    // 导入share目录下所有png图片
@include all-share-sprites;                // 输出所有的雪碧图css

命令行调用compass compile进行编译，此时会发现images目录下出现了一个合并后的图片share-xxxxxxxx.png, stylesheet目录下生成了对应的share.css文件：

.share-sprite, .share-github, .share-qq, .share-weibo {
  background-image: url('../images/share-s7fefca4b98.png');
  background-repeat: no-repeat;
}

.share-github {
  background-position: 0 0;
}

.share-qq {
  background-position: 0 -23px;
}

.share-weibo {
  background-position: 0 -47px;
}

至此，我们就实现了一个简单的雪碧图合并，而且只用了三行代码。是不是有点小激动^_^。生成的代码中.share-sprite是雪碧图的基础类，后面介绍配置时会详细说明。生成的每个雪碧图默认的class规则是：.目录名-图片名。如果想自定义，我们可以通过下面调用单个雪碧图的方式来实现。

调用单个雪碧图样式

在sass目录下新建single-share.scss文件，并写入以下代码：

@import "compass/utilities/sprites";    // 加载compass sprites模块
@import "share/*.png";                    // 导入share目录下所有png图片
.test {
    @include share-sprites(github);
}

编译后的css为：

.share-sprite, .test {
  background-image: url('../images/share-s7fefca4b98.png');
  background-repeat: no-repeat;
}

.test {
  background-position: 0 -23px;
}

利用魔术精灵选择器智能输出

有的时候我们的图标会有多种状态，比如hover, active, focus, target等。利用compass的魔术精灵选择器我们就可以智能的合并各状态的图标，并输出对应的css。使用时，我们需要将图标按照一定的规则命名。例如：

weibo.png            // 默认状态图标
weibo_hover.png     // hover状态图标
weibo_active.png     // active状态图标

在sass目录下新建magic.scss文件，并写入以下代码：

@import "compass/utilities/sprites";
@import "magic/*.png";
@include all-magic-sprites;

编译后的css为：

.magic-sprite, .magic-weibo {
  background-image: url('../images/magic-s758f6928e8.png');
  background-repeat: no-repeat;
}

.magic-weibo {
  background-position: 0 0;
}
.magic-weibo:hover, .magic-weibo.weibo-hover {
  background-position: 0 -48px;
}
.magic-weibo:active, .magic-weibo.weibo-active {
  background-position: 0 -24px;
}

雪碧图配置

我们已经利用compass实现了简单雪碧图的合成。当然compass还提供了很多可供配置的选项，下面来一一介绍。

PS: 以下的配置选项不再单独举例，可参考示例项目中的setting.scss文件。

先来看下配置相关的语法：

$<map>-<property>: setting;                // 配置所有sprite
$<map>-<sprite>-<property>: setting;    // 配置单个sprite

说明：

<map>: 对应图标存放的文件夹名称，如上面例子中的：share和magic
<sprite>: 对应单个图标的名称，如上面例子中的: weibo, qq, github等

配置sprite间距

$<map>-spacing: 5px;                // 配置所有sprite间距为5px，默认为0px
$<map>-<sprite>-spacing: 10px;        // 配置单个sprite间距为10px，默认继承$<map>-spacing的值

配置sprite重复性

$<map>-repeat: no-repeat/repeat-x;        // 配置所有sprite的重复性，默认为no-repeat
$<map>-<sprite>-repeat: no-repeat/repeat-x;// 配置单个sprite的重复性，默认继承$<map>-repeat的值

配置sprite的位置

$<map>-position: 0px;                // 配置所有sprite的位置，默认为0px
$<map>-<sprite>-position: 0px;        // 配置单个sprite的位置，默认继承$<map>-position的值

配置sprite的布局方式

$<map>-layout: vertical/horizontal/diagonal/smart;        // 默认布局方式为vertical

清除过期的sprite

$<map>-clean-up: true/false;        // 默认值为true

每当添加、删除或改变图片后，都会生成新的sprite，默认情况下compass会自动的移除旧的sprite，当然也可以通过配置$<map>-clean-up: false;来保留旧的sprite。

配置sprite的基础类

在使用sprite时，compass会自动的生成一个基础类来应用公用的样式(如background-image)，默认的类名为$<map>-sprite，上面例子中的.share-sprite, .magic-sprite就是这个基础类，当然compass也提供了自定义这个类名的选项：

$<map>-sprite-base-class: ".class-name";

魔术精灵选择器开关

上面已经介绍了怎样利用利用魔术精灵选择器智能输出sprite，默认情况下compass是开启这个功能的，也就是说compass默认会将以_hover, _active等名字结尾的图片自动输出对应的:hover, :active等伪类样式。当然如果不想这样的话，也可以禁用它。

$disabled-magic-sprite-selectors: false;    // 默认为true

设置sprite尺寸

我们在合并雪碧图时，很多时候图片的尺寸都不一样，那么在使用时我们如何给每个sprite设置尺寸呢？compass有提供自动设置每个sprite尺寸的配置，默认是关闭的，我们只需手动启用即可。

$setting-sprite-dimensions: true;    // 启用自动设置sprite尺寸，默认值为false

这时输出的样式中会自动加上图片的尺寸，例如：

.setting-compass {
  background-position: -5px 0;
  height: 35px;
  width: 200px;
}

当然，如果只对某个sprite单独设置的话，compass也提供了这个功能。语法如下:

$<map>-sprite-width($name);     // $name为合并前的图片名称
$<map>-sprite-height($name);

例如：

.special {
    @include setting-sprite(compass);
    width: setting-sprite-width(compass);
    height: setting-sprite-height(compass);
}

则输出的css为:

.special {
  background-position: -5px 0;
  width: 200px;
  height: 35px;
}

使用Compass生成雪碧图

发表于2015年9月10日由xiaofang

CSS雪碧图是将几个图片拼合成一张图片，以此来减少HTTP请求的方法，并且可以提升网站加载性能。除了使用传统方法在Photoshop中手动拼合，还有一些简便的方法和便捷的工具来帮助我们完成这项工作。

但是，以我处理CSS雪碧图的经验来说，没有哪种方法比使用Compass的Sprite函数更轻松容易的了。现在就让我们来看看他是如何工作的

开始使用Compass

在使用Compass工作之前，我们需要创建一个Compass的项目然后监视它。这样，当这个项目中包含的图片和.scss一发生改变，Compass就会编译成合适的形式。

让我们打开你的终端或者命令行窗口（如果你使用的是Windows），然后运行下面的这段命令。

compass create /path/to/project  
cd /path/to/project  
compass watch

合并图片

正如我们上面提到的，你可以使用Photoshop来手动增减图片或者你也可以使用一些便捷的工具，例如：SpriteBox或者SpriteMe。Compass将这些功能整合成一个函数。我们在images/browsers/这个文件夹下有一些icon图片，命名为XXX.png。

使用Compass生成雪碧图

特别声明：以上icon由Futurosoft制作

在Compass中添加这些icon，我们可以在.scss文件中使用@import语法指向图片文件夹下的所有png扩展名的图片。就像下面这样：

@import "browsers/*.png";

保存文件后，Compass将会将这些图片进行合并，然后生成一个新的图片文件，如下：

使用Compass生成雪碧图

雪碧图陈列方向（即合并完后的图片是横向排列还是纵向排列）

此外，我们还可以设置雪碧图排列的方向。正如你之前看到的图片截屏，图片默认排列是纵向的。假设纵向排列不能适应当前的情况下，我们可以使用$<map>-layout: horizontal;或者$<map>-layout: diagonal;变量来指定他们水平排列或者对角线排列，将变量中的<map>替换成你存储图片的文件夹的名字。

水平排列例子

$browsers-layout:horizontal;  
@import "browsers/*.png";

使用Compass生成雪碧图

对角线排列例子

$browsers-layout:vertical;  
@import "browsers/*.png";

使用Compass生成雪碧图

在样式表中添加图片

一旦我们将图片合并完，我们就可以在样式表中的背景图中调用它了。我们用传统的做法就可以了。

.chrome {   
    background-position: 0 0; width: 128px; height: 128px;   
}   
.firefox {   
    background-position: 0 -133px; width: 128px; height: 128px;   
}   
.ie {   
    background-position: 0 -266px; width: 128px; height: 128px;   
}   
.opera {   
    background-position: 0 -399px; width: 128px; height: 128px;   
}   
.safari {   
    background-position: 0 -532px; width: 128px; height: 128px;   
}

在Compass中，我们有更简单的的方法。首先，我们用@include all-<map>-sprites这个语法来生成一些CSS规则，其中，将<map>替换成我们存放图片的文件夹名称。

@include  all-browsers-sprites;

当上面这行编译成正常的CSS时，除了会生成背景图的声明，还有对应的位置，正如下面展示的。

.browsers-sprite, .browsers-chrome, .browsers-firefox, .browsers-ie, .browsers-opera, .browsers-safari {  
  background: url('/images/browsers-sad8e949931.png') no-repeat;  
}  
.browsers-chrome {  
    background-position: 0 0;  
}  
.browsers-firefox {  
    background-position: 0 -128px;  
}  
.browsers-ie {  
    background-position: 0 -256px;  
}  
.browsers-opera {  
    background-position: 0 -384px;  
}  
.browsers-safari {  
    background-position: 0 -512px;  
}

或者，我们也可以用@include <map>-sprite(image-naem)语法将背景图中的某一个对应的位置图片传给指定的选择器：和前面的代码一样，只需要将<map>替换成存储图片的文件夹名字即可。下面是一个例子。

li {  
    @include browsers-sprite(safari);  
}

然后，Compass会聪明的识别出背景的位置，不用我们明确指定。在正常的CSS中，上面那行代码会转换成：

.browsers-sprite, li {  
  background: url('/images/browsers-sad8e949931.png') no-repeat;  
}  
li {  
    background-position: 0 -512px;  
}

指定容器的尺寸

最后我们需要做的就是指定需要显示背景图容器的宽高属性。我们传统的做法是手动查看图片的宽和高（绝大多数情况是通过查看图片信息或图片属性获得）。

使用Compass，我们就可以使用 <map>-sprite-height(image-name)或者<map>-sprite-width(image-name)函数来获取到图片的宽和高。在下面这个例子中，我们会获取其中一个图片的宽和高，并将值存储给变量。再使用@include指令获得分配背景图。

$height: browsers-sprite-height(safari);  
$width: browsers-sprite-width(safari);  
li {  
    display: inline-block;  
    height: $height;  
    width: $width;  
    @include browsers-sprite(safari);  
}

当我们编译上面这些代码，他就会转成下面这些正常的CSS。

.browsers-sprite, li {  
    background: url('/images/browsers-sad8e949931.png') no-repeat;  
}  
li {  
    display: inline-block;  
    height: 128px;  
    width: 128px;  
    background-position: 0 -512px;  
}

结论

实际上，Compass除了这些创建CSS雪碧图的基本函数，Compass还有很多有用的函数可以使用。然而，如果你是Compass的新手，我们建议你关注我们之前写的关于Sass和Compass的文章。我们希望这些文章对你有所帮助。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

文章出处：

英文出处：http://www.hongkiat.com/blog/compass-image-sprite/

中文译文：http://www.w3cplus.com/preprocessor/compass-image-sprite.html

css编码规范

发表于2015年9月10日由xiaofang

黄金定律

永远遵循同一套编码规范 — 可以是这里列出的，也可以是你自己总结的。如果你发现本规范中有任何错误，敬请指正。通过 open an issue on GitHub为本规范添加或贡献内容。

不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。

HTML

语法

用两个空格来代替制表符（tab） — 这是唯一能保证在所有环境下获得一致展现的方法。
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号。
不要在自闭合（self-closing）元素的尾部添加斜线 —HTML5 规范中明确说明这是可选的。
不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

HTML5 doctype

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

语言属性

根据 HTML5 规范：

强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。

更多关于 lang 属性的知识可以从此规范中了解。

这里列出了语言代码表。

<html lang="zh-CN">
  <!-- ... -->
</html>

IE 兼容模式

IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。

阅读这篇 stack overflow 上的文章可以获得更多有用的信息。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

字符编码

通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。

<head>
  <meta charset="UTF-8">
</head>

引入 CSS 和 JavaScript 文件

根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和text/javascript 分别是它们的默认值。

HTML5 spec links

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

实用为王

尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

属性顺序

HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role

class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。

<a class="..." id="..." data-modal="toggle" href="#">
  Example link
</a>

<input class="form-control" type="text">

<img src="..." alt="...">

布尔（boolean）型属性

布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。

更多信息请参考 WhatWG section on boolean attributes：

元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。

如果一定要为其赋值的话，请参考 WhatWG 规范：

如果属性存在，其值必须是空字符串或 […] 属性的规范名称，并且不要再收尾添加空白符。

简单来说，就是不用赋值。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

减少标签的数量

编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。请看下面的案例：

<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

JavaScript 生成的标签

通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。

CSS

语法

用两个空格来代替制表符（tab） — 这是唯一能保证在所有环境下获得一致展现的方法。
为选择器分组时，将单独的选择器单独放在一行。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
声明块的右花括号应当单独成行。
每条声明语句的 : 后应该插入一个空格。
为了获得更准确的错误报告，每条声明都应该独占一行。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
不要在 rgb()、rgba()、hsl()、hsla() 或rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
避免为 0 值指定单位，例如，用 margin: 0; 代替margin: 0px;。

对于这里用到的术语有疑问吗？请参考 Wikipedia 上的syntax section of the Cascading Style Sheets article。

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

Positioning
Box model
Typographic
Visual

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

完整的属性列表及其排列顺序请参考 Recess。

.declaration-order {
  /* 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;
}

不要使用 `@import`

与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：

使用多个 <link> 元素
通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

请参考 Steve Souders 的文章了解更多知识。

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

媒体查询（Media query）的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例。

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

带前缀的属性

当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。

在 Textmate 中，使用 Text → Edit Each Line in Selection (⌃⌘A)。在 Sublime Text 2 中，使用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

单行规则声明

对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。

这样做的关键因素是为了错误检测 — 例如，CSS 校验器指出在 183 行有语法错误。如果是单行单条声明，你就不会忽略这个错误；如果是单行多条声明的话，你就要仔细分析避免漏掉错误了。

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

简写形式的属性声明

在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：

padding
margin
font
background
border
border-radius

大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的 heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。

MDN（Mozilla Developer Network）上一片非常好的关于shorthand properties 的文章，对于不太熟悉简写属性声明及其行为的用户很有用。

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

Less 和 Sass 中的嵌套

避免非必要的嵌套。这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
  > th { … }
  > td { … }
}

注释

代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。

对于较长的注释，务必书写完整的句子；对于一般性注解，可以书写简洁的短语。

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}

class 命名

class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。
避免过度任意的简写。.btn 代表 button，但是 .s不能表达任何意思。
class 名称应当尽可能短，并且意义明确。
使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
基于最近的父 class 或基本（base） class 作为新 class 的前缀。
使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

在为 Sass 和 Less 变量命名是也可以参考上面列出的各项规范。

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

选择器

对于通用元素使用 class ，这样利于渲染性能的优化。
对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。
选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 — 前缀类似于命名空间）。

扩展阅读：

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

代码组织

以组件为单位组织代码段。
制定一致的注释规范。
使用一致的空白符将代码分隔成块，这样利于扫描较大的文档。
如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动。

/*
 * Component section heading
 */

.element { ... }


/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }

编辑器配置

将你的编辑器按照下面的配置进行设置，以避免常见的代码不一致和差异：

用两个空格代替制表符（soft-tab 即用空格代表 tab 符）。
保存文件时，删除尾部的空白符。
设置文件编码为 UTF-8。
在文件结尾添加一个空白行。

参照文档并将这些配置信息添加到项目的 .editorconfig 文件中。例如：Bootstrap 中的 .editorconfig 实例。更多信息请参考 about EditorConfig。

原文地址：http://codeguide.bootcss.com/#html-practicality

IE6/IE7下：inline-block解决方案

发表于2015年9月5日由xiaofang

IE6/IE7下对display:inline-block的支持性不好。

1、inline元素的display属性设置为inline-block时，所有的浏览器都支持；

2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的；

对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行，允许空格。（准确地说，应用此特性的元素现为内联对象，周围元素保持在同一行，但可以设置宽度和高度等块元素的属性）

IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。

IE6下块元素如何实现display:inline-block的效果？

有两种方法：
1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display 要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失）。代码如下（…为省略的其他属性内容）：

div {display:inline-block;…}
div {display:inline;}

2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1 或float属性等）。代码如下：

div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/
div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/

CSS3渐变——径向渐变

发表于2015年9月5日由xiaofang

在《再说CSS3渐变——线性渐变》和大家一起学习了CSS3 Gradient中径向渐变最新语法（称得上是W3C的标准语法）相关知识以及其基本使用。今天我们在这一篇中主要和大家一起来了解渐变中的径向渐变新语法以及其基本使用。

CSS3径向渐变

CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。

一、径向渐变的语法

CSS3的径向渐变已得到众多浏览器引擎的支持，只不过其语法的版本根据不同的引擎浏览器，其语法也不一样，特别是在Webkit引擎的浏览器下和线性渐变的语法类似，也有新旧之法。而在其他几大引擎的浏览器，其语法基本类似，只是使用的前缀不同而以。特别是在2013年04年，W3C为CSS3径向渐变推出最新的语法格式。接下来我们一起来看看各引擎浏览器下的径向渐变语法。

1. Webkit引擎的CSS3径向渐变语法

CSS3径向渐变在Webkit引擎下的语法和线性渐变的语法一样，分为两种，一种是老版本的语法，另外一种是新版本语法：

Webkit引擎下的老版本语法：

-webkit-gradient([<type>],[<position> || <angle>,]?[<shape> ||<size>,]?<color-stop>,<color-stop>[,<color-stop>]*);

Webkit引擎新式语法

-webkit-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);

Webkit引擎中的浏览器Chrome4－9和Safari 4－5版本支持老式的Webkit引擎径向语法，Chrome10.0+和Safari5.1+支持Webkit引擎新式径向渐变。

2. Gecko引擎的CSS3的径向渐变语法

Gecko引擎的CSS3的径向渐变和Webkit引擎新式语法类似，只是使用的前缀不同而以：

-moz-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);

Gecko引擎的Firefox浏览器中Firefox3.6+版本支持径向渐变。

3. Presto引擎的CSS3径向渐变语法

Presto引擎的CSS3径向渐变语法和Webkit引擎的新式语法类似，只是使用的前缀不同而以：

-o-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);

Presto引擎中的Opear11.6开始支持径向渐变。

4. Trident引擎的CSS3径向渐变语法

Trident引擎的浏览器从IE10开始支持径向渐变语法，其语法格式与Webkit引擎的新式语法类似，仅不同的是其前缀不同，需要使用“-ms-”：

-ms-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);

5. W3C标准径向渐变语法

W3C组织从2013年04月开始给径向语法推出新的语法规则：

radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);

不过支持径向渐变语法的浏览器，到写这文稿时，仅有IE10+,Firefox16+浏览器支持。

二、径向渐变的属性参数

CSS3的径向渐变相对于线性渐变要复杂的多，属性参数也繁多复杂。CSS3径向变中新老语法中的属性参数定义如下：

<position>：主要用来定义径向渐变的圆心位置。此值类似于CSS中background-position属性，用于确定元素渐变的中心位置。如果这个参数省略了，其默认值为“center”。其值主要有以下几种：

<length>：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
<percentage>：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
left：设置左边为径向渐变圆心的横坐标值。
center：设置中间为径向渐变圆心的横坐标值或纵坐标。
right：设置右边为径向渐变圆心的横坐标值。
top：设置顶部为径向渐变圆心的纵标值。
bottom：设置底部为径向渐变圆心的纵标值。

<shape>：主要用来定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”：

circle：如果<size>和<length>大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变
ellipse：如果<size>和<length>大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。

<size>：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”。可以给其显式的设置一些关键词，主要有：

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；

如果<shape>设置了为“circle”或者省略，<size>可能显式设置为<length>。表示的是用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定径向渐变的形状是圆或者是椭圆。此值不不能负值。

如果<shape>设置了“ellipse”或者省略，<size>可能显式设置为［<length>|<percentage>］。主要用来设置椭圆的大小。第一个值代表椭圆的水平半径，第二个值代表垂直半径。这两个值除了使用<length>定义大小之外还可以使用<percentage>来定义这两半径大小。使用<percentage>定义值是相对于径向渐变容器的尺寸。同样不能为负值。

<color-stop>：径向渐变线上的停止颜色，类似于线性渐变的<color-stop>。径向渐变的为渐变线从中心点向右扩散。其中0%表示渐变线的起始点，100%表示渐变线的与渐变容器相交结束的位置。而且其颜色停止可以定义一个负值。

三、径向渐变的基本用法

虽然径向渐变要比线性渐变更为复杂，只要了解了其基本语法以及相关属性参数的作用，我想并不会需要花太多的时间去适应。接下来，我们通过实战来加强径向渐变的使用。下面的所有例子我们都在一个宽度为400像素，高为300像素的容器中实现。

先来看一个最简单的径向渐变，圆心都是容器正中间，从“hsla(120,70%,60%,.9)”颜色向“hsla(360,60%,60%,.9)”颜色实现径向渐变：

div {
  width: 400px;
  height: 300px;
  margin: 50px auto;
  border: 5px solid hsla(60,50%,80%,.8);
  background-image: -webkit-radial-gradient(hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
  background-image: radial-gradient(hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
}

效果如下图所示：

2023年六月
一	二	三	四	五	六	日
« 12月
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

安装compass

配置compass项目

合并雪碧图

输出所有雪碧图样式

调用单个雪碧图样式

利用魔术精灵选择器智能输出

雪碧图配置

配置sprite间距

配置sprite重复性

配置sprite的位置

配置sprite的布局方式

清除过期的sprite

配置sprite的基础类

魔术精灵选择器开关

设置sprite尺寸

开始使用Compass

合并图片

雪碧图陈列方向（即合并完后的图片是横向排列还是纵向排列）

水平排列例子

对角线排列例子

在样式表中添加图片

指定容器的尺寸

结论

目录

黄金定律

HTML

语法

HTML5 doctype

语言属性

IE 兼容模式

字符编码

引入 CSS 和 JavaScript 文件

HTML5 spec links

实用为王

属性顺序

布尔（boolean）型属性

减少标签的数量

JavaScript 生成的标签

CSS

语法

声明顺序

不要使用 @import

媒体查询（Media query）的位置

带前缀的属性

单行规则声明

简写形式的属性声明

Less 和 Sass 中的嵌套

注释

class 命名

选择器

代码组织

编辑器配置

CSS3径向渐变

一、径向渐变的语法

1. Webkit引擎的CSS3径向渐变语法

2. Gecko引擎的CSS3的径向渐变语法

3. Presto引擎的CSS3径向渐变语法

4. Trident引擎的CSS3径向渐变语法

5. W3C标准径向渐变语法

二、径向渐变的属性参数

三、径向渐变的基本用法

重复渐变

1、重复线性渐变

2、重复径向渐变

重复渐变制作记事本纸张效果

浏览器兼容性

线性渐变：

径向渐变

IE低版本浏览器兼容处理

针对其他浏览器的兼容方案

总结

CSS3渐变的介绍

渐变功能的实现

线性渐变

一、线性渐变语法与参数

1. Webkit引擎的CSS3线性渐变语法与属性参数

2. Gecko引擎的CSS3的线性渐变语法与属性参数

3. Presto引擎的CSS3线性渐变语法与属性参数

4. Trident引擎的CSS3线性渐变语法与属性参数

5. W3C标准线性渐变语法与属性参数

不要使用 `@import`