内联CSS格式最佳实践 - 两个问题

Question

问题＃1 - 在HTML元素中指定内联样式时，是否需要包含尾部分号？例如......

<div style="padding:10px;">content</div>

问题＃2 - 在指定内联样式时，是否应在冒号分隔属性名称与属性值之后插入空格？

<div style="padding: 10px;">content</div>

VS

<div style="padding:10px;">content</div>

Answer 1

回答＃1：否。

半冒号只需要 声明。

  

声明块（也称为a   {} -block在下面的文本中）开始   用左大括号（{）并结束   与右大括号匹配   （}）。在两者之间必须有一个清单   零或更多分号分隔   （;）声明。

来源：http://www.w3.org/TR/css3-syntax/#rule-sets

  

style属性的值必须   匹配a的内容的语法   CSS声明块（不包括   划定大括号）

来源：http://www.w3.org/TR/css-style-attr/#syntax

由于您只有一个声明，因此无需分隔，因此不需要分号。

但是，CSS语法允许空声明，这意味着您可以根据需要添加前导和尾随分号。例如，这是有效的CSS：

.foo { ;;;display:none;;;color:black;;; }

并且相当于：

.foo { display:none;color:black }

---

回答＃2：否。

  

声明为空或   由一个属性组成，后跟一个   冒号（:)，后跟一个值。周围   其中每一个都可能有空白。

来源：http://www.w3.org/TR/css3-syntax/#declarations

您可以添加空格以提高可读性，但它们没有相关性。

Answer 2

问题1 ：是（如果您指定了多个内联样式。即使最后一个不需要它，最好在每个之后附加;）

Quote：

  

CSS的常规规则适用于内部   style属性。每个CSS   声明必须用a分隔   分号“;”和冒号出现   CSS属性和它之间的关系   值。

问题2 ：不，但您可以添加它以便于阅读。例如，Eclipse格式自动添加此空间。

Answer 3

Q1：不，但我总是包含一个尾随的分号。几年前，分号可能是某些浏览器错误渲染（或缺少）的原因。我想现在不是问题。

Q2：不，两种方式都是一样的。您选择在冒号后面加一个空格应该基于个人对易读性的偏好。

Answer 4

问题1：第一个问题不需要写入，但如果存在多个定义，则需要使用分号。

问题2：除非您要分隔特定属性中的值，否则不需要空格，例如：box-shadow:0 0 5px 0 #000;

您可能想要添加它们的一个原因，至少在CSS文件上下文中，如果您需要通过后处理器（如Sass）运行CSS，则不会使用分号在行的末尾将导致编译器失败。

总之，然后：对于内联样式，上面的答案适用，但对于文件系统上单独文件中的CSS，我总是会添加额外的分号和空格以使其更容易阅读。当您准备好生产时，您始终可以通过压缩器运行CSS。