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

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
内容：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)对齐样式,使⽤对齐⽬标的英⽂名称,如
.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>
View Code
>>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=”/”, 即须在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. 减⼩沉冗代码, 书写所有⼈都可以看的懂的代码. 简洁易懂是⼀种美德. 为⽤户着想, 为服务器着想.。