下划线依旧连接符,WEB前端代码规范

CSS 类名的单词连字符:下划线如故连续符?

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

正文小编: 伯乐在线 –
CSS魔法
。未经作者许可,禁止转发!
迎接加入伯乐在线 专栏小编。

正文的局地情节整理自己对此题材的解答: 命名 CSS 的类或 ID
时单词间怎么着连接? –
今日头条

 本文的有些情节整理自己对此题材的解答: 命名 CSS 的类或 ID
时单词间如何连接? –
微博

 本文的一些情节整理自己对此题材的解答: 命名 CSS 的类或 ID
时单词间如何连接? –
腾讯网

1、 支付环境

问题

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

  • 驼峰式:
    solutionTitlesolutionDetail
  • 用横杠(连接符)连接:
    solution-titlesolution-detail
  • 下划线连接:
    solution_titlesolution_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

  应该运用哪一种写法呢?采用的时候是出于个人习惯依旧有其他考虑?

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

编辑器:sublime text3

自我的对答

第一定个性,这是个纯粹的“代码风格”难题。

何以是“代码风格”难点?有一部分特征:

  • 技巧标准不会硬性规定。尽管正式有时可能会提供指导性的提议,或者偶尔会有行业大牛出来鼓吹最佳实践。
  • 个性化万分明白。也就是萝卜青菜各有所爱、公说公有理婆说婆有理,永无定论。

扯完事后说一下我自己的习惯:

 我的回复

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

  什么是“代码风格”难题?有局地特征:

  • 技术专业不会硬性规定。纵然专业有时可能会提供指点性的提议,或者偶尔会有行业大牛出来鼓吹最佳实践。

  • 个性化十鲜明明。也就是萝卜青菜各有所爱、公说公有理婆说婆有理,永无定论。

  扯完事后说一下我要好的习惯:

 我的答疑

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

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

  • 技能标准不会硬性规定。尽管标准有时可能会提供辅导性的提出,或者偶尔会有行业大牛出来鼓吹最佳实践。

  • 个性化格外鲜明。也就是萝卜青菜各有所爱、公说公有理婆说婆有理,永无定论。

  扯完未来说一下自己要好的习惯:

语言: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 的 下划线依旧连接符,WEB前端代码规范。标签属性值 的合法性与 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 命名用连字符 -
不可以双击选中的题材一向是一个伪命题,那是编辑器的标题,因为那些而选拔下划线
_ 实在稍微牵强。在 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-twotwo-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

网站地图xml地图