省略CSS块的最后一个分号

问题描述 投票：52回答：9

关于这个的几个问题：

  • 这是好习惯吗？
  • 它会大规模地产生更好的加载时间吗？
  • 它会导致浏览器“破解”吗？
  • 对于Javascript（/ jQuery）中的最后一个函数是否也是如此？

我的意思是这样的东西：

#myElement {
  position: absolute;
  top: 0;
  left: 0
}
jquery css syntax
9个回答
76
投票

这是好习惯吗？

手动排除分号是不好的做法。这纯粹是因为在添加更多样式时很容易忽略，特别是如果你在团队中工作：

想象一下，你开始：

.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 Compressor，例如YUI Compressor来自动删除结束的冒号。

它会导致浏览器“破解”吗？

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

声明为空或由属性名称组成，后跟冒号（:)，后跟属性值。

更重要的是：

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

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

对于Javascript中的最后一个函数是否也是如此？

JavaScript是一个完全不同规格的完全不同的野兽。这个特殊的问题已经得到了深入的回答many times before on Stack Overflow。

9
投票
  • 不，省略分号会在您的应用程序中引入大量风险，如果您为元素添加更多样式，将很容易忽略添加它。此时，您依赖于您的手动流程和对细节的关注，以确保您没有意外地错位您的非分号行。更糟糕的是，每次准备好进行制作时，你都必须亲自检查你的css文件，以确保你没有搞砸每个元素中的任何最终样式行。
  • 可能，因为文件会更小，但差异应该可以忽略不计。如果你担心加载时间，那么在将文件放到服务器上之前Gzipping文件将很好地为你服务。
  • 大多数浏览器足够聪明，可以知道你的意思，但是你仍然不必担心因为不注意最后一种风格而搞砸你的CSS文件。
4
投票
  • 这是好习惯吗？

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

  • 它会大规模地产生更好的加载时间吗？

无法想象它会在加载时间上产生很大的差异。

  • 它会导致浏览器“破解”吗？

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

  • 对于Javascript（/ jQuery）中的最后一个函数是否也是如此？

是的，不要将它留在JavaScript解释器中添加分号。

1
投票

它会稍微改善加载时间。有足够大的CSS文件，它甚至可以引人注目（好吧，整体缩小可以;我怀疑只删除最后的分号就足够了）。

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

1
投票

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

Semicolon in CSS

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

1
投票

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

如果您正在寻找最佳实践，那么Google css风格指南中的CSS formatting rules是一个非常好的起点 - 不要盲目地应用他们的建议，而是要看看他们背后的推理。

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

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

Javascript是一个不同的故事 - 简短的答案总是使用分号，从不依赖于隐式插入，但我从未见过比Google in yet another styleguide of theirs规定的更好更彻底的答案：

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

// 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()是NaN并且THINGS_TO_EAT被赋予die()的结果。

为什么？

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

这确实让人感到惊讶，所以请确保你的作业以分号结尾。

0
投票

这是好习惯吗？

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

它会大规模地产生更好的加载时间吗？

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

它会导致浏览器“破解”吗？

没有

对于Javascript（/ jQuery）中的最后一个函数是否也是如此？

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

0
投票

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

0
投票

对于CSS，我在IE9，FF，GC，Safari和Opera上尝试了这一点，并没有什么区别。

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.