登陆

CSS 类名的单词连字符:下划线还是横杠?

admin 2019-09-27 281人围观 ,发现0个评论

问题

CSS 类或 ID 命名时单词间衔接一般有这几种写法:

  • 驼峰式: solutionTitle、solutionDetail
  • 用横杠衔接: solution-title、solution-detail
  • 下划线衔接: solution_title、solution_detail

应该选用哪种写法呢?挑选的时分是出于个人习气仍是有其他考虑?

看了下豆瓣,美团,淘宝的源码,都是选用 solution_title 的写法。

我的答复

首要定特性,这是个朴实的“代码风格”问题。

什么是“代码风格”问题?有一些特征:

  • 技能标准不会硬性规定。尽管标准有时或许会供给指导性的主张,或许有时会有职业大牛出来宣扬最佳实践。
  • 特性化非常显着。也便是萝卜青菜各有所爱、公说公有理婆说婆有理,永无结论。

扯完之后说一下我自己的习气:

曾经用下划线

首要原因是在编辑器中双击能够选中;别的自己觉得下划线美观(纯个人喜爱)。除此以外或许还有一点“小白式慎重”(防止与 CSS 特点名/值弄混、防止与减号弄混),或许我的启蒙教材便是运用下划线的。

现在首要运用连字符

后来逐步接手或参加了一些他人的项目,触摸过各种代码风格。在老外的一些项目中触摸到许多的运用连字符的命名,看多了感觉也不丑陋。在编辑器中也能够经过“双击并拖动”来选中,所以就逐步过渡到了连字符。

在特别场合用驼峰式

驼峰式写法输入不方便利、引入了大小写的复杂度、可读性无优势,因而很少在日常开发中运用。而正由于如此,我现在首要在一些结构级的类名中运用,以便于日常开发的命名习气区分隔,防止无意中污染结构级款式的或许性CSS 类名的单词连字符:下划线还是横杠?。

关于标准

有网友提到:

HTML 和 CSS 语法中,无论是特点名和值,用到衔接符的当地都是 - 没有 _。Follow 标准有益无害。

这种说法我并不附和。由于“follow 标准”一说没有根据,并且CSS 类名的单词连字符:下划线还是横杠?逻辑不清。

咱们很简单理清一件事——给元素的 class 和 id 命名,本质上是给 HTML 标签的 class 与 id 特点写入值。HTML 的 标签特点值 的合法性与 HTML 标签特点名、CSS 特点的名/值的命名习气有联系吗?

提到“标准”,其实我也彻底不知道 class 和 id 的合法值是什么、不知道下划线是否合法,乃至记不太清楚 class 与 id 的值是否是大小写灵敏的。为此,我查阅了现行标准 HTML 4.01 和 CSS 2.1 的部分章节。CSS 2.1 是这样说的:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); ...

也便是说,用下划线来衔接多个单词作为 claCSS 类名的单词连字符:下划线还是横杠?ss 或 id 的值,是合法的。

(贺师俊教师提示道:CSS 1 和 2 的标准在这一点上有过错,没有把下划线加进去;直到 CSS 2.1 中,这个问题才被批改。)

其它观念

关于可读性

贺师俊教师(@hax)提出了一个简单被疏忽但实际上很重要的要素:

- 比 _ 有一点好的当地是 _ 有时分会CSS 类名的单词连字符:下划线还是横杠?难以分辩,就好像空格相同。而 class 里边有没有空格是挺重要的。比较以下三种用法:

关于编辑器

许多同学提到了不同的单词CSS 类名的单词连字符:下划线还是横杠?衔接办法对挑选操作的影响,比方双击能够直接选顶用 _ 衔接的多个单词,但用 - 衔接的多个单词则无法悉数选中,选区会在 - 处停止,即只能选中一个单词。

Sublime Text

对此,一丝同学(@yisibl)在 微博 做了科普:

CSS 命名用连字符 - 不能双击选中的问题一直是一个伪出题,这是编辑器的问题,由于这个而选用下划线 _ 真实有些勉强。在 Sublime Text 2 的大局装备文件 Preferences.sublime-settings 中找到 word_separators 字段,删掉其间的 - 即可双击选中一连串的多个单词。

Vim

也有一位 潘魏增同学 供给了 Vim 的装备办法:

假如运用 vim,能够设置 set iskeyword+=-,这样就能够匹配选中以 - 衔接的关键词,search 和 mark 的时分会比较便利。

(抱愧,这儿仅仅纯转发,暂时无法验证。)

UltraEdit

我在 Windows 下一般用 UltraEdit 干活,它有一种操作叫作 Ctrl +参考文献格式 双击。并且咱们能够设置此操作的分界符,很灵敏。

鼠标挑选

假如你的编辑器不支持上述装备或操作,要想一次性选中以 - 衔接的多个单词,其实也是有解决方案的: 双击的最终一击先不要松开,再左右拖动就能够以单词为单位扩张选区。(这种挑选办法简直适用于一切编辑器,并且 Windows 和 Mac 通吃。)

实际上我并不主张像前面几种办法那样在编辑器中撤销 - 的分界符身份,而是主张运用这种“双击 + 拖动”的办法来挑选恣意数量的单词。由于,某些时分你只想选中 one-two-three 中的 one-two 或 two-three 或单个单词,那么这种办法明显更自在更准确——想选少选少,想选多选多。

--- Bonus Track ---

假如你在运用 WebStorm(或它的兄弟 IDE),就不要用鼠标点来点去了,不高雅。

你能够把光标移到某个单词上,用 Ctrl + W(在 Mac 下是 Cmd + W)方便键就能够选中当时单词;更奇特的是,这个方便能够接连运用,能够不断把选区扩张到更大的语法单元:单词 → 一串单词 → 整个字符串(或句子) → 目标(或函数效果域) → …… → 整个文件。

(仅有不方便的是,这个方便键在其它程序中是封闭当时窗口的操作,简单混杂,主张在 IDE 中给这个操作分配其它的方便键。)

期望本文能协助到您!

点赞+转发,让更多的人也能看到这篇内容(保藏不点赞,都是耍流氓-_-)

重视 {我},享用文章首发体会!

每周要点霸占一个前端技能难点。更多精彩前端内容私信 我 回复“教程”

原文链接:https://github.com/cssmagic/blog/issues/42

请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP