网站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书写 (阅读:5969)
- PHP编码规范 (阅读:4350)
- 代码里的命名规则:错误的和正确的对比 (阅读:3558)
- 数据库开发规范 (阅读:3388)
- 分清“语言/规范”以及“平台/实现”,以及跨平台.NET开发 (阅读:3179)
- Android 4.0设计规范 优先导读 十大改变 (附全文翻译pdf) (阅读:2738)
- 编码风格不是编码规范 (阅读:2603)
- phpDocumentor (阅读:2511)
- 良好的书写规范提高PHP代码执行效率 (阅读:2571)
- ClassName的长命名 VS. 短命名(懒懒交流会记录) (阅读:2020)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:大树 来源: 大树底下
- 标签: 命名 规范
- 发布时间:2010-10-02 08:18:51
- [46] IOS安全–浅谈关于IOS加固的几种方法
- [45] 图书馆的世界纪录
- [45] 如何拿下简短的域名
- [45] Oracle MTS模式下 进程地址与会话信
- [43] android 开发入门
- [42] 【社会化设计】自我(self)部分――欢迎区
- [41] 界面设计速成
- [41] 读书笔记-壹百度:百度十年千倍的29条法则
- [39] 视觉调整-设计师 vs. 逻辑
- [35] Go Reflect 性能