CSS 类或 ID 命名时单词间连接通常有这几种写法：

1）驼峰式： solutionTitle、solutionDetail

2）用横杠连接： solution-title、solution-detail  （CSS和ID都推荐）

3）下划线连接： solution_title、solution_detail

应该采用哪种写法呢？选择的时候是出于个人习惯还是有别的考虑？

 

首先定个性，这纯粹是“代码风格”的爱好习惯问题，不是技术问题

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

技术规范不会硬性规定，虽然规范有时可能会提供指导性的建议，或者有时会有行业大牛出来鼓吹最佳实践。

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

 

以前用下划线"_"（舍弃）

主要原因是在编辑器中双击可以选中；另外自己觉得下划线好看（纯个人喜好）。除此以外可能还有一点“小白式谨慎”（避免与 CSS 属性名/值弄混、避免与减号弄混），或者我的启蒙教材就是使用下划线的。

现在主要使用连字符"-"（推荐）

后来逐渐接手或参与了一些别人的项目，接触过各种代码风格。在老外的一些项目中接触到大量的使用连字符的命名，看多了感觉也不难看。在编辑器中也可以通过“双击并拖动”来选中，所以就逐渐过渡到了连字符。

在特殊场合用驼峰式

驼峰式写法输入不方便、引入了大小写的复杂度、可读性无优势，一连串的字母看的头疼，因此很少在日常开发中使用。而正因为如此，我目前主要在一些框架级的类名中使用，以便于日常开发的命名习惯区分开，避免无意中污染框架级样式的可能性。

 

关于标准

有网友提到：

HTML 和 CSS 语法中，无论是属性名和值，用到连接符的地方都是 - ，没有 _，Follow 标准有益无害。

我们很容易理清一件事——给元素的 class 和 id 命名，本质上是给 HTML 标签的 class 与 id 属性写入值。HTML 的 标签属性值 的合法性与 HTML 标签属性名、CSS 属性的名/值的命名习惯有关系吗？

说到“标准”，用横线（-）和下划线（_）来连接多个单词作为 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 (_); ...

提示：CSS 1 和 2 的规范在这一点上有错误，没有把下划线加进去；直到 CSS 2.1 中，这个问题才被修正。

 

其它观点

关于可读性

贺师俊老师提出了一个容易被忽略但实际上很重要的因素：

- 比 _ 有一点好的地方是 _ 有时候会很像空格，难以分辨。而 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">

关于编辑器

很多同学提到了不同的单词连接方式对选择操作的影响，比如双击可以直接选中用 _ 连接的多个单词，但用 - 连接的多个单词则无法全部选中，选区会在 - 处终止，即只能选中一个单词。

Sublime Text

对此，做了科普：

CSS 命名用连字符 - 不能双击选中的问题一直是一个伪命题，这是编辑器的问题，因为这个而选用下划线 _ 实在有些牵强。在 Sublime Text 2 的全局配置文件 Preferences.sublime-settings 中找到 word_separators 字段，删掉其中的 - 即可双击选中一连串的多个单词。

 

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 中给这个操作分配其它的快捷键。）

 

 

HTML 规范

基本原则：符合web标准（UTF-8，HTML5），语义化html（HTML5新增要求，减少div和span等无特定语义的标签使用），结构表现行为分离（HTML-CSS-JS代码分离，不同行为代码高内聚低耦合），兼容性优良（早期版本浏览器兼容，移动端，PC端设备兼容）。页面性能方面（减少请求次数，例如使用精灵图和sass语法），代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度（减小repaint和reflow）

 

HTML5 的文档声明类型 : <!DOCTYPE html>

1）DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

2）使用文档声明类型的作用是为了防止开启浏览器的怪异模式，没有DOCTYPE文档类型声明会开启浏览器的怪异模式，浏览器会按照自己的解析方式渲染页面，在不同的浏览器下面会有不同的样式。
 

脚本文件加载

js和css的位置，js放在下面，css放在上面

如果你的项目只需要兼容ie10+或者只是在移动端访问，那么可以使用HTML5的新属性async，将脚本文件放在<head>内 

1）兼容老旧浏览器(IE9-)时： 

脚本引用写在 </body> 结束标签之前，并带上 async 属性。这虽然在老旧的浏览器中不会异步加载脚本，但它只阻塞了 </body> 结束标签之前的 DOM 解析，这就大大降低了其阻塞影响。 

2）在现代浏览器中： 

脚本将在 DOM 解析器发现 </body> 尾部的 script 标签才进行加载，此时加载属于异步加载（async），不会阻塞 CSS DOM，但js其执行仍发生在 CSS DOM 之后。 

综上所述， 所有浏览器中推荐: 

<html>
  <head>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <!-- body goes here -->

    <script src="main.js" async></script>
  </body>
</html>

只兼容现代浏览器推荐： 

<html>
  <head>
    <link rel="stylesheet" href="main.css">
    <script src="main.js" async></script>
  </head>
  <body>
    <!-- body goes here -->
  </body>
</html>

 

HTML的结构、表现、行为三者分离

尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。 

在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。 

建议：

  1. 不使用超过一到两张样式表
  2. 不使用超过一到两个脚本（学会用合并脚本）
  3. 不使用行内样式（<style>.no-good {}</style>）
  4. 不在元素上使用 style 属性（<hr style="border-top: 5px solid black">）
  5. 不使用行内脚本（<script>alert('no good')</script>）
  6. 不使用表象元素（i.e. <b>, <u>, <center>, <font>, <b>）
  7. 不使用表象 class 名（i.e. red, left, center）

HTML只关注内容

  1. HTML只显示展示内容信息
  2. 不要引入一些特定的 HTML 结构来解决一些视觉设计问题
  3. 不要将img元素当做专门用来做视觉设计的元素
  4. 样式上的问题应该使用css解决

 

语义化是指根据元素其被创造出来时的初始意义来使用它，即用正确的标签干正确的事，如综合使用 nav、main、 h3、ul、li、p等，而不是只用div和span

 

alt 标签不为空

<img>标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。 

 

 

等同== 和严格等===的区别

==， 两边值的类型不同，则先进行类型转换，再比较值。

===，不做类型转换，同时比较类型和值，若类型不同则不等，若值不同也不等。

== 值等同操作符 

- 如果两个值具有相同类型，会进行===比较，返回===的比较值 
- 如果两个值的类型不同，先转换成同类型，再比较值，也有可能返回true 
- 如果一个值是null，另一个值是undefined，返回true 
- 如果一个值是string，另个是number，会把string转换成number再进行值比较 
- 如果一个值是true，会把它转成1再比较，false会转成0

js 示例： 

console.log( false == null )      // false
console.log( false == undefined ) // false
console.log( false == 0 )         // true
console.log( false == '' )        // true
console.log( false == NaN )       // false

console.log( null == undefined ) // true
console.log( null == 0 )         // false
console.log( null == '' )        // false
console.log( null == NaN )       // false

console.log( undefined == 0)   // false
console.log( undefined == '')  // false
console.log( undefined == NaN) // false

console.log( 0 == '' )  // true
console.log( 0 == NaN ) // false

说明：

false 除了和自身比较为 true 外，和 0，”” 比较也为 true
null 只和 undefined 比较时为 true， 反过来 undefined 也仅和 null 比较为 true，没有第二个
0 除了和 false 比较为 true，还有空字符串 ”” 和空数组 []
空字符串 ” 除了和 false 比较为 true，还有一个数字 0

 

=== 值和类型等同操作符 

要是两个值类型不同，肯定不等，返回false
要是两个值都是number类型，并且数值相同，返回true
要是两个值都是stirng，并且两个值的String内容相同，返回true
要是两个值都是true或者都是false，返回true
要是两个值都是指向相同的Object，Arraya或者function，返回true
要是两个值都是null或者都是undefined，返回true

js 真假判断，判定为假的变量：

false

null

undefined

0

” (空字符串)

NaN

 

不使用eval()函数

eval的字面意思来说，恶魔，使用eval()函数会带来安全隐患。 

eval()函数的作用是返回任意字符串，当作js代码来处理。

 

 

 

 

 

参考推荐：

米扑科技公司的代码命名规范

命名 CSS 的类或 id 时单词间如何连接（知乎）

前端编码规范