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

时间:2011-04-20 15:04:08

标签: css

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

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

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

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

VS

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

4 个答案:

答案 0 :(得分:38)

回答#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

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

答案 1 :(得分:1)

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

Quote

  

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

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

答案 2 :(得分:1)

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

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

答案 3 :(得分:0)

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

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

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

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