前端开发规范.pdf

C:\Users\Administrator\Desktop\前端开发规范(1).txt2013年9月27日13:13
一、CSS

1.页面统一utf-8编码。可以用@charset"utf-8";指定页面编码

2.用<link>而不用@import导入外部样式文件，
因为@import在ie6下初始瞬间无法加载，导致页面变形，并且不能并行加载，不利于优化。

3.页面中的<link>和<style>不能超过31个。

4.
不要用个性化字体，导致用户不能正常浏览，中文正文建议用宋体，标题可以用雅黑。注意字体要使用英文
名称，不要使用中文，如SimSun，"MicrosoftYaHei"。

5.CSS书写符合浏览器兼容标准，确保页面在浏览器中的兼容性。

6.全部小写，保持CSS写法结构一致。

7.
CSS命名规则，以英文单词为单位，多个单词使用小横线-连接(例：class="app-list-info")，不使用拼音
，命名一定要准确并且简洁。

8.命名不要自造缩写，请使用约定俗成的单词缩写。

9.将作用于不同模块的CSS规则集中放在一起，同时用注释说明。通用规则放在具体模块规则的前面。

10.
遵从个人习惯属性可写在一行，也可以分开多行书写，多个selector每个占一行，每个属性值后必须以
;结尾：
.selector1,
.selector2,
.selector3{property:value;property:value;}

11.注释的格式：
/*header*/
注释中间不要加---。

12.尽量保持结构与样式分离，便于管理。只使用一次的样式，可以直接加在元素上。

13.不要使用!important打乱CSS继承关系。

14.所有装饰性的图片（如背景图），要定义在CSS中。

15.每个页面的ID必须是唯一的，且用在结构的定义中。

16.CSS中禁止使用expression表达式。

17.CSS中尽量不要使用滤镜。

18.尽量不要设置容器的高度，保持容器高度可自适应，height:100%可能会遇到兼容性问题。

19.CSS命名参考：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column

-1-
C:\Users\Administrator\Desktop\前端开发规范(1).txt2013年9月27日13:13
页面外围控制整体布局宽度：wrapper/wrap
左右中：leftrightmiddlecenter
登录条：login
标志：logo
广告：banner
页面主体：main/body
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu/dropmenu
子菜单：submenu
标题：title/ttl/caption/small-caption
摘要：summary
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
标签页：tab
文章列表：list
栏目标题：title
指南：guild
服务：service
注册：regsiter
投票：vote
加入我们：joinus
状态：status/status-bar
按钮：btn-
图标：ico-/icon-
滚动：scroll
标签页：tab
文章列表：list
弹出层：pop/popup/dialog
状态提醒：success/error/alert/notice/caution
提示信息：msg/message/message-box
当前的：current/curr/active/act/selected/on
小技巧：tips
注释：note/notice
指南：guide
服务：service

二、JS
1.编码统一采用UTF-8。

2.
外部脚本引用尽量放在尾部，对于全局性的JS，要放在头部引入，这样在jsp中对于<include>的页面直接可
以调用，严禁重复引入。

3.
尽量使用外部引用，对于针对特定页面的JS，且JS代码量较小可以写在页面中，但也必须放在尾部，且允许
有一个<script>块。

4.对于jquery的$(function(){})(一律采用简写方式，不使用$(document.body)写法)也只能出现一次。

5.程序块采用缩进风格编写。

-2-
C:\Users\Administrator\Desktop\前端开发规范(1).txt2013年9月27日13:13
6.使用单引号''包裹字符串，如varname='xiongfang';不建议使用varname="xiongfa