大型网站css样式命名和应用原则

1.    CSS属性应用原则。
原则1：首页DIV最小块级单位须设置高度；子页可能添加资料的DIV块不应设置高度;
原则2：css 样式继承关系必须控制在三层以内；
原则3： 对于浮动所产生的IE6BUG,在全局样式里面应定义.clear{clear:both;height;0px;overflow:  hidden;}
原则 4：所有页面文件的编码格式统一为：UTF-8;

 

2.    CSS命名规范。
全局样式 base.css 指所有页面通用的样式，或者公共块的样式;
首页样式 index.css
频道页面样式 channel.css
详细页面样式 detail.css
如果有特殊单独页面样式，可另取样式命。

 

3.    页面框架结构保留字。
页面容器：＃wrap                      页面头部：#header
页面中心内容：#maincontent            页面底部：#footer
横向方位容器1：main，side             横向方位容器2：leftframe，midframe，rightframe
横向分段容器：section，field，column  盒子内容属性：contentbg
盒子上方属性：topbg                    盒子下方属性：bottombg
盒子左边属性：leftbg                   盒子右边属性：rightbg

 

4.    导航保留字。
导航：nav               主导航：mainnav
子导航：subnav          顶导航：topnav
边导航：sidebar         左导航：leftsidebar
右导航：rightsidebar    菜单：menu
子菜单：submenu         下拉菜单：dropmenu
快速菜单：quickmenu

 

5.    功能保留字。
列表：list                 标题：title
摘要：intro               内容：text
按扭：btn                  搜索：search
登陆：login              注册：regsiter
提示信息：msg             小技巧：tips
图标:icon                 滚动：scroll

 

6.    根目录文件夹命名存放方式。
例如：
总网站文件存放于F盘web下；
Web下应该包含
images    存放所有网站直接插入的图片；
imagestemp    存放所有网站直接插入，但后期一定被程序替换的图片。
imagesad    存放网站所有的广告图片；
style images    存放公共或单独页面样式所涉及的样式图片；
存放公共样式表或单独页面样式表；
include    存放网站所有的包含页面；
js    存放网站所有的JS效果文件
XXXX
频道页文件夹    style    存放所有频道页面所涉及到的样式图片和样式表；
存放所有该频道下的子页面；

 

7.    注释。
页面和样式表里面容易混淆，或比较重要的样式，框架样式都应写注释

页面内注释格式为
<!–header–>    ————————–为开始
<!–//header–>  ————————–为结束

样式表内注释格式为：

 /*XXXX 样式开始*/ 

/*XXXX 样式结束*/