自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备)。

开发者们都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的APP；一种是基于高端机的浏览器运行的WebApp，本文将主要讲解后者。

WebApp与Native App有何区别呢？

Native App：

1、开发成本非常大。

一般使用的开发语言为JAVA、C++、Objective-C。

2、更新体验较差、同时也比较麻烦

每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新，但是也需要有一个恶心的提示）。

3、非常酷

因为native app可以调用IOS中的UI控件以UI方法，它可以实现WebApp无法实现的一些非常酷的交互效果

4、Native app是被Apple认可的

Native app可以被Apple认可为一款可信任的独立软件，可以放在Apple Stroe出售，但是Web app却不行。

Web App：

1、开发成本较低

使用web开发技术就可以轻松的完成web app的开发

2、升级较简单

升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉

3、维护比较轻松

和一般的web一样，维护比较简单，它其实就是一个站点

Webapp说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术JAVA、PHP、ASP。

当然，因为这些高端智能手机（Iphone、Android）的内置浏览器都是基于webkit内核的，所以在开发WEBAPP时，多数都是使用HTML5和CSS3技术做UI布局。当使用HTML5和CSS3l做UI时，若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的话，这也就失去了WEBAPP的本质意义了，且有些效果

也无法实现的，所以在此又回到了我们的主题–webapp的布局方式和技术。

在此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，你需要对HTML5和CSS3有一定的了解。如果你已经对此有所了解，那现在就开始往下阅读吧??

1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用

1 <meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” />

2 <meta content=”yes” name=”apple-mobile-web-app-capable” />

3 <meta content=”black” name=”apple-mobile-web-app-status-bar-style” /> 4 <meta content=”telephone=no” name=”format-detection” />

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

2、HTML5标签的使用

在开始编写webapp时，哥建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。

3、放弃CSS float属性

在项目开发过程中可以会遇到内容排列排列显示的布局(见下图)，假如你遇见这样的视觉稿，哥建议你放弃float，可以直接使用display:block;

4、利用CSS3边框背景属性

这个按钮有圆角效果，有内发光效果还有高光效果，这样的按钮使用CSS3写是无法写出来的，当然圆角可以使用CSS3来写，但高光和内发光却无法使用CSS3编写，这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。-webkit-border-image就个很复杂的样式属性。

5、块级化a标签

请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

6、自适应布局模式

在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。

7、学会使用webkit-box

上一节，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？很感谢webkit为display属性提供了一个webkit-box的值，它可以帮助前端工程师做到盒子模型灵活控制。

8、如何去除Android平台中对邮箱地址的识别

看过iOSwebapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的邮件地址，你不妨加上这样一句meta标签在head中1 <meta content=”email=no” name=”format-detection” />

9、如何去除iOS和Android中的输入URL的控件条

你的老板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？

答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果 1 setTimeout(scrollTo,0,0,0);

请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。

10、如何禁止用户旋转设备

我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！

至少Apple webapp API已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容（也就是自适应），所以我们禁止开发者阻止浏览器的orientationchange事件，看来苹果公司的出发点是正确的，苹果确实不是一般的苹果。

iOS已经禁止开发者阻止orientationchange事件，那Android呢？对不起，我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件，但是在Android平台，确实也是阻止不了的。

11、如何检测用户是通过主屏启动你的webapp

看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能，按下iphoneipodipod touch底部工具中的小加号，或者ipad顶部左侧的小加号，就可以将当前的页面添加到设备的主屏，在设备的主屏会自动增加一个当前页面的启动图标，点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条，这样你的webapp就更加像是nativeapp了，还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直接访问站点时，navigator.standalone为false,从主屏启动webapp时，navigator.standalone为true，我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。在Android中从来没有添加到主屏这回事！

12、如何关闭iOS中键盘自动大写

我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。

13、iOS中如何彻底禁止用户在新窗口打开页面

有时我们可能需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self“来指定用户在新窗口打开，或者target属性保持空，但是你会发现iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面，这样的话，开发者指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技巧仅适用iOS对于Android平台则无效。

14、iOS中如何禁止用户保存图片＼复制图片

我们在第13条技巧中提到元素的-webkit-touch-callout属性，同样为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮，这样用户就无法保存＼复制你的图片了。

15、iOS中如何禁止用户选中文字

我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字。

16、iOS中如何获取滚动条的值

桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？

通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。

17、如何解决盒子边框溢出

当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。

18、如何解决Android 2.0以下平台中圆角的问题

如果大家够细心的话，在做wap站点开发时，大家应该会发现android 2.0以下的平台中问题特别的多，比如说边框圆角这个问题吧。

在对一个元素定义圆角时，为完全兼容android 2.0以下的平台，我们必须要按照以下技巧来定义边框圆角：

1＼-webkit这个前缀必须要加上（在iOS中，你可以不加，但android中一定要加）；

2＼如果对针对边框做样式定义，比如border:1px solid #000;那么-webkit-border-radius这属性必须要出现在border属性后。

3＼假如我们有这样的视觉元素，左上角和右上角是圆角时，我们必须要先定义全局的(4个角的圆角值)-webkit-border-radius:5px;然后再依次的覆盖左下角和右下角，-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-border:0;否则在android 2.0以下的平台中将全部显示直角，还有记住！-webkit这个前缀一定要加上！

19、如何解决android平台中页面无法自适应

虽然你的html和css都是完全自适应的，但有一天如果你发现你的页面在android中显示的并不是自适应的时候，首先请你确认你的head标签中是否包含以下meta标签：

1 <meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;” />

如果有的话，那请你再仔细的看清楚有没有这个属性的值width=device-width，如果没有请立即加上吧！

20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式 新的iOS系统也就是4.3版本，升级后对safari造成了一个bug：即使你添加了如下的meta标签，safari仍然会对页面中的5位连续的数字进行自动识别，并且将其重新渲染样式，也就是说你的css对该标签是无效的。

1 <meta name=”format-detection” content=”telphone=no” />

我们可以用一个比较龌龊的办法来解决。比如说支付宝wap站点中显示金额的标签，我们都做了如下改写：

1 <button class=”t-balance”style=”background:none;padding:0;border:0;”>95009.00</button>

第二篇：Web前端开发规范

Web前端开发规范

南京业禾网络科技有限公司 内部文档·注意保密 规范目的

为输出高质量的Web页面，提高团队协作效率，便于后台人员添加功能及前端后期优化与维护，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台Web页面开发。文档中如有错误或不当之处，由前端开发人员提出，经开发小组讨论决定后方可更改。

基本准则

符合W3C（万维网联盟）定义的Web标准，包括结构标准HTML、表现语言标准CSS、行为标准DOM和ECMAScript，必须通过W3C的HTML和CSS标准验证，网址为：

MarkUp Validator: /

CSS Validator: /css-validator/

总体要求为：语义化HTML，结构表现与行为分离，浏览器兼容性优良，代码简洁明了有序，性能上尽可能减小服务器负载，保证最快的解析速度。

黄金定律

不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。尽量遵循标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签和元素并保持最小的复杂度。

文件规范

1、html，css，js，images,fonts等文件目录组织如下如示： ├── xxx.html

├── css/

│ ├── xxx.css

│ ├── xxx.min.css

- 1 -

南京业禾网络科技有限公司 内部文档·注意保密

│ └── images/

│ │ ├── xxx.jpg

│ │ └── xxx.png

├── js/

│ ├── xxx.js

│ ├── xxx.min.js

└── images/

│ ├── xxx.jpg

│ └── xxx.png

└── fonts/

└── xxx.ttf

文件命名原则调整为所有字母小写，单词之间使用破折号（-）相连，压缩后的文件在原文件名（除扩展名）后添加.min。参考bootstrap文件命名：bootstrap-theme.css, bootstrap-theme.min.css。

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>

- 2 -

南京业禾网络科技有限公司 内部文档·注意保密 HTML5 doctype

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

<html>

<head>

</head>

</html>

语言属性

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

<html lang="en-us">

<!-- ... -->

</html>

中文使用zh，中文简体为zh-cn。

IE 兼容模式

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

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

字符编码

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

<head>

<meta charset="UTF-8">

</head>

- 3 -

南京业禾网络科技有限公司 内部文档·注意保密 引入 CSS 和 JavaScript 文件

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

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

<!-- In-document CSS -->

<style>

/* ... */

</style>

<!-- JavaScript -->

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

属性顺序

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）型属性

布尔型属性可以在声明时不赋值。

<input type="text" disabled>

- 4 -

南京业禾网络科技有限公司 内部文档·注意保密

<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文件外链至<head></head>之间，js文件置于</body>之前。

? 语义化HTML，如标题根据重要性用h*(同一页面只能有一个h1)，段落标记用p，列表

用ul，内联元素中避免嵌套块级元素。

? 书写链接地址时，建议在URL地址后面加上"/"，例如：href="http://proin.cc/"。 ? 在页面中不能使用style属性，即style="…"；所有样式必须写在css文件中。 ? 必须为含有描述性表单元素(input，textarea)添加label，如：

<p>姓名:<input type="text" id="name" name="name" /></p>须写成：

<p><label for="name">姓名：</label><input type="text" id="name" /></p> ? 能以背景形式呈现的图片，尽量写入css样式中。

? 给重要的元素和截断的元素加上title。

? 建议给区块代码及重要功能（比如循环）加上注释，方便后台添加功能。

? 不是标签一部分的特殊符号都用编码表示，出现在内容中的特殊符号都需要用编码形式

- 5 -

南京业禾网络科技有限公司 内部文档·注意保密

表现出来，如：<：&lt，>：&gt，&）：&amp，"："，尽量使用&nbsp;代替空格。 ? 图片标签必须要有alt属性，如只起修饰作用而没有任何意义的图片可设置alt属性

值为空。如：<img src="a.gif" alt="">。

CSS书写规范

语法

? 使用两个空格的 soft tabs — 这是保证代码在各种环境下显示一致的唯一方式。 ? 使用组合选择器时，保持每个独立的选择器占用一行。

? 为了代码的易读性，在每个声明的左括号前增加一个空格。

? 声明块的右括号应该另起一行。

? 每条声明 : 后应该插入一个空格。

? 每条声明应该只占用一行来保证错误报告更加准确。

? 所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有他，你

的代码会更容易出错。

? 逗号分隔的取值，都应该在逗号之后增加一个空格。

? 不要在颜色值 rgb() 和 rgba() 中增加空格，并且不要带有取值前面不必要的 0 (比

如，使用 .5 替代 0.5)。

? 所有的十六进制值都应该使用小写字母，例如 #fff。因为小写字母有更多样的外形，

在浏览文档时，他们能够更轻松的被区分开来。

? 尽可能使用短的十六进制数值，例如使用 #fff 替代#ffffff。

? 为选择器中得属性取值添加引号，例如input[type="text"]。 他们只在某些情况下

可有可无，所以都使用引号可以增加一致性。

? 不要为 0 指明单位，比如使用 margin: 0; 而不是 margin: 0px;。

? 对这里提到的规则可参考 Wikipedia 中的。 /* Bad CSS */

.selector, .selector-secondary, .selector[type=text] {

padding:15px;

margin:0px 0px 15px;

background-color:rgba(0, 0, 0, 0.5);

box-shadow:0 1px 2px #CCC,inset 0 1px 0 #FFFFFF

- 6 -

南京业禾网络科技有限公司 内部文档·注意保密

}

/* Good CSS */

.selector,

.selector-secondary,

.selector[type="text"] {

padding: 15px;

margin: 0 0 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 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。

其他属性只在组件 内部 起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。

关于完整的属性以及他们的顺序，请参考 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;

- 7 -

南京业禾网络科技有限公司 内部文档·注意保密

/* 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;

}

媒体查询位置

尽量将媒体查询的位置靠近他们相关的规则。不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部。这样做只会让大家以后更容易忘记他们。这里是一个典型的案例。

.element { ... }

.element-avatar { ... }

.element-selected { ... }

@media (min-width: 480px) {

.element { ...}

.element-avatar { ... }

.element-selected { ... }

}

不要使用 @import

与 <link> 相比, @import 更慢，需要额外的页面请求，并且可能引发其他的意想不到的问题。应该避免使用他们，选择其他的方案：

使用多个 <link> 元素

使用 CSS 预处理器例如 Sass 或 Less 将样式编译到一个文件中

使用 Rails, Jekyll, 或者其他环境提供的功能，来合并你的 CSS 文件。

- 8 -

南京业禾网络科技有限公司 内部文档·注意保密

<!-- Use link elements -->

<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->

<style>

@import url("more.css");

</style>

前缀属性

当使用特定厂商的带有前缀的属性时，通过缩进使取值垂直对齐以便多行编辑。

在 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; }

- 9 -

南京业禾网络科技有限公司 内部文档·注意保密

.icon-home { background-position: 0 -20px; }

.icon-account { background-position: 0 -40px; }

属性简写

坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:

? padding

? margin

? font

? background

? border

? border-radius

大多数情况下，我们并不需要设置属性简写中包含的所有值。例如，HTML 头部只设置上下的 margin，所以如果需要，只设置这两个值。过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。 /* 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 中的嵌套

避免不必要的嵌套。可以进行嵌套，不意味着你应该这样做。只有在需要给父元素增加样式并且同时存在多个子元素时才需要考虑嵌套。

- 10 -

南京业禾网络科技有限公司 内部文档·注意保密

// 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和Id 命名

? class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。

破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。

? Id 名称中只能出现小写字符和下划线（underline）。

? 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。

? 名称应当尽可能短，并且意义明确。

? 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式

（presentational）的名称。

? 基于最近的父 class 或基本（base） class 作为新 class 的前缀。

- 11 -

南京业禾网络科技有限公司 内部文档·注意保密 ? 使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS

文件中。

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

.t { ... }

.red { ... }

.header { ... }

/* Good example */

.tweet { ... }

.important { ... }

.tweet-header { ... }

选择器

? 使用 classes 而不是通用元素标签来优化渲染性能。

? 建议避免使用在经常出现的组件中使用一些属性选择器 (例如，[class^="..."])。

浏览器性能会受到这些情况的影响。

? 减少选择器的长度，每个组合选择器选择器的条目应该尽量控制在 3 个以内。 ? 只在必要的情况下使用后代选择器 (例如，没有使用带前缀 classes 的情况)。 /* Bad example */

span { ... }

.page-container

#stream .stream-item .tweet .tweet-header .username { ... } .avatar { ... }

/* Good example */

.avatar { ... }

.tweet-header .username { ... }

.tweet .avatar { ... }

代码组织

? 以组件为单位组织代码。

? 制定一个一致的注释层级结构。

? 使用一致的空白来分割代码块，这样做在查看大的文档时更有优势。

? 当使用多个 CSS 文件时，通过组件而不是页面来区分他们。页面会被重新排列，而组

- 12 -

南京业禾网络科技有限公司 内部文档·注意保密

件移动就可以了。 /*

* 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 { ... }

图片规范

? 图片格式仅限于gif、png、jpg，图标、按钮等采用透明背景为主；除需要透明的图

片使用png、gif外其他图片都采用jpg格式。为尽量控制文件大小，大尺寸图片应避免使用png，尽量使用jpg。

? 命名全部使小写英文字母、数字和破折号（-）的组合，其中不得包含汉字、空格和特

殊字符。尽量使用易懂的词汇，便于团队其他成员理解。如：ad-left.gif、btn-submit.jpg；

? 在保证视觉效果的情况下选择最小的图片格式与图片质量，以减少加载时间。 ? 尽量减少使用半透明的png图片。

- 13 -