网站设计CSS规范必看

页面制作最基本、最重要的一定是CSS,定义合理的CSS命名规范,可以大幅提高页面制作的效率和方便开发及相关人员修改编写。关于CSS的命名方法可大致分三种:骆驼命名法、帕斯卡命名法、匈牙利命名法。
【骆驼命名法】
骆驼命名法,骆驼大家肯定会想到它那明显的特征,背部的隆起,一高一低的,我们的命名也要这样一高一低,怎么才能这样,就用大小写
字母呗,大写的英文就相当于骆驼背部的凸起,小写的就是凹下去的地方了,但是这个也是有规则的,就是第一个字母要小写,后面的词的
第一个字母就要用大写,如:
#headerBlock
.navMenuRedButton
【帕斯卡命名法】
帕斯卡命名法,同样也是大小写字母混编而成,和骆驼命名法很像,只有一点区别,就是首字母要大写,如:
#HeaderBlock
.NavMenuRedButton
【匈牙利命名法】
匈牙利命名法,是需要在名称前面加上一个或多个小写字母作为前缀,来让名称更加好认,更容易理解,如:
#head_navigation
.red_navMenuButton
关于CSS的命名我们会一般采用流行的骆驼式命名法:正如它的名称所表示的那样,是指混合使用大小写字母来构成变量和函数的名字,即函
数名中的每一个逻辑断点都有一个大写字母来标记。
1.通用命名规则:
1)所有ID或者class字母和数字之间用“_”连接,如: #col_1、#col_2
2)所有ID或者class两个单词之间的链接采用骆驼式命名法,如: mianNav、footNav
3)页面主体框架布局命名:Lay_1、Lay_2 、Lay_3
4)栏目布局容器命名一律采用: col_1、col_2、col_3、col_4、col_N
5)栏目标题块命名一律采用title。元素标签采用:<h4> 如:<div><h4>标题</h4></div>
6)页面所有图片区域全部采用:pic_1、pic_2、pic_3、pic_N
7)页面文本列表区域全部采用: Lst_1、Lst_2、Lst_3、Lst_N
8)页面上按钮采用:btn_1、btn_2、btn_3、btn_N
9)广告区域:ad_1,ad_2,ad_3,ad_N
2.主框架命名规则:
1)#header (页面头部)
2)#main (页面主体)
3)#footer (页面尾部)
3.通用命名规则:
主 体:main
外 层:wrap
功能条:funcBar
主导航:mainNav
子导航:subNav
友情链接:friendLink
版 权:copyright
页 眉:header
页 脚:footer
标 题:title
主导航:mainNav
子菜单:subMenu
注 释:note
面包屑:breadcrumb
容 器:container
内 容:content
搜 索:search
登 陆:Login
当前状态:current
页头:header
标志:logo
侧栏:sidebar
广告:banner
导航:nav
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
信息:msg
提示技巧:tips
栏目标题:title
指南:guide
服务:service
热点:hot
新闻:news
下载:download
注册:reg(register)
状态:status
按钮:btn
投票:vote
4.常用简写命名规则:
bd:Body
hd:Header
fnt:字体
nav:导航
tb:表格
lnk:链接
ml/mr:margin-left/margin-right
lst:列表
pl / pr / pd:padding-left/-right/padding
col:栏目
frm:表单
con:内容
inf:信息
lg:Logo
inp:Input
ft:Footer
btn:Button
more:更多
fl /fr float:left/float:right
tit 标题栏
spr 空行
t / d / mid / l / r:上 / 下 / 中 / 左 / 右
bdr:边
w:宽
h:高
习惯性的使用规范CSS写法,对网站可以大大增加修改性,这也对设计有个标准化,希望大家在做最基础的一步养成很好的习惯。后期我会更新更多的文来交流与学习。希望大家关注!这里提供一个简单的页面http://seosir.cc/demo/concision/供大家思考。

讨论区

  • 王宝臣

    你好,我是王宝臣,很高兴认识你!话说div+css应该是我最初技能里面最好的一个。不过这个命名,唉。有表不过不喜欢使用这些标准化的css命令,不过一直也知道对于google我觉得应该真的会有很大帮助。

    2012 年 5 月 10 日 00:10

  • Net_crack

    好的CSS规范会事半功倍,好多悲催的实践经验总结。

    2012 年 5 月 12 日 09:47

  • 六月SEO博客

    好,这个写的不错,还真没有关注过,转了

    2012 年 5 月 10 日 11:22