9 15:00:01

# base.css

基础css文件，包括“重置”，“功能”性的集合，初稿待定，如果需要可以另外增加，不建议用网上的，原因，冷门HTML的标签我们是用不到的，所以我们没必要去重置它，如果后面用到HTML5，或者不需要兼容低端浏览器，那升级一套 base.css 便可以。功能性类开头以"mf"开头，意思是"mofang"。

# 命名规范

命名规范，包括HTML,CSS,JS命名，这里我提取了几个不错网站的命名方案(豆瓣，youtube,百姓网)，宗旨都是模块化的命名思路。最好用英文去命名（不知道的单词可以查一下，正好学下英语，不怕命名过长）

# HTML命名规范

HTML命名采用“-”做分隔，均使用英文小写，为什么这样做？能够更明确的提取出公共的代码。这些模块如果是单独，便可以直接拿来用，如果不是单独的或者需要特殊处理可以加入ID（推荐使用，但少用），来处理，如果存在JS交互，则命名加入大写前缀"J_xx"（下划线），来告诉开发者这里存在JS交互，不是单纯的HTML。示例：

<div id="J_dialog" class="article">
   <div class="article-hd"></div>
   <div class="article-bd"></div>
   <div class="article-ft"></div>
</div>

假如上面是一个文章的模块，这样如果别的地方需要用我们就可以直接拿过来，那如果同样的模块，有少量的更改，我们也不需要重写？怎么做？，不需要！

<div class="move-article article">
   <div class="article-hd"></div>
   <div class="article-bd"></div>
   <div class="article-ft"></div>
</div>

这样只需要用“move-article”这个单独类去覆盖少量的变化便可以了，如果模块差异很大，那么就没必要重用了，重新单独写一个。

hack 命名规范在写样式的时候避免不了存在hack，那如果处理，我们用"B"来标记，低浏览器的hack,这样以后不用兼容低端浏览器的话，直接搜索大写的“B”删除即可以。

# CSS命名规范

CSS代码也同采用“-”做分隔同html是等价的，，更能适应F.I.S去require。在抒写CSS应当与写HTML一样提取公共的。由于样式要兼容IE浏览器，必免不了要去做写hack，那么如果

# JavaScript命名规范

----待定

# 注释规范

中英文结合注释防止开发人员看不懂.使用 /* 注释 */，由于中文注释可能导致代码失效，所以采用英文开头，中间用一个空格，中文解释。示例：

  /* S module */  
   .module {
   }
  /* E module */

# CSS3 selector

# 属性选择器

[att=val] att是属性,val是值,例如[id="css3-selector"]
[att*=val] 只要属性中包含val
[att^=val] 以某些开头的
[att$=val] 以某些结尾

# 伪类选择器

after
before

# 结构性选择器

root 根元素选择器，指向html
empty 当元素为空时，
not 排除这个结构下面的子元素
target

# 子类选择器存在问题，如果是列表则无事，如h2 p h2 p 因为它针对不同类

first-child
last-child
nth-child() odd even
nth-last-child
nth-of-type
nth-last-type
only-child 只有一个子元素时

# 自行换行

word-break:break-all
word-wrap:break-word;
white-space:nowrap;
overflow:hidden,srcoll
overflow-x overflow-y
box-sizing :border-box 百分比布局
transform 四种功能，旋转，绽放，倾斜，移动
rotate 旋转 scale 缩放
scale 缩放大小 1.5 5
skew 倾斜 30deg 50deg
translate 移动

# 动画

Transitions 通过属性 property(要更改属性) duration(持续多长时间) timing-function(什么方法过渡)
Animations 通过关键帧

使用css追踪用户是否点击某个链接 →

# 前端规范 文档 （初稿）2013/10/9 15:00:01