CSS命名规范点滴

1.公共部分和经常要用到的样式

整个容器: container
外围整体布局: wrap
页头部分: head/header/top
内容:content
页脚部分:foot/footer/bottom
栏目:column
主体部分:main
左/中/右三栏 main_left/main_mid/main_right或者main_l/main_m/mian/r
侧栏:sidebar
左右两栏 sidebar_l/sidebar_r或者leftsidebar/rightsidebar
左/中/右:left/center/right
标签页:tag
首页:homepage
二级页面:subpage

网站标识:logo
商标:brand

主导航:nav/navi
二级导航:subnav
顶部导航:topnav
侧导航:sidenav
左/右导航:leftsidenav/rightsidenav
子导航:subnav

菜单:menu
子菜单:submenu
标题:title
摘要:summary
下拉:drop
下拉菜单:dropmenu

搜索:search
热门搜索:hotsearch
关键字:keyword
搜索输入框:search_input
搜索条:searchbar
搜索结果:search_result

登录:login
注册:regsiter
状态:status
登录条:loginbar
忘记密码:foreget_password
会员:member

友情链接:friendlink/link
版权信息:copyright
投票:vote
合作伙伴:partner
服务:servic
指南:guid
网站信息:siteinfo
网站地图:sitemap
网站帮助:sitehelp
法律声明:siteinfolegal
信誉:siteinfocredits
加入我们:joinus
关于我们:aboutus
联系我们:contantus
常见问题:faq
博客:bolg
论坛:forum/bbs

按钮:button/but
功能区:shop
图标:icon
箭头:arrow/arr
提示信息:message/msg
小技巧:tips
注释:note
当前的:current
滚动:scroll
工具条:toolbar/tool
放大:zoom

内容:content
时间:time
日期:data
热点:hot
新闻:news
下载:download
产品:products/pro
缩略图:screenshot
产品价格:pro_prices
产品描述:pro_description
产品评论:pro_review
编辑评论:editor_review
最新产品:news_release/newspro
生产商:publisher

……



2,一些常用样式的命名习惯

1)首先定义公共部分的css
如：* { font-size:12px}
body { color:#666}
ul li { list-sytle:none}
form { margin:0; paddingL0}
input { color:#333}
label
p
a
a:hover
dl,dd,dt
文章标题按主次大小依次h1,h2,h3,h4,h5,h6

……

2)区域块:box/area
区域块样式类别+box/area,比如新闻区域块:newsbox/newsarea 产品区域块:probox/proarea
标题栏:bar
标题栏样式类别+bar,比如新闻标题栏:newsbar 产品标题栏:probar
列表:list
列表样式类别+list,比如新闻列表newslist 产品列表:prolist

3)对齐样式,如:
.left { float:left}
.right { float:right}

4)定义行高样式,如定义一个行高为9px的样式:
.lineheight9px { lineheight:9px}

5)定义字体大小颜色,如定义一个颜色为红色、14号字体粗体
.font12red_b {font:700 14px "SimSun"; color:red}

6)定义按钮样式,but/button+属性或者功能，
如定义一个绿色按钮 button_green/but_green
搜索按钮 button_search/but_search
注册/登陆按钮 button_reg/but_reg button_login/but_login

7)输入框样式,input+属性或者功能
如定义搜索框样式：.input_search { border:1px solid #ccc; height:20px}

8)定义图片样式，img+属性或者功能
如：.img_border { border:1px solid #ccc}
    .img_float { float:left}

9)清屏:
.clear { clear:both}
.over { overflow:hidden}

……

3,一些注意事项：

1)一律小写字母；
2)尽量用英文；
3)不加中杠，有必要用下化线区分；
4)css注释 /* ffff */ 注意要加空格，我就碰到过因为不小心没加上空格，在JSP读取下会忽略掉注释下的第一个css
5)css文件最好用utf-8
6)页面居中：margin:0 auto; 居右：margin:0 0 0 auto; 居左：margin:0 auto 0;

4.css文件名命名

1)如果是一个小型网站或一个企业网站，只要一个css文件就可以,我一般取名为:style.css/main.css/layout.css

2)如果是个大型的门户网站，css一般分三个文件区分出来,用的最常用的css和公共部分的css 放在common.css;一些主要的其他css放在 content.css;字体放在font.css