前端设计规范

shtml/html规范

一、结构目录
1、categorys(目录)
目录命名尽可能使用英文，语义化，公用部分和各模块分开。比如公用部分可放在comm目录下，各功能模块各建一个有意义的文件夹，比如中医:tcm。
2、css
目录命名可以为：style\css\skin等，里面也可以根据功能模块分开建立新的文件夹。
3、js
目录命名可以为：js\scripts，主要存放js脚本。
4、images
存放图片文件，可以根据功能模块分二级三级目录。

二、命名规范
1、语义化的文件名，不能使用中文词组的简拼进行命名。
2、整个网站统一后缀，不要同时出现shtml、shtm\html、htm。

三、代码规范
1、如果出现开始标签，就必须有相对应的结束标签；
2、所有标签和属性名称都必须小写；
3、属性值必须使用双引号；
4、图片标签必须有"alt"属性；
5、代码结构整洁，注释合理；

css规范

一、命名规范
1、常用的命名规则：

容 器：container/box
头 部：header
主 导 航：mainNav
子 导 航：subNav
顶 导 航：topNav
网站标志：logo
大 广 告：banner
页面中部：mainBody
底 部：footer
菜 单：menu
菜单内容：menuContent
子 菜 单：subMenu
子菜单内容：subMenuContent
搜 索：search
搜索关键字：keyword
搜索范围：range
标签文字：tagTitle
标签内容：tagContent
当前标签：tagCurrent/currentTag
标　 题：title
内 容：content
列 表：list
当前位置：currentPath
侧 边 栏：sidebar
图 标：icon
注 释：note
登 录：login
注 册：register

2、直观命名：
根据元素所在页面位置的词汇来命名。
比如：左边：left-side

3、自定义命名
根据模块的意义来命名：
比如：重要的新闻
.important-news{color:red}

在命名的时候切忌用中文拼音。

二、css样式书写顺序

1、显示属性  
display/list-style/position/float/clear  

2、自身属性  
width/ height/margin/padding/border/background  

3、文本属性  
color/font/text-decoration/text-align/vertical-align/white-space

三、注释规范

1、行间注释:
直接写于属性值后面:
如：
.search{border:1px solid #fff;/*定义搜索输入框边框*/

2、整段注释：
如：
/*搜索条 begin*/
.search {border:1px solid #fff;background:url(../images/icon.gif) no-repeat #333;}
/*搜索条 end*/

3、协助注释：
如：
/*搜索条 begin[修改人；修改时间]*/
.search {border:1px solid #fff;background:url(../images/icon.gif) no-repeat #333;}
/*搜索条 end[修改人；修改时间]*/

四、给文件减肥

1、css样式的简写：
   1)、颜色值的缩写;
   2)、内外侧边框的缩写;
   3)、 同一属性的缩写;
   4)、不同的类相同属性及属性值的缩写；

2、提取公用部分样式：
几个不同的shtml/html文件需要用到公用的样式，可将这部分样式提取调用，不同的样式分模块分别调用。

3、利用可继承的值：
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义，除非是为了更变当前元素样式不使用父元素的属性值，但是要注意，浏览器可能用一些默认值覆盖你的定义。

4、使用子选择器
子选择器可以减少shtml/html中大量的class定义，也使得CSS更加简洁、更加容易阅读。