[TOC] # 运算符优先级 PHP与JS的基本语法结构非常相似，即便是在职多年的老手特别是双管前端与后台开发的程序员，常常会搞错某些最基础的东西。下面将PHP与JS的运算符列出，以便集中巩固基础知识。  运算符的方向中，左表示同级的（不必同一种运算符）表达式从左向右求值，右表示表达式从右向左求值。

[TOC] 编写好的CSS代码，有助提升页面的渲染速度。本质上，引擎需要解析的CSS规则越少，性能越好。MDN上将CSS选择符归类成四个主要类别，如下所示，性能依次降低。 *ID 规则* *Class 规则* *标签规则* *通用规则* 对效率的普遍认识是从Steve Souders在2009年出版的《[高性能网站建设进阶指南](http://click.union.360buy.com/JdClick/?unionId=16231&to=http://book.360buy.com/10067740.html)》开始，虽然该书中罗列的更加详细，但你也可以在[这里](http://csswizardry.com/2011/09/writing-efficient-css-selectors/)查看完整的引用列表，也可以在谷歌的《[高效CSS选择器的最佳实践](https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors)》中查看更多的细节。 本文我想分享一些我在编写高性能CSS中用到的简单例子和指南。这些都是受到[MDN 编写的高效CSS指南](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS)的启发，并遵循类似的格式。 --- 显然，这里只讲述了少数的规则，是我在我自己的CSS中，本着更高效和更易维护性而尝试遵循的规则。如果你想阅读更多的知识，我建议阅读MDN上的[编写高效的CSS](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS)和谷歌的[优化浏览器渲染指南](https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors)。 --- # 遵循一个标准的声明顺序 虽然有一些排列CSS属性顺序[常见的方式](http://css-tricks.com/new-poll-how-order-css-properties/)，下面是我遵循的一种流行方式。 ```css .someclass { 　　1.位置属性(position, top, right, z-index, display, float等) 　　2.大小(width, height, padding, margin) 　　3.文字系列(font, line-height, letter-spacing, color- text-align等) 　　4.背景(background, border等) 　　5.其他(animation, transition等) } ``` box-model从内向外写： `size -> padding -> border -> margin` # 后代选择符最烂 不仅性能低下而且代码很脆弱，html代码和css代码严重耦合，html代码结构发生变化时，CSS也得修改，这是多么糟糕，特别是在大公司里，写html和css的往往不是同一个人。 ~~~ // 烂透了 html div tr td {..} ~~~ # 避免链式（交集）选择符 这和过度约束的情况类似，更明智的做法是简单的创建一个新的CSS类选择符。 ```css // 糟糕 .menu.left.icon {..} // 好的 .menu-left-icon {..} ``` # 组织好的代码格式 代码的易读性和易维护性成正比。下面是我遵循的格式化方法。 ```css /*糟糕*/ .someclass-a, .someclass-b, .someclass-c, .someclass-d { ... } /* 好的 */ .someclass-a, .someclass-b, .someclass-c, .someclass-d { ... } /* 好的做法 */ .someclass { background-image: linear-gradient(#000, #ccc), linear-gradient(#ccc, #ddd); box-shadow: 2px 2px 2px #000, 1px 4px 1px 1px #ddd inset; } ``` # 参考 [编写更好的CSS代码](http://blog.jobbole.com/55067/)

[编写高效的CSS](编写高效的CSS.md) [PHP与JS运算符优先级比较](PHP与JS运算符优先级比较.md)

[TOC] # PHP相关 设置 `register_globals = off`; 设置 `error_reporting = E_ALL`，并且要修正所有的`error`和`warning`; 将实际的操作放在被引用的文件中。把引用文件放到不可以被直接浏览的目录下。 > `register_globals` 已自 PHP 5.3.0 起废弃并将自 PHP 5.4.0 起移除。 当``register_globals=Off``的时候，下一个程序接收的时候应该用`$_GET['user_name']`和`$_GET['user_pass']`来接受传递过来的值。（注：当`<form>`的method属性为post的时候应该用`$_POST['user_name']`和`$_POST['user_pass']`） 当`register_globals=On`的时候，下一个程序可以直接使用`$user_name`和`$user_pass`来接受值。 顾名思义，`register_globals` 的意思就是注册为全局变量，所以当 `On` 的时候，传递过来的值会被直接的注册为全局变量直接使用，而Off的时候，我们需要到特定的数组里去得到它。 所以，碰到上边那些无法得到值的问题的朋友应该首先检查一下你的 `register_globals` 的设置和你获取值的方法是否匹配。（查看可以用 `phpinfo()` 函数或者直接查看 `php.ini`）。

[TOC] # 输入和输出 ## 检查是否做了HTML代码的过滤 可能出现的问题：如果有人输入恶意的HTML代码，会导致窃取`cookie`, 产生恶意登录表单，和破坏网站。 ## 检查变量做数据库操作之前是否做了`escape` 可能出现的问题：如果一个要写入查询语句的字符串变量包含了某些特殊的字符，比如引号(',")或者分号(;) 可能造成执行了预期之外的操作。 建议采用的方法：使用`mysql_escape_string()`或实现类似功能的函数。 ## 检查输入数值的合法性 可能出现的问题：异常的数值会造成问题。如果对输入的数值不做检查会造成不合法的或者错误的数据存入UDB、存入其它的数据库或者导致意料之外的程序操作发生。 举例：如果程序以用户输入的参数值做为文件名，进行文件操作，恶意输入系统文件名会造成系统损毁。 ## 核实对cookie的使用以及对用户数据的处理 可能出现的问题：不正确的`cookie`使用可能造成用户数据泄漏。 ## 先申明后使用 XXX环境下的 PHP 代码编写要求所有的变量均需要先申明后使用，否则会有错误信息，**对于数组**，在使用一个不确定的 `key` 时，比如先进行 `isset()` 的判断，然后再使用；比如下面的代码： ~~~ $array ＝ array(); $var ＝ isset( $array[3] ) ? $array[3] : ''； ~~~ ## 严格的过滤和合法性验证 在XXX环境下，对 web 通过 `GET` 或者 `POST` 方法传递来的参数均要求进行**严格的过滤和合法性验证**，不推荐使用直接的 `$_GET` 、 `$_POST` 或者 `$_REQUEST` 获取，而通过 XXX 的 XXX_yiv 模块提供的方法获取和过滤处理，（类似ThinkPHP的I函数）。 ## 访问控制 对内部使用的产品或者供合作方使用的产品，要考虑增加访问控制。 ## logs 确保用户的保密信息没有记在`log`中(例如：用户的密码)； 确保对关键的用户操作保存了完整的用户访问记录。 ## https 对敏感数据的传输要采用https。

[TOC] # 安全规范 当我们尝试编码时，很多时候不知道如何去让自己的代码变得安全一点，因为我们缺乏安全常识，安全常识的规范可以帮你杜绝一些日常的菜鸟黑客的攻击，却不能阻止骨灰级专家们的凌厉攻势，所以更高深的安全我们还得从其他途径学习。

1. SQL语句不区分大小写(要大写全大写,小写全小写),但数据库和表的名称则区分大小写! 2. `NOT NULL`的意思是表中所有行的此属性必须有一个值;如果没有指定,该列可以为空(`NULL`); 3. `unsigned` 无符号的,意思是它只能是0或者一个正数;

> 参考：http://www.jbxue.com/article/9280.html ## php的大小写敏感问题整理： 我们知道，PHP语言对大小写敏感问题的处理有点乱，在编程时需要多加注意，特别是在linux平台中更要注意。 说明： 不鼓励用这些规则，仅作为学习研究之用。 >**在编程中，应当坚持“ _大小写敏感_ ”，遵循统一的代码规范。** ### 一、大小写敏感 1. 所有变量均区分大小写，包括普通变量以及PHP 超级全局变量。 ~~~`` <?php $abc = 'abcd'; echo $abc; //输出 'abcd' echo $aBc; //无输出 echo $ABC; //无输出 ?> ~~~ 2 .常量名默认区分大小写，通常都写为大写。 ~~~ <?php define("ABC","Hello World"); echo ABC; //输出 Hello World echo abc; //输出 abc ?> ~~~ 3 .php.ini配置项指令区分大小写 如 file_uploads = 1 不能写成 File_uploads = 1。 ### 二、大小写不敏感 1. 函数名、方法名、类名 不区分大小写，但推荐使用与定义时相同的名字。 ~~~ <?php function show(){ echo "Hello World"; } show(); //输出 Hello World 推荐写法 SHOW(); //输出 Hello World ?> ~~~ ~~~ <?php class cls{ static function func(){ echo "hello world"; } } Cls::FunC(); //输出hello world ?> ~~~ 2 .魔术常量不区分大小写，推荐大写,包括：__LINE__、__FILE__、__DIR__、__FUNCTION__、__CLASS__、__METHOD__、 __NAMESPACE__。 ~~~ <?php echo __line__; //输出 2 echo __LINE__; //输出 3 ?> ~~~ 3 .NULL、TRUE、FALSE不区分大小写。 ~~~ <?php $a = null; $b = NULL; $c = true; $d = TRUE; $e = false; $f = FALSE; var_dump($a == $b); //输出 boolean true var_dump($c == $d); //输出 boolean true var_dump($e == $f); //输出 boolean true ?> ~~~ 4 .类型强制转换，不区分大小写。 ~~~ <?php $a=1; var_dump($a); //输出 int 1 $b=(STRING)$a; var_dump($b); //输出string '1' (length=1) $c=(string)$a; var_dump($c); //输出string '1' (length=1) ?> ~~~

##包含文件     提取出来具有通用函数的包含文件，文件后缀以`.inc`来命名，表明这是一个包含文件。     如果有多个`.inc`文件需要包含多页面，请把所有`.inc`文件封装在一个文件里面，具体到页面只需要包换一个`.inc`文件就可以了。     如：`xxx_session.inc`、`xxx_comm.inc`、`xxx_setting.inc`、`myssql_db.inc`。     把以上文件以以下方式，封装在`xxx.basic.inc`文件里面： ~~~`` require_once('xxx_session.inc'); require_once('xxx_comm.inc'); require_once('xxx_setting.inc'); require_once('mysql_db.inc'); ~~~ ## PHP和HTML代码的分离问题     对性能要求不是很高的项目和应用，我们建议不采用 PHP 和 HTML 代码直接混排的方式书写代码，而采用 PHP 和 HTML 代码分离的方式，即采用模版的方式处理，这样一方面对程序逻辑结构更加清晰有利，也有助于开发过程中人员的分工安排，同时还对日后项目的页面升级该版提供更多便利。 **对于一些特殊情况，比如对性能要求很高的应用，可以不采用模版方式。** ## 类的构造函数 如果要在类里面编写构造函数，必须遵循以下规则：     a．不能在构造函数中有太多实际操作，顶多用来初始化一些值和变量；     b．不能在构造函数中因为使用操作而返回false或者错误，因为在声明和实例化一个对象的时候，是不能返回错误的； ##错误返回检测规则 检查所有的系统调用的错误信息，除非你要忽略错误。 为每条系统错误消息定义好系统错误文本，并记录错误LOG。 ##引用的使用     引用在程序中使用比较多，为了公用同一个内存，而不需要另外进行复制，XXX环境下的引用使用时，需要注意下面的情况；     在对函数的输入参数中使用引用时，不能在调用的时候在输入参数前加 `&` 来引用，而直接使用该变量即可，同时必须在函数定义的时候说明输入参数来自引用，比如下面的代码： ~~~ $a ＝ 1； function ab( &$var ) { $var ++； return $var； } $b ＝ ab($a); // 注意，此处不能使用 $b ＝ ab(&$a)的方式； echo $b."\n"； echo $a."\n"； ~~~ 此时 `$a` 和 ``$b`` 都是 2； XXX环境下对引用的特殊要求源自 php.ini 文件里面的`allow_call_time_pass_reference` 项设置，对外公开的版本是 `On`，这样就可以支持`&`直接加到调用函数时变量前面进行引用，但是这一方法遭到抗议，并可能在将来版本的 PHP/Zend 里不再支持。受到鼓励的指定哪些参数按引用传递的方法是在函数声明里。你被鼓励尝试关闭这一选项（使用`off`，XXX的所有运行环境下都是`off`）并确认你的脚本仍能正常工作，以保证在将来版本的语言里它们仍能工作。 ##PHP项目开发中的程序逻辑结构     对于 PHP 项目开发，尽量采用 `OOP` 的思想开发，尤其在 PHP5 以后，对于面向对象的开发功能大大提高。     在 PHP 项目中，我们建议将独立的功能模块尽量写成函数调用，对应一整块业务逻辑，我们建议封装成类，既可以提高代码可读性，也可以提高代码重用性。比如，我们通常将对数据库的接口封装成数据库类，有利于平台的移植。     重复的代码要做成公共的库。（除了我们在 `plug-in` 产品上遇到的情况，该产品系列有多个相类似的产品，为了尽可能地减少安装包尺寸，不适合将这些产品共用的所有函数做成公共的库）。

**每个程序均必须提供必要的注释，书写注释要求规范，参照PEAR提供的注释要求，为今后利用`phpdoc`生成 PHP 文档做准备。** ## 1、程序头注释块 每个程序头部必须有统一的注释块，规则如下：     a．必须包含本程序的描述；     b．必须包含作者；     c．必须包含书写日期；     d．必须包含版本信息；     e．必须包含项目名称；     f．必须包含文件的名称；     g．重要的使用说明，如类的调用方法、注意事项等； 参考例子如下： ~~~`` // // +---------------------------------------------------------+ // | PHP version 4.0 // +---------------------------------------------------------+ // | Copyright (c) 1997-2001 The PHP Group // +---------------------------------------------------------+ // | This source file is subject to of the PHP license, // | that is bundled with this packafile LICENSE, and is // | available at through the world-web at // | http://www.php.net/license/2_02.txt. // | If you did not receive a copy of the and are unable to // | obtain it through the world-wide-web,end a note to // | license@php.net so we can mail you a immediately. // +---------------------------------------------------------+ // | Authors: Stig Bakken // | Tomas V.V.Cox // // +———————————————————+ // // $Id: Common.php,v 1.8.2.3 2001/11/13 01:26:48 ssb Exp $ ~~~ ##2、类的注释 类的注释采用里面的参考例子方式： ~~~ /** * @ Purpose: * 访问数据库的类，以ODBC作为通用访问接口 * @Package Name: Database * @Author: Forrest Gump gump@crtvu.edu.cn * @Modifications: * No20020523-100: * odbc_fetch_into()参数位置第二和第三个位置调换 * John Johnson John@crtvu.edu.cn * @See: (参照) */ class Database { ... } ~~~ ##3、函数和方法的注释 函数和方法的注释写在函数和方法的前面，采用类似下面例子的规则： ~~~ /** * @Purpose: * 执行一次查询 * @Method Name: query() * @Param: string $queryStr SQL查询字符串 * @Param: string $username 用户名 * @Access: public * @Return: mixed 查询返回值（结果集对象） */ public function query （ $queryStr, $username ） { ... } ~~~ ##4、变量或者语句注释 程序中变量或者语句的注释遵循以下原则：     a．写在变量或者语句的前面一行，而不写在同行或者后面；     b．注释采用``/* */``的方式；     c．每个函数前面要包含一个注释块。内容包括函数功能简述，输入/输出参数，预期的返回值，出错代码定义；     d．注释完整规范；     e．把已经注释掉的代码删除，或者注明这些已经注释掉的代码仍然保留在源码中的特殊原因。 例子： ~~~ /** * @Purpose: * 数据库连接用户名 * @Attribute/Variable Name: db_user_name * @Type: string */ var db_user_name; ~~~ ##5、标注使用     IDE支持一些特殊注释，可以列出整个项目的特殊注释，方便后期的维护和代码检查，例如： ~~~ //@fixMe 表示需要修复项。如：修复了IP获取的一个安全漏洞 //@todo 表示需要完善的地方。如：这个函数的效率太低，需要改进。 ~~~     上述注释和java中的标注及注解比较相像。可以查看NetBeans中标注的效果。     不同的IDE对这类特殊注释的支持程度不一。为了编码效率和团队协作，建议在项目开发时使用IDE进行项目管理。     对于代码不推荐使用的函数或方法，使用@Deprecated注释；对于重载方法，使用@over load注释。

## 数据库表名 数据库表名命名遵循以下规范：     a．表名均使用小写字母；     b．表名使用统一前缀，且前缀不能为空（模块化，且可有效规避MySQL保留字）     c．对于多个单词组成的表名，使用_间隔；     d．对于普通数据表，使用`_t`结尾；     e．对于视图，使用`_v`结尾；     f．存储过程以`_proc`结尾；     j．触发器以`_tri`结尾；     h．Event调度以`_event`结尾。 例子：`user_info_t` 和 `book_store_v`等。 ## 数据库字段 数据库字段命名遵循以下规范：     a．全部使用小写；     b．多个单词间使用_间隔。     c．避免使用关键字和保留字。 例子：`user_name`、`rose_price`等。

> 参考：[ThinkPHP开发规范](http://document.thinkphp.cn/manual_3_2.html#develop_standard) 1。**普通变量**采用小写字母,多单词以“`_`”连接，例如：`$base_dir`、`$red_rose_price`等。 2。**静态变量**以“`s_`”开头，字母小写，多单词以“`_`”连接，例如：`$s_base_dir`、`$s_red_rose_prise`等。 3。**局部变量**以“`_`”开头，字母小写，多单词以“`_`”连接，例如：`$_base_dir`、`$_red_rose_price`等。 4。**全局变量**以“`G_`”开头，字母大写，多单词以“`_`”连接，知道一个变量的作用域是非常重要的。例如：`global $G_LOG_LEVEL`、`global $G_LOG_PATH`。 5。**session**以“`S_`”开头，字母大写，多单词以“`_`”连接，例子：`$S_BASE_DIR`、`$S_RED_ROSE_PRICE`等。 6。确保文件的命名和**调用大小写一致**，是由于在类Unix系统上面，对大小写是敏感的（而ThinkPHP在调试模式下面，即使在Windows平台也会严格检查大小写）； 7。 **类**的声明按照“帕斯卡命名法”，例如：`class MyClass` 或 `class DbOracle`等。 8。**类文件**要求以`.class.php`为后缀，使用驼峰法命名，并且首字母大写，例如 `DbMysql.class.php`。 9。通常下划线开头的方法属于**私有方法**：`_parseType`。 10。**方法**的命名使用“驼峰法”，或者使用下划线“_”连接，例如 `getUserName`。 11。**函数**的命名使用小写字母和下划线的方式，例如 `get_client_ip`。 12。**属性**的命名使用驼峰法，并且首字母小写或者使用下划线“`_`”，例如 `tableName`、`_instance`，通常下划线开头的属性属于**私有属性**； 以双下划线“`__`”打头的函数或方法作为**魔法方法**，例如 `__call` 和 `__autoload`。 13。**常量**以大写字母和下划线命名，例如 ``HAS_ONE``和 `MANY_TO_MANY`。 14。类的**命名空间**地址和所在的路径地址一致，例如`Home\Controller\UserController`类所在的路径应该是`Application/Home/Controller/UserController.class.php`。 15。**配置参数**以大写字母和下划线命名，例如`HTML_CACHE_ON`。 16。**语言变量**以大写字母和下划线命名，例如`MY_LANG`。以下划线打头的语言变量通常用于**系统语言变量**，例如 `_CLASS_NOT_EXIST_`， 没有强制的规范，可以根据团队规范来进行。 17。**类名和文件名一致**（包括上面说的大小写一致）,程序中所有的类名唯一，例如`UserController`类的文件命名是`UserController.class.php`， ``InfoModel``类的文件名是`InfoModel.class.php`， 并且不同的类库的类命名有一定的规范。 ~~~ //类统一采用：DemoTest.class.php //接口统一采用：DemoTest.interface.php //其他按照各自的方式：demoTest.{style}.php ~~~ 18。**数据表和字段**采用小写加下划线方式命名，并注意字段名不要以下划线开头，例如 think_user 表和 user_name字段是正确写法，类似 _username 这样的数据表字段可能会被过滤。 19。确保文件的命名和调用大小写一致，是由于在**类Unix系统上面，对大小写是敏感的**； 20。**PHP关键词**及系统函数全部小写，`false/true/null`也全部小写。 21。所有的PHP程序**代码块标记**均使用`<?php`，（短标签容易和xml混淆，php从5.4开始默认不支持短标记）。 22。对于只有php的代码文件，建议省略结尾处的‘`?>`’。这是为了防止多余的空格或其他字符影响到代码。 23、**抽象类**应以Abstract开头。 24。**接口**命名规则： i）采用和类相同的命名规则，但在其命名前加‘`i`’字符，表示接口。如:iDataBase。 ii）尽量保持和实现它的类名一致。 接口文件可使用“iDatabase.interface.php”命名。 **25、程序中所有类名唯一。**

[TOC] # 1、缩进 使用4个空格作为缩进，而不使用tab缩进。 4个空格常被作为缩进排版的一个单位。缩进的确切解释并未详细指定(空格 vs. 制表符)。 一个制表符等于8个空格(而非4个)，所以在某些编辑器中，需要特别指定一下制表符的长度为4（UltraEdit），而在某些编辑器中，会将制表符转换为空格。 # 2、大括号{}书写规则 `{` 直接跟在控制语句之后，不换行，如： ~~~ for ( $i=0;$i<$count;$i++ ) { echo 'test'; } ~~~ # 3、小括号()和函数、关键词等 小括号、关键词和函数遵循以下规则：     a．不要把小括号和关键词紧贴在一起，要用一个空格间隔；如`if ( $a<$b )； `     b．小括号和函数名间没有空格；如`$test = date("ymdhis")；`     c．除非必要，不要在``return``返回语句中使用小括号。 如`return $a；`。 # 4、=符号书写 在程序中=符号的书写遵循以下规则：     a．在=符号的两侧，均需留出一个空格；如 `$a = $b` 、`$a = 'test'`等；     b．在=符号与!、=、<、>等符号相邻时，不需留一个空格；如 `if ( $a == $b )` 、`if ( $a != $b )` 等；     c．在一个申明块，或者实现同样功能的一个块中，要求=号尽量上下对其，左边可以为了保持对齐使用多个空格，而右边要求空一个空格；如下例： ~~~ $testa = $aaa; $testaa = $bbb; $testaaa = $ccc; ~~~ # 5、if else swith for while等书写 对于控制结构的书写遵循以下规则：     a．在if条件判断中，如果用到常量判断条件，将常量放在等号或不等号的左边，例如：`if ( 6 == $errorNum )` ,因为如果你在等式中漏了一个等号，语法检查器会为你报错，可以很快找到错误位置，这样的写法要注意；     b．`switch`结构中必须要有`default`块；     c．在 `for` 和 `wiile` 的循环使用中，要警惕 `continue`、 `break` 的使用，避免产生类似 `goto` 的问题。 # 6、语句断行 在代码书写中，遵循以下原则：     a．尽量保证程序语句一行就是一句，而不要让一行语句太长产生折行；     b．尽量不要使一行的代码太长，一般控制在120个字符以内；     c．如果一行代码太长，请使用类似 .= 的方式断行书写；     d．对于执行数据库的sql语句操作，尽量不要在函数内写sql语句，而先用变量定义sql语句，然后在执行操作的函数中调用定义的变量。 例子： ~~~ $sql = 'SELECT username,password,address,age,postcode FROM test_t '; $sql .= ' WHERE username=\'aaa\''; $res = mysql_query($sql); ~~~ ##7、数字 一个在源代码中使用了的赤裸裸的数字是不可思议的数字，因为包括作者，在三个月内，没人知道它的含义。例如： ~~~ if ( 22 == $foo ) { start_thermo_nuclear_war(); } elseif ( 19 == $foo){ refund_lotso_money(); } else { cry_cause_in_lost(); } ~~~ 你应该用`define()`来给你想表示某样东西的数值一个真正的名字，而不是采用赤裸裸的数字，例如： ~~~ define('PRESIDENT_WENT_CRAZY', '22'); define('WE_GOOFED', '19'); define('THEY_DIDNT_PAY', '16'); if ( PRESIDENT_WENT_CRAZY == $foo ) { start_thermo_nuclear_war(); } elseif ( WE_GOOFED == $foo){ refund_lotso_money(); } elseif ( THEY_DIDNT_PAY == $foo ){ infinite_loop(); } else { cry_cause_in_lost(); } ~~~ # 8、判断 遵循以下规则：     a．不能使用 1/0 代替` true/false`，在 PHP 中，这是不相等的；     b．不要使用非零的表达式、变量或者方法直接进行 `true/false` 判断，而必须使用严格的完整 `true/false` 判断； 如：不使用 `if ( $a )` 或者 `if ( checka() )` 而使用 ``if ( FALSE != $a )`` 或者 `if ( FALSE != check() )`。 ##9、避免嵌入赋值 在程序中避免下面例子中的嵌入式赋值： 不使用这样的方式： ```php while ( $a != ( $c = getchar() ) ) { process the character } ``` # 10、习惯与约定     通常变量的命名应该是有意义的单词，但在循环体中临时变量采用“IN规则”。     IN规则原本来自FORTRAN，在FORTRAN中，以字母表中I~N范围内字母开头的变量默认为整型变量。循环体中一般是整型变量，故习惯用I~N字母作为循环体中的变量命名。同时，I是标识符（Identify）首字母。如下： ```php function bubble_sort($array){     $count = count($array);     for($i=0;$i<$count; $s++){      for($j=$count-1;$j<$i;$j--){      if($array[$j]<$array[$j-1]){      $tmp = $array[$j];      $array[$j] = $array[$j-1];      $array[$j-1] = $tmp;      }      }     }     return $array; } ```     

>参考：[PHP 开发规范](http://www.kancloud.cn/itsky71/php-standard/135/)     技术部php开发规范将参照PEAR的规范，基本采用PEAR指定的规范，在其基础上增加、修改或删除部分适合具体开发环境的规范。     本规范包含了PHP开发时程序编码中命名规范、代码缩进规则、控制结构、函数调用、函数定义、注释、包含代码、PHP标记、文件头的注释块、URL样例、常量命名等方面的规则。 * * * * *     在开头就提到编码规范的目的是提高工作效率，保证开发的有效性和合理性，并最大程度提高程序代码的可读性和可重复利用性，减少返工，提高沟通效率。好的代码风格，见代码如见人，读代码时就好像和作者本人在亲切交谈。     PHP是一门脚本语言，用于网站开发，和JavaScript类似，本身就是一门不严谨的语言，有人评价PHP是“dirty and fast language”（脏而快的开发语言），所以规范显得更重要。     最后要说明的是，本规范不是强制，也不是标准。“约定大于规范”，如果有的规范太死板，不适应你所在团队，你可以不采用，而是按照自己的规范进行。     强烈建议使用大型的IDE进行代码开发和管理，并使用合适的版本控制软件。

[TOC] [Google JavaScript代码风格指南](http://keleyi.com/ziliao/googlejavascriptstyle.htm)

什么是最佳的JavaScript代码编程规范？这可能是一个众口难调的问题。那么，不妨换个问题，什么代码规范最流行？ [sideeffect.kr](http://segmentfault.com/a/1190000000410316#)通过分析GitHub上托管的开源代码，得出了一些[有趣的结果](http://sideeffect.kr/popularconvention#javascript)。一起来看看吧。  **行末逗号**： ~~~ var foo = 1, bar = 2, baz = 3; var obj = { foo: 1, bar: 2, baz: 3 }; ~~~ **空格缩进**： ~~~ 这年头大家都爱用空格了。使用空格缩进可以保证不同的开发者、不同的编辑器设置下看到的结果是一样的。 空格，81.1 %；Tab，18.9 %。（基于2,019,550次提交统计。） ~~~ **函数名称后无空格**： ~~~ function foo() { return "bar"; } ~~~ **函数参数与括号间无空格**： ~~~ function fn(arg1, arg2) { //or if (true) { ~~~ **对象字面量的冒号后加空格，冒号前不加**： ~~~ { foo: 1, bar: 2, baz: 3 } ~~~ **条件语句关键字后加空格**： ~~~ if (true) { //... } while (true) { //... } switch (v) { //... } ~~~ **单引号、双引号**： `单引号，56.791 %；双引号，43.209 %。（基于1,705,910次提交。）`

## 分号 分号表示语句的结束。大多数情况下，如果你省略了句尾的分号，Javascript会自动添加。 > **不要省略句末的分号。** ## with语句 with可以减少代码的书写，但是会造成混淆。 > **不要使用with语句。** ## 相等和严格相等 Javascript有两个表示"相等"的运算符："相等"（==）和"严格相等"（===）。 > **不要使用"相等"（==）运算符，只使用"严格相等"（===）运算符。** ## 全局变量 Javascript最大的语法缺点，可能就是全局变量对于任何一个代码块，都是可读可写。这对代码的模块化和重复使用，非常不利。 >**避免使用全局变量；如果不得不使用，用大写字母表示变量名，比如UPPER_CASE。** ## Javascript会自动将变量声明"提升"（hoist）到代码块（block）的头部。 > **所有变量声明都放在函数的头部。 规则10：所有函数都在使用之前定义。** ## 自增和自减运算符 自增（++）和自减（--）运算符，放在变量的前面或后面，返回的值不一样，很容易发生错误。 事实上，所有的++运算符都可以用"+= 1"代替。 >**不要使用自增（++）和自减（--）运算符，用+=和-=代替。** ## 区块 如果循环和判断的代码体只有一行，Javascript允许该区块（block）省略大括号。 >**总是使用大括号表示区块。** ## new命令 Javascript使用new命令，从建构函数生成一个新对象。 ```js var o = new myObject(); ``` 这种做法的问题是，一旦你忘了加上new，myObject()内部的this关键字就会指向全局对象，导致所有绑定在this上面的变量，都变成全部变量。 如果不得不使用new，为了防止出错，最好在视觉上把建构函数与其他函数区分开来。 >**不要使用new命令，改用Object.create()命令。 建构函数的函数名，采用首字母大写（InitialCap）；其他函数名，一律首字母小写。**

[TOC] # 推荐参考 [JSDoc](http://usejsdoc.org/ ) ## 什么是JSDoc JSDoc是一个根据javascript文件中注释信息，生成JavaScript应用程序或库、模块的API文档 的工具。你可以使用他记录如：命名空间，类，方法，方法参数等。类似JavaDoc和PHPDoc。现在很多编辑器或IDE中还可以通过JSDoc直接或使用插件生成智能提示。从而使开发者很容易了解整个类和其中的属性和方法，并且快速知道如何使用，从而提高开发效率，降低维护成本。 ## 使用JSDoc JSDoc本质是代码注释，所以使用起来非常方便，但是他有一定的格式和规则，只要了解这些，那么后面的事情，比如生产文档，生成智能提示都可以通过工具来完成。 ## 注释规范 目前脚本、样式的注释格式都有一个已经成文的约定规范，最初是YUI Compressor制定。 ~~~ /** * 这里的注释内容【会】被压缩工具压缩 */ /*！ * 这里的注释内容【不会】被压缩工具压缩 * 与上面一个注释块不同的是，第2个*换成了! */ ~~~ 其中说到这里说到的压缩工具有[YUI Compressor](http://yui.github.io/yuicompressor/) 、[Google Closure Compiler](http://code.google.com/closure/compiler/)、[gulp-uglify](https://github.com/terinjokes/gulp-uglify)、[grunt-contrib-uglify](https://github.com/gruntjs/grunt-contrib-uglify)等，这些压缩工具都支持以上的压缩约定。常常把文件的关键信息放在第2种注释内容里，如文件名称、版本号、作者等。 关于这些关键信息，都由一些关键词和一定的格式来书写。关键词书写格式为： 使用`@key desc`格式来书写，常用的关键词有： <table> <thead> <tr> <th>关键词</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>@auhor</code></td> <td>作者</td> </tr> <tr> <td><code>@param</code></td> <td>参数</td> </tr> <tr> <td><code>@example</code></td> <td>示例</td> </tr> <tr> <td><code>@link</code></td> <td>链接</td> </tr> <tr> <td><code>@namespace</code></td> <td>命名空间</td> </tr> <tr> <td><code>@requires</code></td> <td>依赖模块</td> </tr> <tr> <td><code>@return</code></td> <td>返回值</td> </tr> <tr> <td><code>@version</code></td> <td>版本号</td> </tr> </tbody> </table> 其中，param关键词的格式为： ``` /** * @param {String} 参数描述 */ ``` > 参考资料 YUI Compressor注释规范：http://yui.github.io/yuidoc/syntax/ JSDOC：http://usejsdoc.org/ FED文章：http://frontenddev.org/article/sublime-does-text-3-plug-in-docblockr-with-javascript-comments-specification.html

[TOC] # 命名 1. 变量命名只允许有字母、数字、`$`和`_`下划线。 2. javascript 的变量和其他语法元素名都是区分大小写。 3. 使用jQuery对象时候，使用`$var`的形式，让人很明白这是jQuery的对象（虽然有些库也会使用`$`），虽然W3school不推荐：变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做） 4. [浅谈 JavaScript 编程语言的编码规范](http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/) # 遵行惯用法: 1. 注释符号 `//` 后应该空一格； 2. 防止变量提升，应先声明后使用（JSHint 会提醒出 `_height` 存在变量提升以及定义后未使用的错误）； 3. 不应该使用硬编码，并且重复几次（ ID 后缀名可以定义到常量里，用大写字母）； 4. 不应该有两个配置属性，含义不明（`this.opts` 和 `this._options`）； 5. 若两次以上引用同一对象的属性，应该定义到局部变量再引用（`var options = this._options`）； 6. 不应该同时使用两种属性命名风格（`colModel` 和 `table_body`）； 7. 局部变量名应该尽可能短，而方法名应该尽可能完整（不应该同时即有 fromatTpl 又有 parseTemplate）； 8. 局部变量名不需要用下划线开头，仅对象私有属性和私有方法有此必要；变量名不需要带类型属性（`_thdoms` 叫 `ths` 就好）； 9. 使用 JavaScript 时，for 循环基本可以避免（比如 jQuery 有 `$.each`, `$.map`，`$.filter`, `$.grep` 等等高阶函数可用）； 10. jQuery 对象名习惯以 `$` 开头，以便区分 DOM 对象；jQuery 查询应尽量使用 context （如 `this.$table = $('table', this.$element)` ）； 11. jQuery DOM 操作和原生 DOM 操作不应该混用（已经使用 jQuery 的情况，就应该坚持使用 jQuery 来操作 DOM，避免丑陋的原生操作）； 12. DOM 元素构造出来，也不应该再到文档中查询一遍了（图上的构造太复杂，一眼真看不懂）； ***** Code Review 把程序写正确还只是跨出了第一步。把代码交给你的同事和朋友 review，这是学习经验、共同提高 最快的办法。

> 参考：https://github.com/doyoe/html-css-guide # HTML/CSS开发规范指南 ## 目录 [TOC] ## 规范概述 规范的制定是我们长期以来对工作的积累与沉淀的产物，帮助我们更快、更好、更高效的完成繁重、复杂、多样化的任务，我们制作规范的主要目的在于： * 降低每个组员介入项目的门槛成本； * 提高工作效率及协同开发的便捷性； * 高度统一的代码风格； * 提供一整套HTML、CSS解决方案，来帮助开发人员快速做出高质量的符合要求的页面。 <a name="profile"></a> ## 基本信息 规范名称 | Cook --------|------| 当前版本 | v1.0 beta 规范发起 | [杜瑶(@doyoe)](http://weibo.com/doyoe) 参与人群 | Qunar FED 最后更新 | 2015.03.20 <a name="general"></a> ## 通用约定 <a name="directory"></a> ### 1.文档目录结构 ``` |-- 项目名 |-- src 开发环境 |-- html 静态页面模板目录 |-- bgimg 背景图目录（假设有的话） |-- image 前景图目录（假设有的话） |-- font 字体目录（假设有的话） |-- scripts 脚本目录 |-- styles（Yo） 样式目录 |-- lib 基础库 |-- core 核心代码：reset |-- element 元素 |-- fragment 公用碎片 |-- layout 布局 |-- widget 组件 |-- usage 项目具体实现 |-- project 某个子项目 |-- core 核心代码：桥接lib中的core，可以进行项目级扩展 |-- fragment 项目公用碎片 |-- module 模块 |-- page page桥接文件目录：src-list |-- export page pack之后的文件目录 |-- prd 生产环境 |-- bgimg 背景图目录（假设有的话） |-- image 前景图目录（假设有的话） |-- font 字体目录（假设有的话） |-- scripts 脚本目录 |-- styles（Yo） 样式目录 |-- project1 子项目 |-- index.css |-- login.css |-- and etc... |-- project2 子项目 |-- index.css |-- login.css |-- and etc... |-- and etc... ``` > `src`, `scripts`, `styles` 三个目录是为了和现有项目保持一致，避免修改过大，所以保持不变。 > `html` 目录，用于存放前端开发做的静态页面，以备查阅、备份、review或给后端套页面。 > `bgimg`, `image`, `font` 三个目录在Qunar一般不会直接存在，因为我们有source服务器，这些资源都会在那上面管理；不过特殊情况也会有，比如一些独立的项目，没有使用source的，那么就需要遵循这样的目录划分。 > 至于 `html`, `bgimg`, `image`, `font` 这几个目录为什么没有加 `s`，主要是因为不希望大家去想某个目录是否为复数，简单点就好。 > `prd` 为生产环境目录，以 `xxx` 项目中的一个子项目 `mobile` 为例，其生产环境中的某个CSS外链大致如下：`//sitename.com/prd/styles/mobile/index.css` <a name="separate"></a> ### 2.分离 结构（HTML）、表现（CSS）、行为分离（JavaScript） > 将结构与表现、行为分离，保证它们之间的最小耦合，这对前期开发和后期维护都至关重要。 <a name="file-name"></a> ### 3.文件命名 * CSS模块文件，其文件名必须与模块名一致； 假定有这样一个模块： .m-detail { sRules; } .m-detail-hd { sRules; } .m-detail-bd { sRules; } .m-detail-ft { sRules; } > 那么该模块的文件名应该为：`m-detail.css` * CSS页面文件，其文件名必须与HTML文件名一致； > 假定有一个HTML页面叫 `product.html`，那么其相对应的CSS页面文件名应该为：`product.css` > 假定现在有一个 `product.html`，里面有2个模块： +<section class="m-list"> +<section class="m-info"> 那么开发人员能快速找到与该页面相关的3个直接CSS文件，包括：`product.css`, `m-list.css`, `m-info.css` <a name="indentation"></a> ### 4.缩进 使用tab（4个空格宽度）来进行缩进，可以在IDE里进行设置 <a name="encoding"></a> ### 5.编码 * 以 UTF-8 无 BOM 编码作为文件格式； * 在HTML中文档中用 `<meta charset="utf-8" />` 来指定编码； * 为每个CSS文档显示的定义编码，在文档首行定义 `@charset "utf-8";` > 在 Sass 中，如果文档中出现中文，却未显示定义编码，将会编译出错，为了统一各种写法，且提前规避错误几率，统一要求每个CSS文档都需要定义编码 <a name="lowercase"></a> ### 6.小写 * 所有的HTML标签必须小写； * 所有的HTML属性必须小写； * 所有的样式名及规则必须小写。 <a name="comment"></a> ### 7.注释 尽可能的为你的代码写上注释。解释为什么要这样写，它是新鲜的方案还是解决了什么问题。 <a name="todo"></a> ### 8.待办事项 用 TODO 标示待办事项和正在开发的条目 <!-- TODO: 图文混排 --> <div class="g-imgtext"> <img src="1.png" alt="" /> ... /* TODO: 图文混排 comm: g-imgtext */ .g-imgtext { sRules; } <a name="end-line-space"></a> ### 9.行尾空格 删除行尾空格，这些空格没有必要存在 <a name="protocol-relative-url"></a> ### 10.省略嵌入式资源协议头 省略图像、媒体文件、样式表和脚本等URL协议头部声明 ( http: , https: )。如果不是这两个声明的URL则不省略。 省略协议声明，使URL成相对地址，防止内容混淆问题和导致小文件重复下载（这个主要是指http和https交杂的场景中）。 不推荐： <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> 推荐： <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> 不推荐： ``` .example { background: url(http://www.google.com/images/example); } ``` 推荐： ``` .example { background: url(//www.google.com/images/example); } ``` > 注：省略协议头在IE7-8下会有一点小问题，外部CSS文件（link和@import）会被下载两遍，所以该条目的约定看具体项目。 <a name="validator"></a> ### 11.代码有效性 * 使用 [W3C HTML Validator](http://validator.w3.org/) 来验证你的HTML代码有效性； * 使用 [W3C CSS Validator](http://jigsaw.w3.org/css-validator/) 来验证你的CSS代码有效性。 > 代码验证不是最终目的，真的目的在于让开发者在经过多次的这种验证过程后，能够深刻理解到怎样的语法或写法是非标准和不推荐的，即使在某些场景下被迫要使用非标准写法，也可以做到心中有数。 <a name="html"></a> ## HTML约定 <a name="doctype"></a> ### 1.文档类型 * 统一使用HTML5的标准文档类型：`<!DOCTYPE html>`； > HTML5文档类型具备前后兼容的特质，并且易记易书写 * 在文档doctype申明之前，不允许加上任何非空字符； > 任何出现在doctype申明之前的字符都将使得你的HTML文档进入非标准模式 * 不允许添加 `<meta>` 标签强制改变文档模式。 > 避免出现不可控的问题 <a name="type"></a> ### 2.省略type属性 在调用CSS和JavaScript时，可以将type属性省略不写 不允许： <link type="text/css" rel="stylesheet" href="base.css" /> <script type="text/javascript" src="base.js"></script> 应该： <link rel="stylesheet" href="base.css" /> <script src="base.js"></script> > 因为HTML5在引入CSS时，默认type值为text/css；在引入JavaScript时，默认type值为text/javascript <a name="attribute"></a> ### 3.省略属性值 非必须属性值可以省略 不允许： <input type="text" readonly="readonly" /> <input type="text" disabled="disabled" /> 应该： <input type="text" readonly /> <input type="text" disabled /> > 这里的 readonly 和 disabled 属性的值是非必须的，可以省略不写，我们知道HTML5表单元素新增了很多类似的属性，如: required <a name="quots"></a> ### 4.用双引号包裹属性值 所有的标签属性值必须要用双引号包裹，同时也不允许有的用双引号，有的用单引号的情况 不允许： <a href=http://www.qunar.com class=home>去哪儿网</a> 应该： <a href="http://www.qunar.com" class="home">去哪儿网</a> <a name="nest"></a> ### 5.嵌套 所有元素必须正确嵌套 * 不允许交叉； 不允许： <span><dfn>交叉嵌套</span></dfn> 应该： <span><dfn>交叉嵌套</dfn></span> * 不允许非法的子元素嵌套。 不允许： <ul> <h3>xx列表</h3> <li>asdasdsdasd</li> <li>asdasdsdasd</li> </ul> 应该： <div> <h3>xx列表</h3> <ul> <li>asdasdsdasd</li> <li>asdasdsdasd</li> </ul> </div> * 不推荐inline元素包含block元素； 不推荐： <span> <h1>这是一个块级h1元素</h1> <p>这是一个块级p元素</p> </span> 推荐： <div> <h1>这是一个块级h1元素</h1> <p>这是一个块级p元素</p> </div> > 规则可参考： > HTML4/XHTML1.0 Strict: [嵌套规则](http://www.cs.tut.fi/~jkorpela/html/strict.html)。 > > HTML5: [嵌套规则](http://www.w3.org/TR/html5/) > > 举个例子，在HTML5中，a元素同时属于 Flow content, Phrasing content, Interactive content, Palpable content 4个分类，那些子元素是 phrasing 元素的元素可以是 a 的父元素，a 允许的子元素是以它的父元素允许的子元素为准，但不能包含 interactive 元素。 <a name="close-tag"></a> ### 6.标签闭合 所有标签必须闭合 不允许： <div>balabala... <link rel="stylesheet" href="*.css"> 应该： <div>balabala...</div> <link rel="stylesheet" href="*.css" /> > 虽然有些标记没有要求必须关闭，但是为了避免出错的几率，要求必须全部关闭，省去判断某标记是否需要关闭的时间 <a name="perceivable"></a> ### 7.多媒体替代方案 * 为img元素加上alt属性； * 为视频内容提供音轨替代； * 为音频内容提供字母替代等等。 不推荐： <img src="banner.jpg" /> 推荐： <img src="banner.jpg" alt="520即将到来，爱就大声说出来" /> > alt属性的内容为对该图片的简要描述，这对于盲人用户和图像损毁都非常有意义，即无障碍。对于纯粹的装饰性图片，alt属性值可以留空，如 alt="" <a name="friendly"></a> ### 8.有效操作 为表单元素label加上for属性 不允许： <input type="radio" name="color" value="0" /><label>蓝色</label> <input type="radio" name="color" value="1" /><label>粉色</label> 应该： <input type="radio" id="blue" name="color" value="0" /><label for="blue">蓝色</label> <input type="radio" id="pink" name="color" value="1" /><label for="pink">粉色</label> > for属性能让点击label标签的时候，同时focus到对应的 input 和 textarea上，增加响应区域 <a name="html-comment"></a> ### 9.按模块添加注释 在每个模块开始和结束的地方添加注释 <!-- 新闻列表模块 --> <div class="m-news g-mod" ... <!-- /新闻列表模块 --> <!-- 排行榜模块 --> <div class="m-topic g-mod" ... <!-- /排行榜模块 --> > 注释内容左右两边保留和注释符号有1个空格位，在注释内容内不允许再出现中划线“-”，某些浏览器会报错。 > > 注释风格保持与原生HTML的语法相似：成对出现 `<!-- comment --><!-- /comment -->` <a name="format"></a> ### 10.格式 * 将每个块元素、列表元素或表格元素都放在新行； * inline元素视情况换行，以长度不超过编辑器一屏为宜； * 每个子元素都需要相对其父级缩进（参见[缩进约定](#indentation)）。 不推荐： <div><h1>asdas</h1><p>dff<em>asd</em>asda<span>sds</span>dasdasd</p></div> 推荐： <div> <h1>asdas</h1> <p>dff<em>asd</em>asda<span>sds</span>dasdasd</p> </div> <a name="semantic"></a> ### 11.语义化标签 * 根据HTML元素的本身用途去使用它们； * 禁止使用被废弃的用于表现的标签，如 center, font 等； * 部分在XHTML1中被废弃的标签，在HTML5中被重新赋予了新的语义，在选用时请先弄清其语义，如:b, i, u等。 不允许： <p>标题</p> 应该： <h1>标题</h1> > 虽然使用p标签，也可以通过CSS去定义它的外观和标题相同，但p标签本身的并不是表示标题，而是表示文本段落 > 参阅：[HTML5 Elements](http://www.w3.org/TR/html5/) <a name="html-module"></a> ### 12.模块化 * 每个模块必须有一个模块名； * 每个模块的基本组成部分应该一致； * 模块的子节点类名需带上模块名（防止模块间嵌套时产生不必要的覆盖）； * 孙辈节点无需再带模块名。 代码如： <section class="m-detail"> <header class="m-detail-hd"> <h1 class="title">模块标题</h1> </header> <div class="m-detail-bd"> <p class="info">一些实际内容</p> </div> <footer class="m-detail-ft"> <a href="#" class="more">更多</a> </footer> </section> > 其中 `.m-detail-hd`, `.m-detail-bd`, `.m-detail-ft` 为可选，视具体模块情况决定是否需要抽象为这种 **头，中，尾** 的结构 <a name="css"></a> ## CSS约定 <a name="link"></a> ### 1.文件引用 * 一律使用link的方式调用外部样式 * 不允许在页面中使用 `<style>` 块； * 不允许在 `<style>` 块中使用 `@import`； * 不允许使用 `style` 属性写行内样式。 > 一般情况下，在页面中只允许使用 `<link />` 标签来引用CSS文件， <a name="element"></a> ### 2.命名-组成元素 * 命名必须由单词、中划线①或数字组成； * 不允许使用拼音（约定俗成的除外，如：youku, baidu），尤其是缩写的拼音、拼音与英文的混合。 不推荐： .xiangqing { sRules; } .news_list { sRules; } .zhuti { sRules; } 推荐： .detail { sRules; } .news-list { sRules; } .topic { sRules; } > ①我们使用中划线 “-” 作为连接字符，而不是下划线 "_"。 > > 我们知道2种方式都有不少支持者，但 "-" 能让你少按一次shift键，并且更符合CSS原生语法，所以我们只选一种目前业内普遍使用的方式 <a name="word"></a> ### 3.命名-词汇规范 * 不依据表现形式来命名； * 可根据内容来命名； * 可根据功能来命名。 不推荐： left, right, center, red, black 推荐： nav, aside, news, type, search <a name="abbr"></a> ### 4.命名-缩写规范 * 保证缩写后还能较为清晰保持原单词所能表述的意思； * 使用业界熟知的或者约定俗成的。 不推荐： navigation   => navi header   => head description  => des 推荐： navigation   => nav header       => hd description  => desc <a name="prefix"></a> ### 5.命名-前缀规范 前缀|说明|示例 ---|---|---| g-|全局通用样式命名，前缀g全称为global，一旦修改将影响全站样式|g-mod m-|模块命名方式|m-detail ui-|组件命名方式|ui-selector js-|所有用于纯交互的命名，不涉及任何样式规则。JSer拥有全部定义权限|js-switch * 选择器必须是以某个前缀开头 不推荐： .info { sRules; } .current { sRules; } .news { sRules; } > 因为这样将给我们带来不可预知的管理麻烦以及沉重的历史包袱。你永远也不会知道哪些样式名已经被用掉了，如果你是一个新人，你可能会遭遇，你每定义个样式名，都有同名的样式已存在，然后你只能是换样式名或者覆盖规则。 推荐： .m-detail .info { sRules; } .m-detail .current { sRules; } .m-detail .news { sRules; } > 所有的选择器必须是以 g-, m-, ui- 等有前缀的选择符开头的，意思就是说所有的规则都必须在某个相对的作用域下才生效，尽可能减少全局污染。 js- 这种级别的className完全交由JSer自定义，但是命名的规则也可以保持跟重构一致，比如说不能使用拼音之类的 <a name="id"></a> ### 6.id与class 重构工程师只允许使用class（因历史原因及大家的习惯做出妥协）。 <a name="packaging"></a> ### 7.书写格式 * 选择器与大括号之间保留一个空格； * 分号之后保留一个空格； * 逗号之后保留一个空格； * 所有规则需换行； * 多组选择器之间需换行。 不推荐： main{ display:inline-block; } h1,h2,h3{ margin:0; background-color:rgba(0,0,0,.5); } 推荐： main { display: inline-block; } h1, h2, h3 { margin: 0; background-color: rgba(0, 0, 0, .5); } <a name="semicolon"></a> ### 8.规则与分号 每条规则结束后都必须加上分号 不推荐： body { margin: 0; padding: 0; font-size: 14px } 推荐： body { margin: 0; padding: 0; font-size: 14px; } <a name="unit"></a> ### 9.0与单位 如果属性值为0，则不需要为0加单位 不推荐： body { margin: 0px; padding: 0px; } 推荐： body { margin: 0; padding: 0; } <a name="decimal"></a> ### 10.0与小数 如果是0开始的小数，前面的0可以省略不写 不推荐： body { opacity: 0.6; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } 推荐： body { opacity: .6; text-shadow: 1px 1px 5px rgba(0, 0, 0, .5); } <a name="non-quotes"></a> ### 11.去掉uri中引用资源的引号 不要在url()里对引用资源加引号 不推荐： body { background-image: url("sprites.png"); } @import url("global.css"); 推荐： body { background-image: url(sprites.png); } @import url(global.css); <a name="hex"></a> ### 12.HEX颜色值写法 * 将所有的颜色值小写； * 可以缩写的缩写至3位。 不推荐： body { background-color: #FF0000; } 推荐： body { background-color: #f00; } <a name="order"></a> ### 13.属性书写顺序 * 遵循先布局后内容的顺序。 ``` .g-box { 　　　display: block; 　　　float: left; 　　　width: 500px; 　　　height: 200px; 　　　margin: 10px; 　　　padding: 10px; 　　　border: 10px solid; 　　　background: #aaa; 　　　color: #000; 　　　font: 14px/1.5 sans-serif; } ``` > 这个应该好理解，比如优先布局，我们知道布局属性有 display, float, overflow 等等；内容次之，比如 color, font, text-align 之类。 * 组概念。 拿上例的代码来说，如果我们还需要进行定位及堆叠，规则我们可以改成如下： ``` .g-box { 　　　display: block; 　　　position: relative; 　　　z-index: 2; 　　　top: 10px; 　　　left: 100px; 　　　float: left; 　　　width: 500px; 　　　height: 200px; 　　　margin: 10px; 　　　padding: 10px; 　　　border: 10px solid; 　　　background: #aaa; 　　　color: #000; 　　　font: 14px/1.5 sans-serif; } ``` > 从代码中可以看到，我们直接将z-index, top, left 紧跟在 position 之后，因为这几个属性其实是一组的，如果去掉position，则后3条属性规则都将失效。 * 私有属性在前标准属性在后 ``` .g-box { 　　　-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); 　　　-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); 　　　-o-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); 　　　box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); } ``` > 当有一天你的浏览器升级后，可能不再支持私有写法，那么这时写在后面的标准写法将生效，避免无法向后兼容的情况发生。 <a name="css-comment"></a> ### 14.注释规范 保持注释内容与星号之间有一个空格的距离 **普通注释（单行）** /* 普通注释 */ **区块注释** /** * 模块: m-detail * 描述：酒店详情模块 * 应用：page detail, info and etc...etc */ > 有特殊作用的规则一定要有注释说明 > 应用了高级技巧的地方一定要注释说明 <a name="hack"></a> ### 15.hack规范 * 尽可能的减少对Hack的使用和依赖，如果在项目中对Hack的使用太多太复杂，对项目的维护将是一个巨大的挑战； * 使用其它的解决方案代替Hack思路； * 如果非Hack不可，选择稳定且常用并易于理解的。 ``` .test { 　　　color: #000; /* For all */ 　　　color: #111\9; /* For all IE */ 　　　color: #222\0; /* For IE8 and later, Opera without Webkit */ 　　　color: #333\9\0; /* For IE8 and later */ 　　　color: #444\0/; /* For IE8 and later */ 　　　*color: #666; /* For IE7 and earlier */ 　　　_color: #777; /* For IE6 and earlier */ } ``` * 严谨且长期的项目，针对IE可以使用条件注释作为预留Hack或者在当前使用 IE条件注释语法： <!--[if <keywords>? IE <version>?]> <link rel="stylesheet" href="*.css" /> <![endif]--> 语法说明： ``` <keywords> if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本 是否：指定是否IE或IE某个版本。关键字：空 大于：选择大于指定版本的IE版本。关键字：gt（greater than） 大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal） 小于：选择小于指定版本的IE版本。关键字：lt（less than） 小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal） 非指定版本：选择除指定版本外的所有IE版本。关键字：! ``` ``` <version> 目前的常用IE版本为6.0及以上，推荐酌情忽略低版本，把精力花在为使用高级浏览器的用户提供更好的体验上，另从IE10开始已无此特性 ``` <a name="low-selector"></a> ### 16.避免低效率选择器 * 避免类型选择器 不允许： div#doc { sRules; } li.first { sRules; } 应该： #doc { sRules; } .first { sRules; } > CSS选择器是由右到左进行解析的，所以 div#doc 本身并不会比 #doc 更快 * 避免多id选择器 不允许： #xxx #yyy { sRules; } 应该： #yyy { sRules; } <a name="override"></a> ### 17.属性缩写与分拆 * 无继承关系时，使用缩写 不推荐： ``` body { 　　　margin-top: 10px; 　　　margin-right: 10px; 　　　margin-bottom: 10px; 　　　margin-left: 10px; } ``` 推荐： ``` body { 　　　margin: 10px; } ``` * 存在继承关系时，使用分拆方式 不推荐： ``` .m-detail { 　　　font: bold 12px/1.5 arial, sans-serif; } .m-detail .info { 　　　font: normal 14px/1.5 arial, sans-serif; } ``` 要避免错误的覆盖： ``` .m-detail .info { 　　　font: 14px sans; } ``` > 如果你只是想改字号和字体，然后写成了上面这样，这是错误的写法，因为 `font` 复合属性里的其他属性将会被重置为 user agent 的默认值，比如 `font-weight` 就会被重置为 `normal`。 推荐： ``` .m-detail { 　　　font: bold 12px/1.5 arial, sans-serif; } .m-detail .info { 　　　font-weight: normal; 　　　font-size: 14px; } ``` > 在存在继承关系的情况下，只将需要变更的属性重定义，不进行缩写，避免不需要的重写的属性被覆盖定义 * 根据规则条数选择缩写和拆分 不推荐： ``` .m-detail { 　　　border-width: 1px; 　　　border-style: solid; 　　　border-color: #000 #000 #f00; } ``` 推荐： ``` .m-detail { 　　　border: 1px solid #000; 　　　border-bottom-color: #f00; } ``` <a name="css-module"></a> ### 18.模块化 * 每个模块必须是一个独立的样式文件，文件名与模块名一致； * 模块样式的选择器必须以模块名开头以作范围约定； 假定有一个模块如前文 [HTML模块化](#html-module)，那么 `m-detail.scss` 的写法大致如下： .m-detail { background: #fff; color: #333; &-hd { padding: 5px 10px; background: #eee; .title { background: #eee; } } &-bd { padding: 10px; .info { font-size: 14px; text-indent: 2em; } } &-ft { text-align: center; .more { color: blue; } } } 编译之后代码如下： .m-detail { background: #fff; color: #333; } .m-detail-hd { padding: 5px 10px; background: #eee; } .m-detail-hd .title { background: #eee; } .m-detail-bd { padding: 10px; } .m-detail-bd .info { font-size: 14px; text-indent: 2em; } .m-detail-ft { text-align: center; } .m-detail-ft .more { color: blue; } > 任何超过3级的选择器，需要思考是否必要，是否有无歧义的，能唯一命中的更简短的写法 <a name="img"></a> ## 图像约定 <a name="img-compress"></a> ### 1.图像压缩 所有图片必须经过一定的压缩和优化才能发布 <a name="background-image"></a> ### 2.背景图 * 使用PNG格式而不是GIF格式，因为PNG格式色彩更丰富，还能提供更好的压缩比； * 在需要兼容IE6的项目中，尽可能选择PNG8，而不是使用PNG24+滤镜。 <a name="image"></a> ### 3.前景图 * 内容图片建议使用JPG，可以拥有更好地显示效果； * 装饰性图片使用PNG。 <a name="sprite"></a> ### 4.Sprite * CSS Sprite是一种将数个图片合成为一张大图的技术（既可以是背景图也可以是前景图），然后通过偏移来进行图像位置选取； * CSS Sprite可以减少http请求。 <a name="end"></a> ## 结语 坚持一致性的原则。 一个团队的代码风格如果统一了，首先可以培养良好的协同和编码习惯，其次可以减少无谓的思考，再次可以提升代码质量和可维护性。 统一的代码风格，团队内部阅读或编辑代码，将会变得非常轻松，因为所有组员都处在一致思维环境中。