60

关于这个的几个问题：

  • 这是好习惯吗？
  • 它会在大规模上带来更好的加载时间吗？
  • 它会导致浏览器“崩溃”吗？
  • JavaScript (/jQuery) 中的最后一个函数也一样吗？

我的意思是这样的东西：

#myElement {
  position: absolute;
  top: 0;
  left: 0
}
4

9 回答 9

91

这是好习惯吗？

手动排除分号不是一个好习惯。这纯粹是因为添加更多样式时很容易被忽略，特别是如果您在团队中工作：

想象一下，您从以下开始：

.foo {
    background-color: #F00;
    color: #000             <-- missing semi-colon
}

然后有人添加了一些样式：

.foo {
    background-color: #F00;
    color: #000             <-- missing semi-colon
    width: 30px;
    z-index: 100;
}

突然间，其他开发人员正在浪费时间弄清楚为什么他们的width声明不起作用（或者更糟糕的是，没有注意到它不起作用）。把分号留在里面更安全。

它会在大规模上带来更好的加载时间吗？

最肯定的是，对于每个块，您会节省几个字节。这些加起来，尤其是对于大型样式表。与其自己担心这些性能提升，不如使用 CSS 压缩器，例如YUI 压缩器来自动为您删除结尾的分号。

它会导致浏览器“崩溃”吗？

不，它是安全的，因为浏览器正确地实现了规范的这一部分。CSS2 规范因此定义了一个声明：

声明要么为空，要么由属性名称、后跟冒号 (:) 和属性值组成。

更重要的是：

...同一选择器的多个声明可以组织成分号 (;) 分隔的组。

这意味着;用于分隔多个声明，但不需要终止它们。

JavaScript 中的最后一个函数也一样吗？

JavaScript 是一个完全不同的野兽，具有完全不同的规范。这个特殊问题之前在 Stack Overflow 上已经多次深入回答过。

于 2012-08-13T18:06:43.580 回答
12

  • 不，省略分号会在您的应用程序中引入大量风险，如果您向元素添加更多样式，很容易忽略将其添加回来。在这一点上，您依靠您的手动流程和对细节的关注来确保您不会意外地放错您的非分号行。更糟糕的是，每次您准备好投入生产时，您都必须亲自检查您的 css 文件，以确保您没有搞砸每个元素中的任何最终样式行。

  • 可能，因为文件会更小，但差异应该可以忽略不计。如果您担心加载时间，在将文件放在服务器上之前对其进行Gzip 压缩会很好地为您服务。

  • 大多数浏览器都足够聪明，可以理解您的意思，但是您仍然需要担心由于不注意最后一种样式而搞砸了 CSS 文件。

于 2012-08-13T17:56:17.140 回答
4
  • 这是好习惯吗？

在我看来，没有。如果在最后一条规则下方添加一条规则，很容易忘记添加分号。

  • 它会在大规模上带来更好的加载时间吗？

无法想象它会对加载时间产生很大影响。

  • 它会导致浏览器“崩溃”吗？

不，分号仅用于分隔 CSS 块中的规则。分号是分隔符，而不是终止符。

  • Javascript (/jQuery) 中的最后一个函数是否也是如此？

是的，不要让 JavaScript 解释器添加分号。

于 2012-08-13T17:56:56.767 回答
1

它将稍微改善加载时间。使用足够大的 CSS 文件，它甚至可以很明显（嗯，总体上可以缩小；我怀疑仅删除最后的分号就足够了）。

但是，如果您非常关心加载时间，则应该使用程序来缩小 CSS，而不是手动尝试这样做。缩小的 CSS（几乎）无法阅读。可以这么说，在“源代码”中使用它是一种不好的做法，因为它太容易忘记它。

于 2012-08-13T17:57:24.987 回答
1

这是一个重复的问题。看这里：

CSS中的分号

关于在 JavaScript 中应用分号，函数不应以分号结尾，除非它们以声明方式分配，即。var a = function() {}; 但是，如果您无意（或故意）将分号排除在外，浏览器会自动插入分号。

于 2012-08-13T17:59:36.593 回答
1

删除声明停止不会“破坏”浏览器，但仍应留给自动缩小器（特别是如果您关心加载时间 - 单独分号不会加起来太多），但出于可维护性原因应避免在源代码中。

如果您正在寻找最佳实践， Google css 样式指南中的CSS 格式化规则是一个很好的起点——不要盲目地应用他们的建议，而是看看他们背后的推理。

在每个声明后使用分号。出于一致性和可扩展性的原因，以分号结束每个声明。

/* Not recommended */
.test {
  display: block;
  height: 100px
}
/* Recommended */
.test {
  display: block;
  height: 100px;
}

Javascript 是一个不同的故事 - 简短的答案总是使用分号，从不依赖隐式插入，但我从未见过比谷歌在他们的另一个样式指南中规定的更好和更彻底的答案：

有几个地方缺少分号特别危险：

// 1.
MyClass.prototype.myMethod = function() {
  return 42;
}  // No semicolon here.

(function() {
  // Some initialization code wrapped in a function to create a scope for locals.
})();



var x = {
  'i': 1,
  'j': 2
}  // No semicolon here.

// 2.  Trying to do one thing on Internet Explorer and another on Firefox.
// I know you'd never write code like this, but throw me a bone.
[normalVersion, ffVersion][isIE]();



var THINGS_TO_EAT = [apples, oysters, sprayOnCheese]  // No semicolon here.

// 3. conditional execution a la bash
-1 == resultOfOperation() || die();

那么会发生什么？

  1. JavaScript 错误 - 首先调用返回 42 的函数，并将第二个函数作为参数，然后“调用”数字 42 导致错误。
  2. 当它试图调用x[ffVersion][isIE]().
  3. die被调用，除非resultOfOperation()isNaN并被THINGS_TO_EAT分配 的结果die()。

为什么？

JavaScript 要求语句以分号结尾，除非它认为可以安全地推断出它们的存在。在这些示例中的每一个中，都在语句中使用了函数声明或对象或数组字面量。右括号不足以表示语句的结束。如果下一个标记是中缀或括号运算符，则 Javascript 永远不会结束语句。

这确实让人们感到惊讶，因此请确保您的作业以分号结尾。

于 2012-08-14T08:54:34.350 回答
0

这是好习惯吗？

我会回避它，因为智能缩小过程会为你处理这个问题，如果你在添加新定义时忘记放置分号，它会引入错误。

它会在大规模上带来更好的加载时间吗？

是的，文件更小。但是，差异可以忽略不计，并且缩小过程会自动执行此操作。

它会导致浏览器“崩溃”吗？

不

Javascript (/jQuery) 中的最后一个函数是否也是如此？

不，在函数语句的末尾排除分号是“无效的”。

于 2012-08-13T17:56:21.027 回答
0

根据我的经验，1）这不是好的做法 2）即使在非常大的范围内，加载时间也是微不足道的。3) 不知道有任何浏览器会因此中断。4) jQuery 也是如此

于 2012-08-13T17:57:29.883 回答
0

对于 CSS，我在 IE9、FF、GC、Safari 和 Opera 上尝试过，但并没有什么不同。

至于 Javascript，我在 FF 和 GC 上遇到错误，所以我想说不要在脚本上这样做。至于加载时间，差异不会以任何方式明显。

于 2012-08-13T17:57:44.690 回答