WEB前端规范.docx
《WEB前端规范.docx》由会员分享，可在线阅读，更多相关《WEB前端规范.docx（41页珍藏版）》请在冰豆网上搜索。
WEB前端规范
WEB前端规范
css注释、书写规范，语法检测工具；js文件命名、代码注释、书写规范；html文件命名、书写要求、注释规范。
YFZX_JJL
2015/12/3
解释权
文档摘要
文件名
WEB前端规范.docx
最新版本
1.0
文档创建者
YFZX_JJL
文档维护者
文档评审者
定稿日期
文档目标
版本管理
版本
描述
日期
作者
1.0
创建
2015-12-04
YFZX_JJL
没有一种规范，就像一盘散沙；这种自由，会让自己写的东西时常变化。
也很不利于团队协作开发。
添加必要的注释，对一个有责任心、有道德模范的前端必须具备的好习惯，可以大大提高代码的可维护性、可读性。
1.CSS
1.1CSS原理
CSS全称为“CascadingStyleSheets”层叠样式表。
页面的标准－“WEB标准”
注：
X（HTML）用来决定网页的结构和内容。
CSS用来设定网页的表现形式。
JavaScript用来控制网页的行为
✧浏览器是如何渲染页面和加载页面
为什么有些网站打开的时候会加载会很慢，而且是整个页面同时显示的，而有些网站是从顶到下逐步显示出来的？
要搞懂这个可以先从下面这个常规流程开始：
1.浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行。
2.在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
3.如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
4.并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。
5.样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
6.JS、CSS中如有重定义，后定义函数将覆盖前定义函数。
1.2文件规范
文件夹和文件命名一律全部小写，禁止出现简拼、拼音、数字、无意义的命名，英文单词尽量使用一个进行描述，简洁易懂；多个单词用中划线分隔。
所有的CSS分为三大类：
1、cores：
共用、基础
2、extends：
第三方引用
3、modules：
项目模块自用
放在如下目录中：
1.3注释规范
Ø文件顶部注释（推荐使用）
注：
“*”空格跟“@”，英文半角输出“：
”符号加空格录入正文。
Ø模块注释
注：
单行注释可以写在单独一行，也可以写在行尾，注释中的每一行长度不超过40个汉字，或者80个英文字符。
“*”前后各加一个空格。
Ø特殊注释
注：
用于标注修改信息（update标识修改，这个修改表示修改了他人的CSS样式，如果是修改自己的CSS样式就不需要update进行描述，原先样式保留）
1.4命名规范
1.4.1基础命名规则
使用有意义的或通用的ID和class命名：
ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。
反映元素的使用目的是首选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。
常用命名（多记多查英文单词）：
page、wrap、layout、header（head）、footer（foot、ft）、content（cont）、menu、nav、main、submain、sidebar（side）、logo、banner、title（tit）、popo（pop）、icon、note、btn、txt、iblock、window（win）、tips等
ID和class命名越简短越好，只要足够表达涵义。
这样既有助于理解，也能提高代码效率。
类型选择器避免同时使用标签、ID和class作为定位一个元素选择器；从性能上考虑也应尽量减少选择器的层级。
命名时需要注意以下几点：
●规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或“_”，16进制的颜色取值要大写和字体。
●命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
●命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则
●不允许通过1、2、3等序号进行命名
●避免class与id重名
●id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id
●class用于标识某一个类型的对象，命名必须言简意赅。
●尽可能提高代码模块的复用，样式尽量用组合的方式
●规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。
应该用意义命名，而不是样式显示结果命名。
1.4.2常用的id命名
a）页面结构
☞容器:
container
☞页头：
header
☞内容：
content/container
☞页面主体：
main
☞页尾：
footer
☞导航：
nav
☞侧栏：
sidebar
☞栏目：
column
☞页面外围控制整体布局宽度：
wrapper
☞左右中：
leftrightcenter
b）导航
☞导航：
nav
☞主导航：
mainbav
☞子导航：
subnav
☞顶导航：
topnav
☞边导航：
sidebar
☞左导航：
leftsidebar
☞菜单：
menu
☞子菜单：
submenu
☞标题:
title
☞摘要:
summary
c）功能
☞标志：
logo
☞广告：
banner
☞登陆：
login
☞登录条：
loginbar
☞注册：
regsiter
☞搜索：
search
☞功能区：
shop
☞标题：
title
☞加入：
joinus
☞状态：
status
☞按钮：
btn
☞滚动：
scroll
☞标签页：
tab
☞文章列表：
list
☞提示信息：
msg
☞当前的:
current
☞小技巧：
tips
☞图标:
icon
☞注释：
note
☞指南：
guild
☞服务：
service
☞热点：
hot
☞新闻：
news
☞下载：
download
☞投票：
vote
☞合作伙伴：
partner
☞友情链接：
link
☞版权：
copyright
1.4.3常用的class命名
1）颜色：
使用颜色的名称或者16进制代码，如：
2）字体大小，直接使用“font+字体大小”作为名称，如：
3）对齐样式，使用对齐目标的英文名称，如：
4）标题栏样式，使用“类别+功能”的方式命名，如：
1.5书写规范
1.5.1排版规范
◆使用4个空格，而不使用tab或者混用空格+tab作为缩进；
◆规则可以写成单行，或者多行，但是整个文件内的规则排版必须统一；
单行形式书写风格的排版约束：
●如果是在html中写内联的css，则必须写成单行；
●每一条规则的大括号{前后加空格；
●每一条规则结束的大括号}前加空格；
●属性名冒号之前不加空格，冒号之后加空格；
●每一个属性值后必须添加分号;并且分号后空格；
●多个selector共用一个样式集，则多个selector必须写成多行形式；
多行形式书写风格的排版约束
●每一条规则的大括号{前添加空格;
●多个selector共用一个样式集，则多个selector必须写成多行形式;每一条规则结束的大括号}前加空格；
●每一条规则结束的大括号}必须与规则选择器的第一个字符对齐;
●属性名冒号之前不加空格，冒号之后加空格;
●属性值之后添加分号;
1.5.2属性编写顺序
1.显示属性：
display/list-style/position/float/clear…
2.自身属性（盒模型）：
width/height/margin/padding/border
3.背景：
background
4.行高：
line-height
5.文本属性：
color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
6.其他：
cursor/z-index/zoom/overflow
7.CSS3属性：
transform/transition/animation/box-shadow/border-radius
8.如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照-webkit-/-moz-/-ms-/-o-/std的顺序进行添加，标准属性写在最后。
9.链接的样式请严格按照如下顺序添加：
a:
link→a:
visited→a:
hover→a:
active
1.5.3规则书写规范
✧使用单引号，不允许使用双引号;
✧每个声明结束都应该带一个分号，不管是不是最后一个声明;
✧除16进制颜色和字体设置外，CSS文件中的所有的代码都应该小写;
✧除了重置浏览器默认样式外，禁止直接为htmltag添加css样式设置;
✧每一条规则应该确保选择器唯一，禁止直接为全局.nav/.header/.body等类设置属性;
1.5.4代码性能优化
关于CSS的优化工作主要从两个方面着手：
●网络性能：
把CSS写到字节数最少，加快下载速度，自然可以让页面渲染的更快一些。
●语法性能：
同样都能实现某些效果，但并不是所有的方式效果都相同，我们看过不少关于JavaScript方面的语法优化知识，其实CSS里面也有一些。
1.5.4.1CSS压缩
CSS压缩并不是什么高端的姿势，但却很有用，其原理很简单，就是把我们CSS中没用的空白符等删去，达到缩减字符个数的目。
我们有这样一段CSS脚本
经过压缩后会变成这样
当然高级些的压缩工具也会帮我们优化一些语法，提供很多选项，让我们的压缩更有控制，有很多在线版的很方便
http:
//ganquan.info/yui/?
hl=zh-CN（YUICompressor）
（CSSCompressor）
（CSSdrive）
（CleanCSS）
1.5.4.2CSS合成
我们还可以通过少写CSS属性来达到减少CSS字节的目的，拿个最常见的例子
我们可以改写一下上面的CSS，达到同样的效果
在CSS中还有很多类似的属性可以合写
font
margin/padding
background
border
注：
另外CSS3添加的很多属性如transform、animation相关的都可以合写，不一一列举，大家用的时候要注意
1.5.4.3利用继承
CSS的继承机制也可以帮我们再一定程度上缩减字节数，我们知道CSS有很多属性是可以继承的即在父容器设置了默写属性，子容器会默认也使用这些属性，因此如果我们希望全文字体尺寸是14px，大可不必为每个容器设置，只需要在body上设置就可以了。
应用这个技巧，把CSS属性在可能的情况下提到父容器是可以帮我们节省CSS字节的，顺便说一下哪些属性可以继承。
●所有元素可继承：
visibility和cursor
●
升级会员 