CSS 选择器命名规范化

所属分类: 网页制作 / CSS 阅读数: 337
收藏 0 赞 0 分享

规范的命名也是Web标准中的重要一项,标准的命名可以更好的看懂代码,我想大家应该都有这种经历,某日翻出自己过去写的代码居然看不懂了,呵呵,为了避免这种情况我们就要规范化命名,再说了,现在一个项目不是一个人就可以完成的,是需要大家互相合作的,如果没有规范化命名,别人就无法看懂你的代码,大大降低了工作效率,所以必须规范化命名,这样还显着咱专业!

好了不多说了,关于CSS命名法,和其他的程序命名差不多,也是有三种:骆驼命名法,帕斯卡命名法,匈牙利命名法

【骆驼命名法】

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

  1. #headerBlock
  2. .navMenuRedButton
【帕斯卡命名法】
这种命名法同样也是大小写字母混编而成,和骆驼命名法很像,只有一点区别,就是首字母要大写,如下
  1. #HeaderBlock
  2. .NavMenuRedButton
【匈牙利命名法】
匈牙利命名法,是需要在名称前面加上一个或多个小写字母作为前缀,来让名称更加好认,更容易理解,比如:
  1. #head_navigation
  2. .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
内容:content
到这节课,都是CSS非常基础的知识,是为了照顾没有一点基础的同学,从下节课开始,将介绍CSS布局页面中的很重要的两个概念,也是必须要掌握的概念,如果不能很好理解的话后面再布局页面的时候就会出现很多问题。
1)盒子模型
2)内链元素VS块状元素
更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介:在这篇文章里,我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程,该课程旨在向大家提供Web设计和开发的坚实基础,无论读者是谁,此教程完全免费、可访问,并且不需要预备知识。当然,我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介:如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求,先在文章顶部给出链接:《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点。如果对此深以为然的朋友,请一笑过之 首先声明: 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外) 解决:写全单位如padding:0px; 2、水平居中 问题:div里的内容,ie默认为center,而ff默认left 解决:mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序,刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多