WEB前端代码标准,下划线依然连接符
分类:前端技术

CSS 类名的单词连字符:下划线依然三翻五次符?

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

正文小编: 伯乐在线 - CSS魔法 。未经小编许可,幸免转发!
款待加入伯乐在线 专栏撰稿者。

正文的一些内容收拾自身对此主题材料的解答: 取名 CSS 的类或 ID 时单词间如何连接? – 博客园

 本文的大器晚成对剧情整理自身对此难题的解答: 命名 CSS 的类或 ID 时单词间怎么样连接? - 新浪

1、 支出条件

问题

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

  • 驼峰式: solutionTitlesolutionDetail
  • WEB前端代码标准,下划线依然连接符。用横杠(连接符)连接: solution-titlesolution-detail
  • 下划线连接: solution_titlesolution_detail

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

看了下豆瓣,美团,天猫的源码,都是运用 solution_title 的写法。

 问题

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

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

  应该使用哪个种类写法呢?采用的时候是出于个人习于旧贯还是有别的思虑?

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

编辑器:sublime text3

本身的应对

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

怎么是“代码风格”难点?有豆蔻梢头部分天性:

  • 本事专门的工作不会硬性规定。就算标准一时或者会提供指引性的提议,只怕不经常会有行业余大学牌出来鼓吹最好实行。
  • 性子化十分料定。也正是萝卜不结球大白菜各有所好、公说公有理公说公有理,永无定论。

扯完之后说一下自家要好的习于旧贯:

 作者的答疑

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

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

  • 本事标准不会硬性规定。就算正式一时恐怕会提供引导性的建议,也许临时会有行当大咖出来鼓吹最棒推行。

  • 特性化十三分斐然。也正是萝卜不结球大白菜各有所好、公说公有理婆说婆有理,永无定论。

  扯完事后说一下小编本人的习惯:

语言:vue

先前用下划线

首要缘由是在编辑器中双击能够选中;此外自身以为下划线美观(纯个人开卷有益)。除此以外大概还会有少数“小白式严谨”(幸免与 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.第11中学,这些主题素材才被纠正。)

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">

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

e) 菜单 -> Preferences -> Packpage Settings -> HTML/CSS/JS Prettify - Set `node` Path,设置一下nodejs路线:

UltraEdit

自家在 Windows 下平常用 UltraEdit 干活,它有风姿罗曼蒂克种操作叫作 Ctrl 双击。并且大家得以设置此操作的分界符,很灵活。

图片 4

  Vim

  也会有一个人 潘魏增同学 提供了 Vim 的布置方式:

假诺利用 vim,能够设置 set iskeyword =-,这样就可以匹配选中以 - 连接的重要词,search 和 mark 的时候会相比较方便。

  (抱歉,这里只是纯转发,暂且不大概印证。)

图片 5

鼠标接受

生机勃勃旦您的编辑器不帮忙上述配置或操作,要想三遍性选中以 - 连接的多少个单词,其实也可能有施工方案的: 双击的末梢一击先不要松手,再左右拖动即能够单词为单位扩大选区。(这种接纳方式大概适用于具有编辑器,何况Windows 和 Mac 通吃。)

实在本人并不提议像前边二种形式那样在编辑器中收回 - 的分界符身份,而是提议接受这种“双击 拖动”的措施来筛选随机数量的单词。因为,有些时候你只想选中 one-two-three 中的 one-twotwo-three 或单个单词,那么这种艺术明确更自由更可相信——想选少选少,想选多选多。

  UltraEdit

  小编在 Windows 下平时用 UltraEdit 干活,它有生龙活虎种操作叫作 Ctrl 双击。何况大家得以设置此操作的分界符,很灵巧。

图片 6

默认对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 或单个单词,那么这种措施明显更自由更可相信——想选少选少,想选多选多。

图片 7

有关笔者:CSS魔法

图片 8

百姓网前端程序员,移动 Web UI 框架 CMUI 小编,自称 “披着前端工程师外衣的设计员”。 个人主页 · 作者的篇章 · 12 ·     

图片 9

  --- 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

图片 10

g)设置sublime tab size = 4,sublime窗口右下角space/tab size点击,采取tab width=4:

图片 11

h)安装到位,按火速键Ctrl Shift H即可。

3、 取名标准:

取名需遵从以下条件:

有意义的: 可是分具体,也然而分肤浅

简短: 2到3个单词

有着可读性: 以便于沟通沟通

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

图片 12

图片 13

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

图片 14

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) 使用{}功用域,幸免分化文件之间的体裁冲突

图片 15

本文由pc28.am发布于前端技术,转载请注明出处:WEB前端代码标准,下划线依然连接符

上一篇:很酷的HTML5电子书翻页动画特效,jQuery实现的立体 下一篇:没有了
猜你喜欢
热门排行
精彩图文