前端 · 2009 年 7 月 17 日

常用的CSS命名规则

头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner

  
注释的写法

CSS注释
  /* Footer */
  内容区
/* End Footer */

Html注释
<!–footer–>
<!–end footer–>

id的命名

(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
招聘:hr
  下载:download
  投票:vote
  合作伙伴:partner
  友情链接:link
  版权:copyright

class的命名

(1) 颜色:使用颜色的名称或者16进制代码,如

  .red { color: red; }
  .f60 { color: #f60; }
  .ff8600 { color: #ff8600; }

  (2)字体大小,直接使用"font+字体大小"作为名称,如

  .font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

  (3)对齐样式,使用对齐目标的英文名称,如

  .left { float:left; }
  .bottom { float:bottom; }

  (4)标题栏样式,使用"类别+功能"的方式命名,如
  .barnews { }
  .barproduct { }

(5)关于CSS常用简写

Body,img,form,ul,li,dd,dt,h1,h2,h3,h4{ margin:0; padding:0; border:0; font-size:12px; list-style:none;}

.font12blue a:link,.font12blue a:visited{ color:blue; text-decoration:none;}
.font12blue a:hover{ color:#ff6600; text-decoration:underline;}

Margin:5px 0 0 0/*上 右 下 左*/
Padding:5px 0 0 0/*上 右 下 左*/
Border:1px solid #000

(5)其他
Mozilla建议的CSS书写顺序
//显示属性 display list-style position float clear //自身属性 width height margin padding border background //文本属性 color font text-decoration text-align vertical-align white-space other text content

关于hack
width:100px;/*FF Hack*/
*+width:200px;/*ie7 Hack*/
_width:150px;/*ie6 Hack*/
可以解决FF与IE7,IE6的兼容问题,书写顺序为FF,IE7,IE6
(HTML代码,CSS样式越简练越好,尽量不要用HACK)

注意事项

  1.一律小写;
  2.尽量用英文;
  3.单词与单词中间用下划线隔开;
4.尽量不缩写,除非一看就明白的单词.
5.定义时最外面的那个DIV用. Wrapper{}来定义

CSS样式文件命名(完善中)

  主要的 master.css
  模块 module.css
  基本共用 base.css
  布局,版面 layout.css
  主题 themes.css
  专栏 columns.css
  文字 font.css
  表单 forms.css
打印 print.css
基本共用: base.css (公用样式,文字,连接,表单,边框)
头尾共用布局:header (公用的头文件,底文件,搜索等有丰布局的样式)
布局,版面: layout.css (所有单独布局与版面的样式)
补丁 mend.css (后期补充扩展的样式)
资讯:article1.css (资讯的channel.asp 、list.asp、detail.asp的样式文件)
企业:article1.css (企业的channel.asp 、list.asp、detail.asp的样式文件)
知识:article1.css (知识的channel.asp 、list.asp、detail.asp的样式文件)
产品:product.css (产品的channel.asp 、list.asp、detail.asp的样式文件)
商机:information.css (商机的channel.asp 、list.asp、detail.asp的样式文件)
展会:exhibit.css (展会的channel.asp 、list.asp、detail.asp的样式文件)
人才:job.css (人才的channel.asp 、list.asp、detail.asp的样式文件)
店辅:corporation.css (店辅的channel.asp 、list.asp、detail.asp的样式文件)
会员:member.css (会员的channel.asp 、list.asp、detail.asp的样式文件)