前端img，css，html，文件夹规范

主要是针对前端img，css，html，文件夹规范，与后台的一些命名可能会有不一样。是自己个人的总结。

图片规范：

1、图片名称单词间以下划线隔开，字母统一都用小写。即aaa_bbb_ccc

2、第一个单词表示此图片的位置或者性质。比如：header_logo，footer_bg,btn_share_pressed。

3、尾部分用来表示图片的具体含义，还可以加入状态等进一步说明。比如：header_logo， footer_bg,btn_share_pressed,banner_pic_600*800。

4、图标类的背景图片，分类放在一张png上面，然后背景定位。

5、运用前端一般常用的命名习惯的名字，比如：用-next和-prev表示按钮的“下一个”和“前一个”

6、命名尽量短，图片尽量重复使用用。

7、通用的图片，比如按钮的背景，尽量使用同一背景重复使用。

8、大网站，图片也要分文件夹放置，如分为icon等。

css规范：

css文件命名：

1.一律小写;

2.尽量用英文;<

3.不加中杠和下划线;

4.尽量不缩写，除非一看就明白的单词.

全局样式放在 global.css　　

页面样式放在 home.css

css规范：

1、小写字母，用“-”隔开单词。

2、与命名图片一样，第一个单词表示此图片的位置或者性质。尾部分用来表示图片的具体含义，还可以加入状态等进一步说明。比如：header-logo，footer-bg,btn-share-pressed。

3、每个页面的样式要用备注分隔开。

4、id是可以用来布局的，比如说<div id="header"></div> , <div id="footer"></div>...等，这样的语义比较明确，class一般是用来做样式

5、尽量用以下的单词命名。
1)页面结构

容器: container　　页头：header　　内容：content/container

页面主体：main　　页尾：footer　　导航：nav

侧栏：sidebar　　栏目：column　　页面外围控制整体布局宽度：wrapper

左右中：left right center

(2)导航

导航：nav　　主导航：mainbav　　子导航：subnav

顶导航：topnav　　边导航：sidebar　　左导航：leftsidebar

右导航：rightsidebar　　菜单：menu　　子菜单：submenu

标题: title　　摘要: summary

(3)功能

标志：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

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.f12red{font-size:12px;color:#E72020;}

.f14red{font-size:14px;color:#E72020;}

.f14gray{font-size:14px;color:#CCCCCC;}

.f14black{font-size:14px;color:#000000;}

.f18black{font-size:18px;color:#000000;}

(2)字体大小,直接使用’font+字体大小’作为名称,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

.bottom { float:bottom; }

(4)宽高

.w100{width:100px;}

html规范：

1、名字统一用小写。

2、常规的按照约定俗成的命名，例如：index,myorder，login，news。

3、有下一级的用“-”连接，比如news-content。

文件夹规范：

1.一律小写;

2.不加中杠和下划线;

3、简单易懂的单词。