网站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 样式结束*/
本文转载自:http://www.ilmilk.com/large-sites-and-application-of-the-principles-of-css-style-name.html
建议继续学习:
- 规范自己的JavaScript书写 (阅读:6136)
- PHP编码规范 (阅读:4491)
- 代码里的命名规则:错误的和正确的对比 (阅读:3626)
- 数据库开发规范 (阅读:3608)
- 分清“语言/规范”以及“平台/实现”,以及跨平台.NET开发 (阅读:3302)
- Android 4.0设计规范 优先导读 十大改变 (附全文翻译pdf) (阅读:2915)
- 良好的书写规范提高PHP代码执行效率 (阅读:2711)
- 编码风格不是编码规范 (阅读:2689)
- phpDocumentor (阅读:2568)
- iOS和Android设计规范备忘表 (阅读:2412)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:大树 来源: 大树底下
- 标签: 命名 规范
- 发布时间:2010-10-02 08:18:51
-
[85] memory prefetch浅析
-
[57] 基本排序算法的PHP实现
-
[51] 深入浅出cassandra 4 数据一致性问
-
[43] 转载:cassandra读写性能原理分析
-
[40] MySQL半同步存在的问题
-
[39] javascript插入样式
-
[38] Inline Form Labels
-
[37] JS中如何判断字符串类型的数字
-
[36] 字符引用和空白字符
-
[35] 获取Dom元素的X/Y坐标