前端css样式规划

【前端css样式规划】

前端涉及文件夹

images----背景图片
css----------样式文件
js------------脚本文件
temp------临时图片文件

前端主要样式表

global.css-------------全局样式
headFoot.css--------头部与底部样式
index.css--------------首页样式
xx_channel.css------频道首页页面样式 (eg : book_channel.css,video_channel.css)
xx_list.css------------列表页面样式
xx_detail.css--------详细页面样式
forms.css ------------表单样式 (除去头部的所有form)
注：

样式名称使用驼峰命名法如 boxLeft
xx代表的是频道名称，比如

视频频道：video；图书频道为：book；共享资料：share；文档：document；期刊：item；课程：curse；学分商城：score；考试：test；

前端主要标签

全局

header-----页头
main--------主题
box----------容器
footer------页尾

导航

nav-------------导航
mainnav-----主导航
subnav-------子导航
menu---------菜单
submenu----子菜单
sidebar-------内页左侧分类

功能

logo-----------标志
login----------登录
search-------搜索
banner------广告
focus--------焦点图
scroll、bannerScroll--------滚动
crumbs-----面包屑
tab----------标签切换
pop-------------弹出窗口
icons-------------图标
partner--------合作伙伴
link--------------友联

关于注释

在页面和样式表里面，对容易混淆或比较重要的框架、样式都应写注释
页面内注释格式为
 --------------------------为开始
 --------------------------为结束
样式表内注释格式为：
/* --header-- */
/* --//header--*/

关于样式排序

所有样式写到一行

global.css

body,form,textarea,select,option,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dt,dd,menu,blockquote,fieldset,legend,button,input,hr,pre{margin:0;padding: 0;}
body{font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#??????;background:???;background-color:#??????;}
ul,ol,img{border:0px;}
li{list-style-type:none;}
input,select,textarea{vertical-align:middle;outline:none;}
a{color:#??????;text-decoration:none;}
a:hover{color:#??????;}
.clear{clear:both;font-size:0;height:0;line-height:0;}
.clearfix{overflow:hidden;zoom:1;}
.leftF{float:left;}
.rightF{float:right;}

代码规范
第一：避免空的src和href；
第二：把CSS放到顶部；
第三：尽量把能放在底部的JS放到底部；
第四：网页中的css和JS代码如果是公共部分的都外调。(网页尽量少出现css跟js代码)；
第五：精简css跟js代码；
第六：主要的内容放在一个DIV里面；
第七：一个页面只有一个H1标签，如果要用H2标签那也必须是对H1的说明；H4-H6可以舍弃这些标签；