移动Web解决方案

最近在系统的学习移动的坑，这里将他整理起来。

前沿

这里没有绝对的标准，只是介绍不同的解决方案，从而提高用户体验。

组件化

通用约定

字体使用：使用无衬线字体

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

组件命名

中fn,ui,text为保留字，除在指南中约定之外，建议不在其他场合进行使用，并且凡以此命名的类名，其中所有的数值的设定，皆为非important关键字【规范】

fn_clear 清除浮动
fn_left,fn_right 左右浮动
fn_show,fn_hide 显示 display:block/隐藏 display:none
text_left,text_center,text_right 文字左中右居中

凡被JS使用的类名，在通常命名前加上J_或j-前缀,在同一个项目里需要保持形式的一致性

特定浏览器CSS属性的前缀

采用以下两种，-webkit-和-ms-，由于手机只有webkit的内核和微软的IE浏览器。

-webkit-{prop}:{value}
-ms-{prop}:{value}
{prop}:{value}

通用业务组件名称，建议使用如下约定：

button btn 按钮
nav 导航
list 列表
paging 分页
tab 标签页
select 下拉框
input 输入框
group 特性相似的群，与list的区别在于，list有明确的列表布局的特性，group没有其特性
form 表单

常用模块状态名称

current    当前模块状态
selected    被选中状态
disabled    失效状态
focus    焦点集中状态
blur    焦点失去状态
checked    被勾选状态
success    成功状态
error    错误状态

hover active    手指在模块上状态【讨论】

命名指南

组件命名是明晰的，从拼写的单词能直观的看出组件用途

建议不使用缩写，除对字母长度超过6个以上的单词。如果使用缩写建议缩写后的单词在4个字母以上，
谨慎使用3个字母及以下的缩写，除非该含义非常清晰可见，并没有歧义，比如说btn，不建议的缩写，例如 ui
组件命名采用层次命名的方式，中间采用-为间隔符，层次方式如下

[样式库名称] - [组件名称] (- [组件状态])? (- [子组件名称])? (- [子组件状态])?

例如：
amui库中有个list列表，里面有个按钮，当用户点击list中当前被选中的那个item中的按钮的时候，
产生一个按上去的效果，这个时候的命名方式建议如下：am-list-current-btn-active

样式库名称建议使用该样式库的名称简写，建议2~4个字母
样式库名称不建议使用宽泛且无具体意义的命名，比如说ui等【规范】
组件内部的类名需要体现上层的含义，体现的方式没有强行规定，但是可以直观看出

例如：list表中嵌套一个按钮，

独立系统里统一命名风格【规范】

在一个完整的模块命名方式，对于相同类型的模块命名保持一致，比如说，使用了button作为模块类名之后，后面如果再需用到按钮，不再建议使用btn的方式。

目录结构和文件命名规范

前端有哪些大小写区分，XHTML区分大小写、HTML不区分大小写、CSS与HTML有关、Javascript区分大小写。由此可以看出，文件建议使用小写加下划线命名。

我们单独一节来说明网站目录结构和命名规范的目的是让我们重视。因为无论你的XHTML、CSS、Javascript写得多熟练多好，而网站的目录结构和其命名是让人和搜索引擎读不懂的。
那么网站就没有真正做到标准化，而且整个网站的后期扩展和维护的成本和代价会很大。还有一点需重视就是xhmtl、css、js的代码注意缩进。
并保持格式整齐的并且提供注释，保证可阅性。同时为后期编写程序提供良好的开发条件。
首先网站的目录结构和文件命名清晰、XHTML里面的元素命名清晰会给SEO带来好处。例如文件的命名，如果使用全拼，那么Google是自动识别拼音进行排名的。关于SEO相关的知识(请参阅公司SEO相关文档)，就不在这里一一阐述了。接下来介绍目录结构和命名规范。

目录结构

主要分为四类，需要注意的是，所有命名必须为小写英文、下划线，不能大写或中文。

1. categorys(目录)
   目录的命名尽可能使用英文或者全拼表达目录内的页面作用（语义化），需要注意的是不要使用中文词组简拼（eg:目录–>ml）。
   简拼容易出现重复、或者目录结构复杂的时候容易出现混乱，给后期维护带来很大的麻烦。

2. css目录命名可以为style、css、skin等，如果网站的目录结构不是很复杂的，尽量把css统一放在跟目录。
   这样可以方便后期的维护操作。如果网站的目录结构很复杂，层次超过3层以上的，可以在对应的层设置目录页面结构的css。

3. js目录命名一般用js或scripts，这样一看就知道里面是放js脚本。同样js的目录结构也是和css一样。

4. images根据网站规模来调整放图片的目录，一般根目录设置的images是存放整站共用的图片（包括图片图标背景等），而各二级三级目录里面也可以设置相应的images目录存放当前级的图片。
   根据具体的目录规范，做到前后台协商一致！当页面在引用css或者js的时候，大型的门户站点一般会在引用加上版本号或者日期。如：
   这样的做法是为了维护的时候可以更清晰知道所引用的脚本或样式是什么时候什么版本的。

html命名

html应遵循页面的内容或用途（SEO）进行命名。不能使用中文词组的简拼进行命名。当使用英文或者中文词组全拼的时候，同样会给SEO带来好处。另外需注意的是，整个网站的html后缀要统一，避免同时出现html、htm两种不同的后缀。

css命名可以按照内容和功能进行命名。

1. css功能性质一般指：reset.css（重置默认的样式-属性选择符）、global.css(全局使用的类选择符)、
   common.css(部分页面可共同使用的类选择符)等各种按功能分类的css。一般还可以将连接、段落、颜色等样式分离出来。

2. 布局页面一般指:style.css(全站的整体框架布局)—–index.css(首页的布局)、reg.css(注册页面的布局)。

3. 样式命名采用小写英文字母、数字、中扛线的组合，其中不得包含汉字、空格和特殊字符；多个单词
   应采用中扛线分割。

4. 样式名称字符不要超过20个,少用拼音写样式，使用限定词诸如（R(ight),L(eft),T(op),B(ottom),M(iddle)，
   要把限定词放在最后,后缀限定词建议采用缩写形式，从而减少名称长度；

5. 根据样式的性质和功能，将样式分为以下几种：
   reset.css（重置默认的样式-属性选择符）global.css(全局使用的类选择符) common.css等各种按功能分类的css，各个功能模块页面的样式，视具体情况添加或修改。

js命名

js命名规范也和css的命名规范差不多，但是分前后台两种js文件，根据前后不用，使用不用的后缀区分。

1. 功能性质
   js功能性质一般指:jquery.js(js库或框架)、global.js(全局使用的脚本)、common.js(部分页面需要用的脚本)

2. 针对页面
   针对某个目录的页面：js_toggle_reg.js,前面的js是为了统一所有针对页面而定出来的。可以根据个人的情况把js改成自己所定义的单词。

3. 实际命名规范：
   1、js库或框架文件，如jquery.js，就引用自身的命名。
   2、与后台交互功能的js文件，命名规则就是:back_+js文件名如验证js：back_submitcheck.js3、前端页面效果的js文件，命名规则就是:front_+js文件名如焦点图效果js：front_focus.js

图片的命名

首先我们这里需要注意的是，切图的时候，可以去参考一些大型的网站如yahoo等的切图的方法。一般熟练css布局的都会将许多的小图标，背景图片集合到一张图，通过css来控制到具体的元素使用哪个图标或背景。另外目前国外和国内高标准的网站，一般都采用png图使用，但是我们公司根据异步的要求，必须用jpg的图片。图片根据图片的所处的页面位置名称作用来命名。图片的命名规范化更有利于css的编写。可以举几个例子:
index_header_navtab_bg.jpg—–字面理解到图片是index页面headher中导航TAB的背景products_content_title_icon.gif—–字面理解为products页面content中标题的iconindex_header_banner_pic.png—–字面理解为index页面header的banner图片
只有当图片的名称语义化了，在你写css或者页面需用到图片的时候，可以更快速的找到所需的。如果只是随便的取01.jpg、bg.jpg这类的命名，会给前端开发带来不便，更不用说后期维护了。
友情提示：本文中关于《WEB前端开发规范》给出的范例仅供您参考拓展思维使用，WEB前端开发规范：该篇文章建议您自主创作。