前端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、简单易懂的单词。