码迷,mamicode.com
首页 > Web开发 > 详细

CSS选择器命名及常用命名

时间:2017-01-21 17:28:39      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:英文   下载   混合   标准   app   作用   滚动   引擎   border   

CSS选择器命名及常用命名

CSS选择器命名及常用命名
规范的命名也是Web标准中的重要一项,标准的命名可以使代码更加易读,而且利于搜索引擎搜索,比如定义了两个div,一个 id 命名为“div1”,另外一个命名为“News”,肯定第二个比较易读,而且搜索引擎抓取率要高,在团队合作中还可以大大提高工作效率。为了达到这种效果我们就要规范化命名(语义化命名)!
  说个题外话,规范化命名的代码,会显着你更加专业!
 
  关于CSS命名法,和其他的程序命名差不多,主要有三种:骆驼命名法,帕斯卡命名法,匈牙利命名法。看他们的名字挺不好理解的,不要被吓到了,其实很容易,不信的话继续往下看~
 
  【骆驼命名法】
  说到骆驼大家肯定会想到它那明显的特征,背部的隆起,一高一低的,我们的命名也要这样一高一低,怎举才能这样,就用大小写字母呗~,大写的英文就相当于骆驼背部的凸起,小写的就是凹下去的地方了,但是这个也是有规则的,就是第一个字母要小写,后面的词的第一个字母就要用大写,如下:
  #headerBlock
  如果第二个单词后面还有单词呢?那就是下面这种情况,
  .navMenuRedButton
  也就是说,无论几个单词凑一块,后面所有单词癿首字母都要大写。
 
  【帕斯卡命名法】
  这种命名法同样也是大小写字母混编而成,和骆驼命名法很像,但和骆驼命名法有一点区别,就是所有单词的首字母都要大写,当然也包括第一个单词,如下:
  #HeaderBlock
  .NavMenuRedButton
  题外话,如果说“骆驼命名法”是单峰驼的话,那么“帕斯卡命名法”就是双峰驼了~
 
  【匈牙利命名法】
  匈牙利命名法,是需要在名称前面加上一个或多个小写字母作为前缀,来让名称更加好认,更容易理解,比如:
  #head_navigation
  .red_navMenuButton
 
  以上三种,前两种(骆驼命名法、帕斯卡命名法)在命名CSS选择器的时候比较常用,当然这三种命名法可以混合使用,另需要遵守一个原则“容易理解,方便协同工作”就OK了,或者说”即使不懂代码的人看了代码也知道这块起什么作用”,没有必要强调是那种命名法,根据个人喜好使用就行。
页面模块的常用命名
头:header 导航:nav 菜单:menu 友情链接:friendlink
页面外围包裹:wrapper 子导航:subnav 子菜单:submenu 下载:download
页面主体:main 广告:banner 侧栏:sidebar 小技巧:tips
内容:content 标志:logo 栏目:column 滚动:scroll
页脚:footer 搜索:search 热点:hot 上一个:prev
版权:copyright 登录条:loginbar 新闻:news 下一个:next
 

CSS选择器命名及常用命名

标签:英文   下载   混合   标准   app   作用   滚动   引擎   border   

原文地址:http://www.cnblogs.com/chenhaoqiang/p/6337286.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!