CSS模块化、HTML、CSS、jS书写规范

>CSS模块化
百度百科模块化：
在系统的结构中，模块是可组合、分解和更换的单元。模块化是一种处理复杂系统分解成为更好的可管理模块的方式。它可以通过在不同组件设定不同的功能，把一个问题分解成多个小的独立、互相作用的组件，来处理复杂、大型的软件。类似于拼图。

当做一个大项目，几个人团队合作开发，结果看不懂彼此的代码，怎么办，当面对前人已经写好代码，需要修改，可是无处下手，怎么办.当代码耦合，修改费时费力，怎么办，当需要迭代，面对庞大的代码，牵一发动全身的悲催时刻，怎么办，这个时候，模块化思想就是救星了。css写法特别的灵活，也因为灵活，所以容易耦合在一起，这时候就需要进行模块化的分离。好处：
●提高开发效率、减少沟通成本
●提高页面容错
●降低耦合
●降低发布风险
●减少Bug定位时间和Fix成本
●更好的实现快速迭代
●便于代码维护...

>>命名
实现CSS模块化需要很多步，今天先说命名。
css命名上的优化：css文件名的命名、css选择器的命名。

1、CSS样式文件命名：
1、
主要的 　　　　master.css 
布局，版面 　　layout.css 
专栏 　　　　　columns.css 
文字 　　　　　font.css 
打印样式 　　　print.css 
主题 　　　　　themes.css
2、
对浏览器的默认样式进行重设　　reset.css 
管理页面的布局　　　　　　　　layout.css   
图文的编排　　　　　　　　　　typeset.css 
统一管理颜色的搭配 　　　　　   color.css 
打印效果样式　　　　　　　　　print.css 
把对ie的hack单独分开 　　　　　ie.css
3、
对浏览器的默认样式进行重设　　reset.css 
头部的所有样式　　　　　　　　header.css 
除头部/底部外的中间区域样式　   container.css 
 底部样式　　　　　　　　　　   footer.css 
打印效果样式　　　　　　　　　print.css 
把对ie的hack单独分开 　　　　　ie.css
4、
页面样式重置　　　　　　　reset.css 
全站头部样式　　　　　　　header.css 
全站尾部样式　　　　　　　footer.css 
全站公共模块样式　　　　　public(base/common).css 
首页特有样式　　　　　　　index.css 
二级及以下主体样式　　　　container.css 
打印样式　　　　　　　　　print.css 
IE hack　　　　　　　　　   ie.css /
有最好的命名方式，只有最合适的命名方式。主要就是从html结构和bug的快速定位和便于其他成员的修改上考虑。

假如你的网站是新闻类的门户网站，然后html的结构就主要是布局，版面 layout.css ，专栏 columns.css ，文字 font.css ，打印样式 print.css 就比较适合，因为跟html很一致，也很契合。
假如是企业官网的话，一般html结构都是头和尾都有标准的，所以与html结构最契合的就是第三种了，同时我们可以优化第三种，在container里面再分类，分成common,layout，就方便进一步的修改，至于common里就可以放入font,color一些公用的样式。

2、CSS选择器的命名：
对于规范css选择器的命名，不仅是模块化实现的一环，便于团队开发，同时也规避了一些兼容性的麻烦。因为各个浏览器，IE，火狐，谷歌，safari，每个浏览器,IE产品，火狐，safari,coogle Chrome，都会因为命名不规范会产生不同样式

在CSS中，标识符（包括元素名称，类别，并在选择的ID）只能包含字符[A-ZA-Z0-9]和ISO 10646字符U + 00A0高，加上连字符（ - ）和下划线（ _）;他们不能以数字开头，两个连字符，或一个连字符后跟数字。标识符也可以包含转义字符和任何ISO 10646字符作为一个数字代码（见下项）。例如，识别符“B&W?”可被写为“B \＆W \？”或“B \ 26W¯¯\ 3F”。
==>选择器的命名在各浏览器下的支持情况有所不同。因此，如果选择器的命名不规范，将影响各浏览器下的渲染效果。为了兼容以上的浏览器，省麻烦，我们尽量命名以字母开头。可以保证都兼容。

常见的 CSS命名规则：
1、页面组件的名称
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：register
状态：status
投票：vote
合作伙伴：partner

2、注释的写法
/* Header */
内容区
/* End Header */

3、id的命名
(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register
搜索：search
功能区：shop（如购物车）
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guide
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
(四)class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用”font+字体大小”作为名称,如
.font10px { font-size: 10px; }
.font6pt {font-size: 6pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }
注意事项::
一律小写;
尽量用英文;
不加中杠和下划线;
尽量不缩写；
我比较喜欢bootstrap的简洁优雅的风格。所以css命名也可以参考一下。|

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

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

关于使用container和wrapper的区别：
In programming languages the word container is generally used for structures that can contain more than one element.
A wrapper instead is something that wraps around a single object to provide more functionalities and interfaces to it.
This definition matches with meaning of words and it's useful for HTML structures like:

<ul class="items-container">
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
</ul>

>>CSS书写规范
1. 编码统一为utf-8;
2. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;
　　==》因为大多数时候，初始化样式和头部底部的样式是所有页面共用的。
3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外;
4. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;
5. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由：小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.
6. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):
　　a, 通过从属写法规避, 示例见d;
　　b, 取父级元素id/class命名部分命名, 示例见d;
　　c, 重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;
　　d, a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码<div id=”mainnav”></div>中加入新的div元素,
　　按a命名法则: <div id=”mainnav”><div class=”firstnav”>…</div></div>,
　　　　样式写法: #mainnav .firstnav{…….}　　==》根据父元素id-->子元素类名找到元素。
　　按b命名法则: <div id=”mainnav”><div class=”main_firstnav”>…</div></div>,
　　　　样式写法: .main_firstnav{…….}　　==》子元素取父元素的命名部分(相当于命名空间，方便查找)_xxx进行命名。
7. css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性。此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举:
布局定位属性主要包括: margin ＆ padding ＆ float（包括clear） ＆ position（相应的 top,right,bottom,left） ＆ display ＆ visibility ＆ overflow等；
自身属性主要包括:    width & height & background & border;
文本属性主要包括： font ＆ color ＆ text-align ＆ text-decoration ＆ text-indent等；
其他属性包括:   list-style(列表样式) ＆ vertical-vlign ＆ cursor ＆ z-index(层叠顺序) ＆ zoom等. 我所列出的这些属性只是最常用到的, 并不代表全部;
8. 书写代码前, 考虑并提高样式重复使用率;
9. 充分利用html自身属性及样式继承原理减少代码量, 比如:
　　<ul class=”list”><li>这儿是标题列表<span>2010-09-15</span></ul>
　　定义：ul.list li{position:relative} ul.list(交集选择器) li span{position:absolute; right:0}
即可实现日期居右显示
10. 样式表中中文字体名, 请务必转码成unicode码(比如宋体要转成%xx%xx%xx...), 以避免编码错误时乱码;
11. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;
12. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css文件中我会初始化表格样式)
13. 杜绝使用<meta http-equiv=”X-UA-Compatible” content=”IE=7″ /> 兼容ie8;
14. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:
　　_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
15. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;
16. 减少使用影响性能的属性, 比如position:absolute || float ;
17. 必须为大区块样式添加注释, 小区块适量注释;
18. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;

规范目的：
为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改。

基本准则：
符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。

文件规范
1. html, css, js, images文件均归档至<系统开发规范>约定的目录中;
2. html文件命名: 英文命名, 后缀.html. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;
3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.;
4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名。

>>HTML书写规范
1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset=”utf-8″ />, 书写时利用IDE实现层次分明的缩进;
2. 非特殊情况下样式文件必须外链至<head>…</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;
3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:
　　<link rel=”stylesheet” href=”…” />
　　<style>…</style>
　　<script src=”…”></script>
4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;
5. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (<br />), hr(<hr />)等; 属性值必须用双引号包括;
6. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以”data-”为前缀来添加自定义属性，避免使用”data:”等其他命名方式;
7. 语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;
8. 尽可能减少div嵌套, 如<div class=”box”><div class=”welcome”>欢迎访问XXX, 您的用户名是<div class=”name”>用户名</div></div></div>完全可以用以下代码替代: <div class=”box”><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p></div>;
9. 书写链接地址时, 必须避免重定向，例如：href=”http://itaolun.com/”, 即须在URL地址后面加上“/”；
　　==》网址带斜杠与不带斜杠是有区别的，因为它们是两个不同的概念。不带斜杠就是一个网页，带上斜杠就是一个目录。
　　在交换友情链接或者是发外链时，都有必要在网址后面带上斜杠。对于seo优化而言，带斜杠的链接是非常有必要的。
10. 在页面中尽量避免使用style属性,即style=”…”;
11. 必须为含有描述性表单元素(input, textarea)添加label, 如<p>姓名: <input type=”text” id=”name” name=”name” /></p>须写成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>
12. 能以背景形式呈现的图片, 尽量写入css样式中;
13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;
14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;
15. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(&gt;) & 空格( ) & ?(?) 等等;
16. 书写页面过程中, 请考虑向后扩展性;
17. class & id 参见 css书写规范.

>>JavaScript书写规范
1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);
2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;
3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;
jQuery变量要求首字符为’_’, 其他与原生JavaScript 规则相同, 如: _iTaoLun;
另, 要求变量集中声明, 避免全局变量.
4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;
5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();
6. 命名语义化, 尽可能利用英文单词或其缩写;
7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;
8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;
9. 代码结构明了, 加适量注释. 提高函数重用率;
10. 注重与html分离, 减小reflow, 注重性能.

>>图片规范
1. 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;
2. 图片格式仅限于gif || png || jpg;
3. 命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;
4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;
5. 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);
6. 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下.

>>注释规范
1. html注释: 注释格式 <!–这儿是注释–>, ’–’只能在注释的始末位置,不可置入注释文字区域;
2. css注释: 注释格式 /*这儿是注释*/;
3. JavaScript注释, 单行注释使用’//这儿是单行注释’ ,多行注释使用 /* 这儿有多行注释 */;

>>开发及测试工具约定
建议使用Aptana || Dw || Vim , 亦可根据自己喜好选择, 但须遵循如下原则:
1. 不可利用IDE的视图模式’画’代码;
2. 不可利用IDE生成相关功能代码, 比如Dw内置的一些功能js;
3. 编码必须格式化, 比如缩进;
测试工具: 前期开发仅测试FireFox & IE6 & IE7 & IE8 , 后期优化时加入Opera & Chrome & Safari;
建议测试顺序: FireFox–>IE7–>IE8–>IE6–>Opera–>Chrome–>Safari, 建议安装firebug及IE Tab Plus插件.
其他规范
1. 开发过程中严格按分工完成页面, 以提高css复用率, 避免重复开发;
2. 减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, 为服务器着想.