WonderCSS

详谈在CSS中我们应该怎样命名

CSS-how-to-name

随着对WEB前端的经验累积,对一些工作细节越发获得更深的理解及分析。就CSS工作的根本,新建一个CSS样式表文件后如何为这些“孩子们”命名和使用,其中诀窍随着响应式布局的经验累加越来越体现出它的重要性。下面的文章就结合网上现有的一些资源加上个人的理解,来谈谈在CSS样式表中我们应该怎样“命名”。

一 符合W3C规范的CSS命名

我们如何为一个类(class)或ID起名字,首先我们先要了解在 W3C CSS2.1 的 4.1.3 节中提到:标识符(包括选择器中的元素名,类和ID)只能包含字符[ a-z A-Z 0-9]和 ISO 10646 字符编码 U+00A1 及以上,再加连字号(-)和下划线(_);此外在规则上CSS命名不能以数字或一个连字号后跟数字为开头。它们还可以包含转义字符加任何ISO 10646字符作为一个数字编码。

由此可知,作为一个好的CSS命名有这样的一条硬性规定:只能使用英文字母开头。那么名字的语义上我们建议你按其功能来命名,比如 #header 这样的命名能够让人一目了然其位置和意义。就规范性上来说我们不推荐使用大写字母,同时除非无法表达尽可能的不使用连字号(-)和下划线(_)。当然这并非是必须的。

二 常见的CSS命名方式

在结构庞大复杂的网站中,我们的样式表中出于命名的语义结构化难免会出现多词连接,那么在国籍上流行下面几种命名方式可供借鉴:

1 骆驼命名法

指混合使用大小写字母来构成变量和函数的名字,首写字母小写 myData 在这里需要注意就CSS本身是不区分大小写的,但它依赖于文档,比如 XHTML 格式区分大小写,所以骆驼命名法在使用上一定要保持HTML和CSS内一致的命名写法。

2 帕斯卡命名法

指混合使用大小写字母来构成变量和函数的名字,首写字母大写。如 MyData 

3 匈牙利命名法

标识符的名字以一个或者多个小写字母开头作为前缀,标识出变量的作用域,类型等。前缀之后的是首字母大写的一个单词或多个单词组合或者符号,该单词要指明变量的用途。如 txtMyData 

4 下划线或中划线命名法 树状结构的命名 层叠式命名

每一个逻辑断点都有一个下划线或中划线来标记。如 DWMenu_Insert_Animals 

5 常量命名

如 SQL_SELECT_CATEGORIES

三 避重就轻的使用CSS命名

在前言中提及过之所以写这篇文章是出响应式布局工作中得到的感触,因为响应式布局工作中涉及到很多“CSS优先权”的问题。以目前的响应式布局设计主要是根据不同的终端分辨率,加载不同的样式来实现样式重写。了解了这个逻辑性后我们就接着上述内容往下谈,知道了怎么命名后下面的工作是在CSS样式表中我们该怎么“写名”。

其关键我称之为:避重就轻、由内到外

先看下面的HTML代码:


<body>
    <div id="mainnav">
        <ul>
            <li class="index"><a href="/">home</a></li>
        </ul>
    </div>
</body>

如果我们要对锚链接 home 进行文字赋色,那么我们在样式表里只需要进行 .index a {color:red;} 即可,这也是我们推荐的写法。当然还有很多写法来实现这一功能,比如 #mainnav li a {color:red;} 也能做到。那为什么我们推荐前者而非后者呢?其原因并非前者用的字符少,而是前者是用相对最轻的优先权,在HTML代码层次中这它也是由 body 开始的最内层的层级。

我们都知道在CSS样式表中后写的同名标签属性会覆盖之前的属性,如:


.index a {color:red;}
.index a {color:blue;}

先出现的 color:red; 会被后出现的 color:red; 替换/覆盖。那么当后出现的同位置属性在什么情况下无法替换前面的属性呢?那就是当两者权重不对等时。那么就以这个示例来列出其权重由高到低的写法排列:

  1. body div#mainnav ul li.index a {}
  2. div#mainnav ul li.index a {}
  3. div#mainnav ul li a {}
  4. #mainnav ul li a {}
  5. #mainnav li a {}
  6. #mainnav a {}
  7. body div ul li.index a {}
  8. div ul li.index a {}
  9. ul li.index a {}
  10. li.index a {}
  11. .index a {}

在此我们能够得出规律,那就是描述越准确、层级越多其权重越高。同时在这里我们也有必要强调其层次的连贯性的重要性,div#mainnav ul li a {} 绝对比 div#mainnav li a {} 具有更大的优先权。

当然在做响应式布局的时候我们多数使用的是同名覆盖,加上 !important 属性的帮助几乎用不到示例中这样庞大的“阵容”,但了解了这些关于CSS优先权的知识后,在日后的CSS编写中更能做到条理清晰、游刃有余,不是么!

By 于湛 发布于 2013.05.19 4,583 次浏览

详谈在CSS中我们应该怎样命名》上有4条评论

  1. 华康推广专员

    网站改版了啊,这个主题风格赞了!有分享包么

    回复
  2. 王小晓

    学习了,CSS权重那块知识太重要了!反观现在手里正写的样式感觉太随意了,哈哈

    回复
  3. jsonxu

    不赞成这样的写法,你就好比在JS里写了一大堆的全局变量,后果可想而知。
    模块化的思想是需要的。

    回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注