CSS 命名原则

因为 CSS 太容易上手，用户在 ID 和 Class ( 类别 ) 的命名上，时常发生名称不一致或随便取名的状况，这种没有系统性的命名，往往造成后续不容易理解或嵌套顺序错乱，这篇教学会介绍一些常用又好理解的命名原则，透过这些命名原则，就能让 CSS 写得更加整齐漂亮又好维护。

快速导览：

• 区分大小写
• 多个单字的名称组合方式
• 语意清楚
• 简单扼要 ( 短命名 )
• 使用字首代码
• 合法的命名字元

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

区分大小写

由于 HTML 的 ID、Class 和属性名称只支援英文，因此就会产生区分英文字母大小的状况，下表列出 CSS 选择器区分大小写的规范：

以下方的 CSS 为例，因为属性数值区分大小写，最后呈现的文字颜色就会是红色。

/* <div name="oxxo">Hello World!!</div> 會呈現紅色 */
div[name="oxxo"] {color: red;}
div[name="OXXO"] {color: blue;}

多个单字的名称组合方式

ID、Class 和属性对于“多个单字”的命名原则并不相同，下表列出一些差异：

由于网页使用的 JavaScript 语言可以直接读取 ID 作为变数使用，所以 ID 的命名通常会按照“小驼峰式命名法 ( lower camel case )”命名，这种命名法的第一个字母为小写，后续每个单字的字首大写。

<h1 id="myNameIsOxxo">OXXO</h1>
<h2 id="helloWorldEveryone">Hello World!!</h2>

Class 的命名通常使用“-”连接多个单字，全部单字都是小写，如果使用 JavaScript 读取后会再利用小驼峰式命名法建立对应的变数。

<h1 class="my-name-is-oxxo">OXXO</h1>
<h2 class="hello-world-everyone">Hello World!!</h2>

如果是 Attribute 属性，通常会使用“data-”或“attr-”开头，后续属性使用“-”连接多个单字，或按照 Class 的命名原则进行命名 ( 属性的数值因为是字串，就并没有撰写格式的限制 )，下方只是提供一个参考范例，通常属性都会是一个或两个单字，不会写得这么复杂。

<h1 attr-my-name-is-oxxo="oxxo">OXXO</h1>
<h2 hello-world-everyone="hello">Hello World!!</h2>

语意清楚

ID、Class 和属性在命名时，尽可能让名称的“语意清楚”，也就是看到名称就可以猜出这个 ID 或 Class 的意义，下方列出好与不好的命名，其中不好的命名，通常是看不出来这个名称是在做什么，或容易被其他的名称互相嵌套。

• 如果是有意义或特有的名称，且已经确认不会被其他 CSS 选择器影响，则可以按照个人喜好使用。
• 避免使用单一字母或毫无意义的字母数字。

以下方的 HTML 使用了“很不好”的 Class 命名方式，不只名称使用毫无意义的单一字母，不同的元素里又有各自的 t 类别，这种做法在 CSS 选择器的操作上，会变得复杂且容易出错。

<h1 class="t">OXXO.STUDIO</h1>
<div>
  <h2 class="t">STEAM 教育學習網<h2>
</div>

简单扼要 ( 短命名 )

在“语意清楚”的命名之余，也尽量采用“短命名”的方式，也就是使用常见的“英文缩写”进行命名，这种做法不仅可以减少 CSS 程序码的大小，在阅读上也更简单清楚，下方列出一些常见的短命名：

使用字首代码

如果开发的网页专案较为庞大，通常会建立“字首代码”区分“不同的”CSS，字首代码常代表“某些特定功能或行为”的样式，以知名的 Bootstrap 为例，如果是网格布局的 class，往往会看见 col 为字首的命名。

<div class="container">
  <div class="row">
    <div class="col-md-4">oxxo1</div>
    <div class="col-md-4">oxxo2</div>
    <div class="col-md-4">oxxo3</div>
  </div>
</div>

字首代码除了区分功能，往往也作为“区分不同的软件包”使用，例如 Pure CSS 这套 CSS 框架，就会使用 pure- 开头表现自己的 CSS 样式。

<div class="pure-g">
    <div class="pure-u-1-3"><p>oxxo1</p></div>
    <div class="pure-u-1-3"><p>oxxo2</p></div>
    <div class="pure-u-1-3"><p>oxxo3</p></div>
</div>

合法的命名字元

标准的合法命名字元规则如下：

• 只能使用英文字母大小写、数字、连接线“-”和底线“_”。
• 只有数字不能当作字首，英文字母、连接线和底线都能当作字首代码。
• 支援两个连接线“--”或两个底线“__”的写法。
• 支援中文字、中文标点符号、其他 ASCII 字元或 emoji，但都不建议使用。

下方的命名范例都是合法且常用的：

虽然名称可以使用中文字、中文标点符号或 emoji，但为了避免在不同语系浏览器出现编码问题，仍然不建议使用，至于其他没有列出的 ASCII 字元 ( 例如：,、.、%...等 )，因为常与功能冲突，通常都是不合法的，虽然可以使用跳脱字元“\”的方式处理，但在阅读和管理上都不容易理解且容易出错，因此都不建议使用。

小结

俗话说“好的命名原则带你上天堂”( 我说的 )，好的命名不只容易理解，对于复杂的 CSS 样式表更为重要，如果能够一目了然的阅读和管理，开发上也就更省时间也不容易出错啰。

意见反馈