jQuery 省略 CSS 块的最后一个分号

Leaving out the last semicolon of a CSS block

提问by Bram Vanroy

A couple of questions concerning this:

关于这个的几个问题：

• Is it good practice?
• Will it, on a large scale, result in better load times?
• Can it result in browsers 'breaking'?
• Is the same true for the last function in JavaScript (/jQuery)?

• 这是好的做法吗？
• 在大规模上，它会导致更好的加载时间吗？
• 它会导致浏览器“崩溃”吗？
• JavaScript (/jQuery) 中的最后一个函数是否也是如此？

What I mean is stuff like this:

我的意思是这样的东西：

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

回答by zzzzBov

Is it good practice?

这是好的做法吗？

It's not good practice to manually exclude semicolons. This is purely because it's easy to overlook when adding more styles, especially if you're working in a team:

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

Imagine you start with:

想象一下你开始：

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

And then someone adds some styles:

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

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

Suddenly the other developer is wasting time figuring out why their widthdeclaration isn't working (or worse yet, doesn't notice that it's not working). It's safer to leave the semi-colons in.

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

Will it, on a large scale, result in better load times?

在大规模上，它会导致更好的加载时间吗？

Most definitely, for every block, you'd save a couple of bytes. These add up, especially for large style sheets. Instead of worrying about these performance gains yourself, it's better to use a CSS compressor, such as the YUI Compressorto automatically remove the ending semi-colons for you.

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

Can it result in browsers 'breaking'?

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

No, it's safe, as browsers implement this part of the specification correctly. The CSS2 specificationdefines a declaration thusly:

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

A declarationis either empty or consists of a property name, followed by a colon (:), followed by a property value.

甲声明为空或者包含一个属性名称，后跟一个冒号（:)，接着一个属性值的。

More importantly:

更重要的是：

...multiple declarations for the same selector may be organized into semicolon (;) separated groups.

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

This means that ;is used to separate multiple declarations, but it is not needed to terminate them.

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

Is the same true for the last function in JavaScript?

JavaScript 中的最后一个函数也是如此吗？

JavaScript is a whole different beast with a completely different specification. This particular question has been answered in depth many times before on Stack Overflow.

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

回答by Robert Greiner

• No, leaving out that semicolon will introduce a great amount of risk in your application, it will be all too easy to overlook adding it back if you add more styles to your element. At that point, you are relying on your manual processes and attention to detail to ensure you didn't accidentially misplace on of your non-semicolon lines. Worse yet, you would have to physically check your css file every time you were ready to go to production to make sure you didn't screw up any of the final style lines in each element.

• Possibly, since the file would be smaller, but the difference should be negligible. If you are worried about load times, Gzippingyour files before placing them on the server will serve you well.

• Most browsers are smart enough to know what you mean, but you still have to worry about screwing up your CSS file by not being careful about the last style.

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

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

• 大多数浏览器都足够聪明，知道你的意思，但你仍然不得不担心因为不小心最后一个样式而搞砸了你的 CSS 文件。

回答by steveax

• Is it good practice?

• 这是好的做法吗？

In my opinion, no. If you add a rule below the last rule, it's easy to forget to add the semicolon.

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

• Will it, on a large scale, result in better load times?

• 在大规模上，它会导致更好的加载时间吗？

Can't imagine that it would make much of a difference in load time.

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

• Can it result in browsers 'breaking'?

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

No, semicolons are only required to separate rules in CSS blocks. Semicolons are delimiters, not terminators.

不，分号只需要在 CSS 块中分隔规则。分号是分隔符，而不是终止符。

• Is the same true for the last function in Javascript (/jQuery)?

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

Yes, don't leave it up the the JavaScript interpreter to add semicolons.

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

回答by KRyan

It will improve the loading time ever so slightly. With a large enough CSS file(s), it can even be noticeable (well, minification overall can be; I doubt justremoving the final semicolon will ever be enough).

它会稍微改善加载时间。有了足够大的 CSS 文件，它甚至可以很明显（好吧，整体缩小是可以的；我怀疑仅仅删除最后一个分号就足够了）。

If you care that much about the loading times, however, you should be using a program to minify your CSS, not manually attempting to do it. Minified CSS is (all but) impossible to read. It's a bad practice to use this in the "source code" so to speak, because it's all too easy to forget it.

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

回答by o.v.

Removing declaration stopswill not "break" the browsers but should still be left for automated minifiers (especially if you're concerned with loading times - semicolons alone would not add up to much) but should be avoided in the source for maintainability reasons.

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

If you are looking for best practices, CSS formatting rulesin the Google css styleguide is a very good place to start - not to blindly apply their suggestion but to see their reasoning behind it.

如果您正在寻找最佳实践，Google css styleguide 中的CSS 格式规则是一个非常好的起点 - 不要盲目地应用他们的建议，而是了解他们背后的推理。

Use a semicolon after every declaration. End every declaration with a semicolon for consistency and extensibility reasons.

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

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

Javascript is a different story though - the short answer is always use semicolons, never rely on implicit insertion, but I've never seen an answer better and more thorough than as prescribed by Google in yet another styleguide of theirs:

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

There are a couple places where missing semicolons are particularly dangerous:

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

// 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();

So what happens?

1. JavaScript error - first the function returning 42 is called with the second function as a parameter, then the number 42 is "called" resulting in an error.
2. You will most likely get a 'no such property in undefined' error at runtime as it tries to call x[ffVersion][isIE]().
3. dieis called unless resultOfOperation()is NaNand THINGS_TO_EATgets assigned the result of die().

Why?

JavaScript requires statements to end with a semicolon, except when it thinks it can safely infer their existence. In each of these examples, a function declaration or object or array literal is used inside a statement. The closing brackets are not enough to signal the end of the statement. Javascript never ends a statement if the next token is an infix or bracket operator.

This has really surprised people, so make sure your assignments end with semicolons.

那么会发生什么？

1. JavaScript 错误 - 首先使用第二个函数作为参数调用返回 42 的函数，然后“调用”数字 42 导致错误。
2. 在运行时，您很可能会在尝试调用x[ffVersion][isIE]().
3. die被称为除非resultOfOperation()是NaN和THINGS_TO_EAT被分配的结果die()。

为什么？

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

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

回答by Micah Henning

This is a duplicate question. See here:

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

Semicolon in CSS

CSS中的分号

Regarding applying a semi-colon in JavaScript, functions should not end with semicolons unless they are assigned declaratively, viz. var a = function() {};However, browsers perform automatic semi-colon insertion if you inadvertently (or purposely) leave them out.

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

回答by xandercoded

Is it good practice?

这是好的做法吗？

I'd shy away from it as a smart minification process will handle this for you and it'd introduce errors if you forgot to place the semi-colon when adding new definitions.

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

Will it, on a large scale, result in better load times?

在大规模上，它会导致更好的加载时间吗？

Yes, smaller file size. Though, the difference is negligible and minification processes will automatically do this.

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

Can it result in browsers 'breaking'?

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

No

不

Is the same true for the last function in Javascript (/jQuery)?

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

No, it'd be "invalid" to exclude semi-colons at the end of a function statement.

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

回答by Serj Sagan

Based on my experience, 1) It is not good practice 2) Even on a very large scale load times will be insignificant. 3) Not aware of any browser that would break from this. 4) Same true for jQuery

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

回答by RandomDuck.NET

For CSS, I tried this out on IE9, FF, GC, Safari, and Opera, and it didn't make a difference.

对于 CSS，我在 IE9、FF、GC、Safari 和 Opera 上进行了尝试，但没有任何区别。

As for Javascript, I got an error on FF and GC, so I would say don't do this on scripts. As for load time, the difference will not be in any way noticeable.

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