DIVCSS 基础三:CSS选择器命名及常用命名

[复制链接]
建站高手 发表于 2015-9-5 18:05:44 [DIVCSS] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
规范的命名也是Web标准中的重要一项,标准的命名可以使代码更加易读,而且利于搜索引擎搜索,比如定义了两个div,一个id命名为“div1”,另外一个命名为“News”,肯定第二个比较易读,而且搜索引擎抓取率要高,在团队合作中还可以大大提高工作效率。为了达到这种效果我们就要规范化命名(语义化命名)!

说个题外话,规范化命名的代码,会显着你更加专业!

关于CSS命名法,和其他的程序命名差不多,主要有三种:骆驼命名法,帕斯卡命名法,匈牙利命名法。看他们的名字挺不好理解的,不要被吓到了,其实很容易,不信的话继续往下看~

【骆驼命名法】

说到骆驼大家肯定会想到它那明显的特征,背部的隆起,一高一低的,我们的命名也要这样一高一低,怎么才能这样,就用大小写字母呗~,大写的英文就相当于骆驼背部的凸起,小写的就是凹下去的地方了,但是这个也是有规则的,就是第一个字母要小写,后面的词的第一个字母就要用大写,如下:
#headerBlock

第一个单词(header)的第一个字母(h)用小写,第二个单词(block)的第一个字母用大写(B),如果第二个单词后面还有单词呢?那就是下面这种情况
.navMenuRedButton

第一个单词(nav)的第一个字母(n)用小写,第二个单词(menu)的第一个字母用大写(M),第三个单词(red)的第一个字母也用大写(R),第四个单词(button)的第一个字母还是用大写(B),同样后面所有单词的首字母都要大写。

【帕斯卡命名法】

这种命名法同样也是大小写字母混编而成,和骆驼命名法很像,只有一点区别,就是首字母要大写,如下:
#HeaderBlock

和骆驼命名法只有一点区别,就是所有单词的首字母都要大写,当然也包括第一个单词(header)的首字母(h)了,也要大写。
.NavMenuRedButton

如果有多个,也是全部单词的首字母均要大写。

题外话,如果说“骆驼命名法”是单峰驼的话,那么“帕斯卡命名法”就是双峰驼了~

【匈牙利命名法】

匈牙利命名法,是需要在名称前面加上一个或多个小写字母作为前缀,来让名称更加好认,更容易理解,比如:
#head_navigation

.red_navMenuButton

以上三种,前两种(骆驼命名法、帕斯卡命名法)在命名CSS选择器的时候比较常用,当然这三种命名法可以混合使用,只需要遵守有一个原则“容易理解,方便协同工作”就OK了,或者说“即使不懂代码的人看了代码也知道这块起什么作用”,没有必要强调是哪种命名法,根据个人喜好使用就行。

        以下为页面模块的常用命名:
        头: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
        小技巧:tips

到这节课,都是CSS比较基础的知识,为了照顾没有一点基础的同学,从下节课开始,在“基础四”“基础五”将介绍CSS布局页面中的很重要的两个概念:
      
1)盒子模型      
2)内联元素VS块状元素

另外推荐阅读:
基础二:CSS选择器
http://bbs.zb7.com/thread-529501-1-1.html
基础一:CSS如何控制页面
http://bbs.zb7.com/thread-529478-1-1.html







上一篇:基础二:CSS选择器
下一篇:基础四:盒子模型

大神点评4

teamczyx 发表于 2015-9-6 00:41:01 [DIVCSS] 显示全部楼层
很给力,希望分享更多给力的帖子啊。
向志祥明星会员实名认证 发表于 2015-9-6 00:47:47 [DIVCSS] 显示全部楼层
很给力,希望分享更多给力的帖子啊。
http://www.37hao.net
文山社区,努力做到文山最有影响力的网站
1547909727 发表于 2015-9-6 13:30:52 [DIVCSS] 显示全部楼层
很给力,希望分享更多给力的帖子啊。
huakhl 发表于 2015-9-6 14:03:05 [DIVCSS] 显示全部楼层
很给力,希望分享更多给力的帖子啊。
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表