【澳门葡京】下划线依旧连接符，WEB前端代码规范

admin

CSS 类名的单词连字符：下划线如故一而再符？

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

正文小编： 伯乐在线 –
CSS魔法
。未经作者许可，禁止转发！
迎接插手伯乐在线 专栏撰稿人。

正文的某个情节整理本人对此题材的解答： 命名 CSS 的类或 ID
时单词间怎么着连接？ –
腾讯网

　本文的一些故事情节整理本人对此难题的解答： 命名 CSS 的类或 ID
时单词间怎样连接？ –
新浪

澳门葡京，　本文的一部分故事情节整理本身对此难题的解答： 取名 CSS 的类或 ID
时单词间怎么着连接？ –
微博

1、 付出环境

问题

CSS 类或 ID
命名时单词间连接平时有那二种写法：

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

应该使用哪个种类写法呢？采取的时候是出于个人习惯还是有其他考虑？

看了下豆瓣，美团，天猫商城的源码，都以利用
solution_title 的写法。

　问题

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

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

　　应该使用哪个种类写法呢？采取的时候是出于个人习惯依旧有其余考虑？

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

　问题

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

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

　　应该使用哪个种类写法呢？选拔的时候是出于个人习惯依然有其余考虑？

　　看了下豆瓣，美团，天猫的源码，都以拔取 solution_title 的写法。

编辑器：sublime text3

本人的回答

首先定天性，那是个纯粹的“代码风格”难点。

什么是“代码风格”难点？有局地特征：

  • 技巧标准不会硬性规定。就算专业有时大概会提供指引性的提议，可能偶尔会有行业大牛出来鼓吹最佳实践。
  • 性情化拾壹分显然。约等于萝卜青菜各有所爱、公说公有理婆说婆有理，永无定论。

扯完之后说一下作者自个儿的习惯：

　作者的答疑

　　首先定脾气，那是个纯粹的“代码风格”难题。

　　什么是“代码风格”难点？有一些特点：

  • 技术专业不会硬性规定。纵然标准有时只怕会提供指引性的指出，可能偶尔会有行业大牛出来鼓吹最佳实践。

  • 本性化十一分显明。也等于萝卜青菜各有所爱、公说公有理婆说婆有理，永无定论。

　　扯完事后说一下小编要好的习惯：

　小编的回应

　　首先定个性，那是个纯粹的“代码风格”难点。

　　什么是“代码风格”问题？有一对特点：

  • 技术专业不会硬性规定。纵然正规有时或者会提供指引性的提出，大概偶尔会有行业大牛出来鼓吹最佳实践。

  • 天性化11分明显。也等于萝卜青菜各有所爱、公说公有理婆说婆有理，永无定论。

　　扯完事后说一下本人要好的习惯：

【澳门葡京】下划线依旧连接符，WEB前端代码规范。语言：vue

先前用下划线

第叁缘由是在编辑器中双击可以选中；其余自身认为下划线赏心悦目（纯个人喜爱）。除此以外只怕还有有些“小白式谨慎”（防止与
CSS 属性名/值弄混、幸免与减号弄混），恐怕自个儿的启蒙读本就是应用下划线的。

　　以前用下划线

　　紧要原因是在编辑器中双击可以选中；其它本人觉得下划线雅观（纯个人喜欢）。除此以外大概还有一些“小白式谨慎”（避免与
CSS 属性名/值弄混、防止与减号弄混），只怕本人的启蒙读本就是行使下划线的。

　　此前用下划线

　　首要缘由是在编辑器中双击可以选中；此外自身认为下划线赏心悦目（纯个人欣赏）。除此以外大概还有有个别“小白式谨慎”（防止与
CSS 属性名/值弄混、幸免与减号弄混），或然自身的启蒙读本就是应用下划线的。

2、 代码格式化：

现行重中之重选取连字符

后来逐步接手或参加了一部分外人的门类，接触过各个代码风格。在鬼子的片段项目中接触到大气的运用连字符的命名，看多了感到也一面如旧看。在编辑器中也得以因此“双击并拖动”来选中，所以就渐渐过渡到了连字符。

　　以后最主要接纳连字符

　　后来渐渐接手或参预了部分别人的花色，接触过种种代码风格。在鬼子的有个别系列中接触到大气的应用连字符的命名，看多了感到也一见依然看。在编辑器中也得以因此“双击并拖动”来选中，所以就逐步过渡到了连字符。

　　以后重视采取连字符

　　后来日益接手或参与了有的旁人的连串，接触过各类代码风格。在鬼子的一部分项目中接触到大气的运用连字符的命名，看多了感到也一面依旧看。在编辑器中也得以由此“双击并拖动”来选中，所以就逐渐过渡到了连字符。

借助sublime编辑器，安装HTML-CSS-JS Prettify插件：

在非正规场馆用驼峰式

驼峰式写法输入不便于、引入了大小写的复杂度、可读性无优势，因而很少在普通费用中利用。而正因为这么，作者当下首要在有些框架级的类名中运用，以便于一般支付的命名习惯区分开，幸免无意识中污染框架级样式的只怕性。

　　在优良场面用驼峰式

　　驼峰式写法输入不便宜、引入了大大小小写的复杂度、可读性无优势，因此很少在普通花费中采纳。而正因为这么，作者日前主要在有的框架级的类名中使用，以便于普通支出的命名习惯区分开，幸免无意识中污染框架级样式的大概。

　　在拾分规场面用驼峰式

　　驼峰式写法输入不便民、引入了尺寸写的复杂度、可读性无优势，由此很少在一般开支中运用。而正因为如此，小编当下首要在局地框架级的类名中行使，以便于常见开支的命名习惯区分开，防止无意识中污染框架级样式的或者。

a)在Sublime Text 3中，按下Ctrl+Shift+P调出命令面板;

关于专业

有网友提到：

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
中，那些题材才被核查。）

　　关于专业

　　有网友关系：

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
中，这些难题才被改正。）

b)输入install 调出 Install Package 选项并回车;

其余观点

　其它观点

　其余观点

c)输入pretty，并在列表中精选HTML-CSS-JS Prettify后回车即可安装。

有关可读性

贺师俊先生（@hax）提议了七个便于被忽视但实际上很重大的成分：

- 比 _ 有一点好的地点是， _ 有时候会难以辨明，就就好像空格一样。而
class 里面有没有空格是挺主要的。比较之下二种用法：

XHTML

; html-script: false ]<div class=”a_very_very_very_long
long_class short_class”> <div class=”a-very-very-very-long
long-class short-class”> <div class=”aVeryVeryVeryLong longClass
shortClass”>

1
2
3
; html-script: false ]<div class="a_very_very_very_long long_class short_class">
<div class="a-very-very-very-long long-class short-class">
<div class="aVeryVeryVeryLong longClass shortClass">

至于编辑器

重重同班关系了不一样的单词连接格局对采用操作的震慑，比如双击可以一直当选取
_ 连接的三个单词，但用 - 连接的五个单词则不或者全体当选，选区会在 -
处终止，即只好选中多个单词。

　　关于可读性

　　贺师俊先生（@hax）提议了二个简单被忽视但骨子里很重点的要素：

– 比 _ 有一点好的地点是 _ 有时候会难以识别，就像是空格一样。而
class 里面有没有空格是挺紧要的。相比之下三种用法：

  • <div class=”a_very_very_very_long long_class
    short_class”>
  • <div class=”a-very-very-very-long long-class short-class”>
  • <div class=”aVeryVeryVeryLong longClass shortClass”>

　　关于可读性

　　贺师俊先生（@hax）提议了三个便于被忽略但实际很要紧的成分：

– 比 _ 有一点好的地点是 _ 有时候会难以鉴别，就恍如空格一样。而
class 里面有没有空格是挺首要的。比较之下二种用法：

  • <div class=”a_very_very_very_long long_class
    short_class”>
  • <div class=”a-very-very-very-long long-class short-class”>
  • <div class=”aVeryVeryVeryLong longClass shortClass”>

d)查看本地安装的NodeJS配置环境路径（在dos命令下，输入where node并回车）。

Sublime Text

对此，一丝同学（@yisibl）在
微博 做了周边：

CSS 命名用连字符 -
无法双击选中的难题平昔是1个伪命题，那是编辑器的题材，因为这一个而采取下划线
_ 实在有点牵强。在 Sublime Text 2 的大局配置文件
Preferences.sublime-settings 中找到 word_separators 字段，删掉其中的
- 即可双击选中延续串的三个单词。

澳门葡京 1

　　关于编辑器

　　很多同室关系了不一致的单词连接格局对采取操作的熏陶，比如双击可以一直当采取
_ 连接的七个单词，但用 – 连接的多个单词则无从全部当选，选区会在 –
处终止，即只好选中一个单词。

　　关于编辑器

　　很多同室关系了分裂的单词连接格局对拔取操作的影响，比如双击可以一向当选择
_ 连接的多少个单词，但用 – 连接的五个单词则无从全部当选，选区会在 –
处终止，即只可以选中三个单词。

澳门葡京 2

Vim

也有壹位
潘魏增同学
提供了 Vim 的安插格局：

只要利用 vim，可以设置 set
iskeyword+=-，那样就足以匹配选中以 – 连接的要紧词，search 和 mark
的时候会相比便利。

（抱歉，那里只是纯转载，权且不可以验证。）

　　Sublime Text

　　对此，一丝同学（@yisibl）在 微博 做了科普：

CSS 命名用连字符 –
无法双击选中的难点直接是二个伪命题，那是编辑器的题材，因为这么些而拔取下划线
_ 实在稍微牵强。在 Sublime Text 2 的大局配置文件
Preferences.sublime-settings 中找到 word_separators 字段，删掉其中的

  • 即可双击选中一而再串的三个单词。

澳门葡京 3

　　Sublime Text

　　对此，一丝同学（@yisibl）在 微博 做了宽广：

CSS 命名用连字符 –
不只怕双击选中的难点一向是五个伪命题，那是编辑器的题材，因为这些而拔取下划线
_ 实在多少牵强。在 Sublime Text 2 的全局配置文件
Preferences.sublime-settings 中找到 word_separators 字段，删掉其中的

  • 即可双击选中连续串的七个单词。

澳门葡京 4

e) 菜单 -> Preferences -> Packpage Settings -> HTML/CSS/JS
Prettify – Set `node` Path，设置一下nodejs路径：

UltraEdit

自小编在 Windows 下一般用 UltraEdit 干活，它有一种操作叫作
Ctrl + 双击。而且大家得以设置此操作的分界符，很灵巧。

澳门葡京 5

　　Vim

　　也有壹位 潘魏增同学 提供了
Vim 的布置格局：

只要采用 vim，能够安装 set iskeyword+=-，那样就可以匹配选中以 –
连接的要紧词，search 和 mark 的时候会相比较方便。

　　（抱歉，那里只是纯转载，临时不或者求证。）

　　Vim

　　也有壹人 潘魏增同学 提供了
Vim 的配备情势：

一旦应用 vim，可以安装 set iskeyword+=-，那样就可以匹配选中以 –
连接的重中之重词，search 和 mark 的时候会相比较便利。

　　（抱歉，那里只是纯转载，一时不或者证实。）

澳门葡京 6

鼠标选取

若是您的编辑器不支持上述配置或操作，要想五回性选中以 -
连接的多少个单词，其实也是有化解方案的：
双击的终极一击先不要松手，再左右拖动就足以以单词为单位扩展选区。（那种拔取格局大约适用于具有编辑器，而且
Windows 和 Mac 通吃。）

实质上自身并不提议像前边三种艺术那样在编辑器中收回 -
的交界符身份，而是提出采取那种“双击 +
拖动”的方法来摘取随机数量的单词。因为，有些时候你只想选中
one-two-three 中的 one-two 或 two-three
或单个单词，那么那种措施肯定更随意更精确——想选少选少，想选多选多。

　　UltraEdit

　　小编在 Windows 下一般用 UltraEdit 干活，它有一种操作叫作 Ctrl +
双击。而且大家得以设置此操作的分界符，很灵活。

澳门葡京 7

　　UltraEdit

　　作者在 Windows 下一般用 UltraEdit 干活，它有一种操作叫作 Ctrl +
双击。而且咱们可以安装此操作的分界符，很灵敏。

澳门葡京 8

默认对vue不支持,在"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg", "vue"]加上vue就好了

— Bonus Track —

假若您在行使 WebStorm（或它的小兄弟
IDE），就毫无用鼠标点来点去了，不优雅。

您可以把光标移到有些单词上，用 Ctrl + W（在 Mac 下是
Cmd + W）神速键就可以选中当前单词；更神奇的是，这么些便捷可以绵绵不绝使用，可以不断把选区增加到更大的语法单元：单词->一串单词->整个字符串（或言辞）->对象（或函数功能域）->
…… ->整个文件。

（唯一不便的是，这些神速键在任何程序中是关门当前窗口的操作，简单混淆视听，提出在
IDE 中给那几个操作分配其他的飞快键。）

1 赞 收藏 3
评论

　　鼠标选用

　　要是你的编辑器不协理上述配置或操作，要想一遍性选中以 –
连接的三个单词，其实也是有解决方案的： 双击的尾声一击先不要放手，再左右拖动就可以以单词为单位伸张选区。（那种选拔方式大概适用于拥有编辑器，而且
Windows 和 Mac 通吃。）

　　实际上小编并不提出像前面两种艺术那样在编辑器中撤销 –
的交界符身份，而是提议接纳那种“双击 +
拖动”的法门来挑选随机数量的单词。因为，某个时候你只想选中 one-two-three
中的 one-two 或 two-three
或单个单词，那么那种办法显明更轻易更规范——想选少选少，想选多选多。

　　鼠标接纳

　　若是您的编辑器不帮衬上述配置或操作，要想三回性选中以 –
连接的多个单词，其实也是有解决方案的： 双击的终极一击先不要松手，再左右拖动就足以以单词为单位伸张选区。（那种接纳方式大约适用于具有编辑器，而且
Windows 和 Mac 通吃。）

　　实际上本身并不指出像后边三种办法那样在编辑器中收回 –
的分界符身份，而是提议采纳那种“双击 +
拖动”的格局来摘取随机数量的单词。因为，有个别时候你只想选中 one-two-three
中的 one-two 或 two-three
或单个单词，那么那种艺术显然更自由更标准——想选少选少，想选多选多。

澳门葡京 9

至于小编：CSS魔法

澳门葡京 10

百姓网前端工程师，移动 Web UI 框架
CMUI 小编，自称 “披着前端工程师外衣的设计师”。
个人主页 ·
小编的稿子 ·
12 ·
    

澳门葡京 11

　　— Bonus Track —

　　假若你在利用 WebStorm（或它的弟兄
IDE），就毫无用鼠标点来点去了，不美观。

　　你可以把光标移到有个别单词上，用 Ctrl + W（在 Mac 下是 Cmd +
W）快速键就能够选中当前单词；更神奇的是，那一个便捷可以接连使用，可以不断把选区伸张到更大的语法单元：单词
→ 一串单词 → 整个字符串（或言辞） → 对象（或函数效率域） → …… →
整个文件。

　　（唯一不便的是，这一个飞速键在其余程序中是关闭当前窗口的操作，容易模糊，提议在
IDE 中给那一个操作分配其它的连忙键。）

 

　　— Bonus Track —

　　即使您在采纳 WebStorm（或它的弟兄
IDE），就毫无用鼠标点来点去了，不佳看。

　　你可以把光标移到有个别单词上，用 Ctrl + W（在 Mac 下是 Cmd +
W）快速键就足以选中当前单词；更神奇的是，这几个高速可以连接使用，可以不停把选区增添到更大的语法单元：单词
→ 一串单词 → 整个字符串（或讲话） → 对象（或函数作用域） → …… →
整个文件。

　　（唯一不便的是，那么些连忙键在任何程序中是关闭当前窗口的操作，简单混淆视听，指出在
IDE 中给那一个操作分配其它的迅速键。）

 

f）菜单-> Preferences -> Packpage Settings -> HTML/CSS/JS
Prettify – Plugin Options -Default，最后"use_editor_indentation": true

澳门葡京 12

g)设置sublime tab size = 4，sublime窗口右下角space/tab size点击，接纳tab
width=4:

澳门葡京 13

h)安装达成，按飞速键Ctrl + Shift + H即可。

3、 取名规范：

取名需遵守以下规则：

有含义的: 然而分具体，也不过分肤浅

简短: 2到3个单词

具备可读性: 以便于交换互换

a) 小驼峰命名：页面名、页面内变量名、方法名

澳门葡京 14

澳门葡京 15

b) 大驼峰命名：组件文件名、组件名

澳门葡京 16

c) 中写道命名：html模板(css)中的class类名

d) 下划线命名：局地变量

e) 全大写命名：vuex相关事件

4、 vue组件结构化：

听从一定的布局社团，使得组件便于驾驭。

<template>

 <div>

 <!-- ... -->

 </div>

</template>

<script type="text/javascript">

 export default {

 // 不要忘记了 name 属性，name名与vue文件名保持一致

 name: '',

 // 变量

 data() {},

 // 计算属性

 computed: {},

 // 组件属性、变量

 props: {

 bar: {}, // 按字母顺序

 foo: {},

 fooBar: {},

 },

 // 使用其它组件

 components: {},

 // 生命周期（钩子）函数

created() {},

 mounted() {},

 // 方法

 methods: {},

 // 监听函数

 watch: {},

 };

</script>

<style lang=”scss” scoped>

</style>

5、 scss编写：

应用scss编写样式，

a) <style>标签一点要抬高scoped属性

b) 使用{}成效域，防止不一致文件之间的体制争持

澳门葡京 17

相关文章

发表评论

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

*
*
Website