来自 前端知识 2019-12-07 15:32 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

下划线还是连接符

CSS 类名的单词连字符:下划线还是接二连三符?

2014/05/08 · CSS · 3 评论 · CSS

正文我: 伯乐在线 - CSS魔法 。未经小编许可,防止转发!
迎接出席伯乐在线 专栏编辑者。

正文的一部分剧情收拾本人对此主题素材的解答: 取名 CSS 的类或 ID 时单词间怎么样连接? – 微博

 本文的片段内容整理自个儿对此难点的解答: 取名 CSS 的类或 ID 时单词间怎么着连接? - 乐乎

问题

CSS 类或 ID 命名时单词间连接通常有那二种写法:

  • 驼峰式: solutionTitlesolutionDetail
  • 用横杠(连接符)连接: solution-titlesolution-detail
  • 下划线连接: solution_titlesolution_detail

应该使用哪一类写法呢?选择的时候是出于个人习于旧贯照旧有别的思考?

看了下豆瓣,美团,Taobao的源码,都以行使 solution_title 的写法。

 问题

  CSS 类或 ID 命名时单词间连接平时常有这两种写法:

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

  应该选择哪个种类写法呢?选拔的时候是由于个人习贯依然有别的酌量?

  看了下豆瓣,美团,Taobao的源码,都是接纳 solution_title 的写法。

自家的回答

首先定特性,这是个纯粹的“代码风格”难点。

怎样是“代码风格”难题?有生机勃勃部分特色:

  • 技艺标准不会硬性规定。即使正式一时大概会提供指引性的提出,恐怕不时会有行业大腕出来鼓吹最好实行。
  • 性子化十二分掌握。也正是萝卜不包心白菜各有所爱、公说公有理公说公有理,永无定论。

扯完之后说一下笔者本身的习于旧贯:

 作者的答应

  首先定本性,那是个纯粹的“代码风格”难题。

  什么是“代码风格”难点?有部分天性:

  • 本事专门的学业不会硬性规定。尽管职业一时大概会提供引导性的建议,恐怕有的时候会有行业大腕出来鼓吹最棒实施。

  • 天性化十二分显眼。也正是萝卜青菜各有所好、公说公有理公说公有理,永无定论。

  扯完事后说一下自个儿本身的习惯:

从前用下划线

主要缘由是在编辑器中双击能够选中;其它自个儿以为下划线赏心悦目(纯个人早出晚归)。除此以外可能还应该有少数“小白式严慎”(幸免与 CSS 属性名/值弄混、防止与减号弄混),大概作者的启蒙读本正是选用下划线的。

  早前用下划线

  首要缘由是在编辑器中双击可以选中;其余自身认为下划线美观(纯个人三绝韦编)。除此以外恐怕还应该有少数“小白式稳重”(幸免与 CSS 属性名/值弄混、防止与减号弄混),可能自身的启蒙读本便是运用下划线的。

明日入眼使用连字符

新兴日益接手或参预了部分人家的品类,接触过各类代码风格。在鬼子的有的品类中接触到大气的接纳连字符的命名,看多了感到也轻巧看。在编辑器中也足以经过“双击并拖动”来选中,所以就稳步过渡到了连字符。

  今后入眼利用连字符

  后来日渐接手或插足了蓬蓬勃勃部分别人的品种,接触过各类代码风格。在老外的部分类别中接触到大方的使用连字符的命名,看多了认为也易于看。在编辑器中也得以透过“双击并拖动”来选中,所以就渐渐过渡到了连字符。

在奇特地方用驼峰式

驼峰式写法输入不便于、引进了大小写的复杂度、可读性无优势,因而超少在经常支出中央银行使。而正因为那样,我近年来主要在大器晚成都部队分框架级的类名中选择,以便于经常花销的命名习贯区分开,防止无意识中污染框架级样式的恐怕。

  在极其场馆用驼峰式

  驼峰式写法输入不低价、引进了尺寸写的复杂度、可读性无优势,由此超少在平时花费中选取。而正因为如此,笔者日前主要在部分框架级的类名中央银行使,以便于日常支出的命名习贯区分开,制止无意识中污染框架级样式的恐怕。

至于标准

有网上老铁提到:

HTML 和 CSS 语法中,无论是属性名和值,用到连年符的地点都是 - 没有 _。Follow 标准有益无毒。

这种说法作者并不赞成。因为“follow 标准”一说并未有基于,而且逻辑不清。

大家超级轻便理清意气风发件事——给成分的 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 (_); …

约等于说,用下划线来连接多少个单词作者为 class 或 id 的值,是合法的。

(贺师俊先生提示道:CSS 1 和 2 的正统在这里一点上有错误,未有把下划线加进去;直到 CSS 2.1中,这些主题材料才被更正。)

  关于专门的工作

  有网上亲密的朋友关系:

HTML 和 CSS 语法中,不论是属性名和值,用到一连符之处都以 - 没有 _。Follow 标准有益无毒。

  这种说法作者并不相同情。因为“follow 规范”一说并未有依靠,何况逻辑不清。

  大家非常轻便理清生机勃勃件事——给成分的 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 (_); ...

  约等于说,用下划线来再三再四五个单词作者为 class 或 id 的值,是官方的。

  (贺师俊先生提示道:CSS 1 和 2 的专门的学问在这里或多或少上有错误,未有把下划线加进去;直到 CSS 2.1中,这么些主题素材才被修改。)

任何观点

 别的观点

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:下划线还是连接符

关键词: