【问题标题】:Position of CSS properties order matter or not?CSS属性顺序的位置是否重要?
【发布时间】:2013-05-28 14:15:26
【问题描述】:

这似乎是一个简单的问题,但我想知道如何在各个选择器中定位属性,例如:display first 或 width first 等;贝娄就是例子,位置与样式混合在一起,真的无处不在。

.box {
    display:block;
    width:100px;
    background-color:blue;
    margin:25px;
    position:absolute
}
  • 真的很重要吗?
  • 有什么我们应该遵循的准则吗?

谢谢,

【问题讨论】:

  • 没关系 - 我总是按字母顺序编写属性以提高可读性.. 还有供应商前缀属性 should always appear before CSS 属性
  • 如果您添加后备,最好将它们放在首位。因为浏览器将使用他们理解的最后一条规则。

标签: html css coding-style


【解决方案1】:

属性的顺序无关紧要(在技术意义上),除非它们:

  • 属性是否相同(包括供应商前缀版本)
  • 一个属性是包含另一个属性的速记属性

例如:

background: url('foo');
background-color: red;

background-color: red;
background: url('foo');

... 会给出不同的结果(因为如果您省略了 background 属性的 background-color 部分,它会被视为 transparent)。

【讨论】:

  • +1。我要添加的唯一其他情况是供应商前缀属性。
  • @Quentin 即使在浏览器代码的支持下,代码也作为一个块执行,并且渲染没有减慢或什么?我知道这可能有点矫枉过正,但如果我能找到它,从长远来看会有所帮助。
【解决方案2】:

在很大程度上,这确实是品味和风格的问题。如果您寻找它们,有许多可用的指南,但一个起点是 Nicolas Gallagher 的 Idiomatic CSS - 特别是 Declaration Order 部分。

如果要一致地对声明进行排序,则应遵循单一、简单的原则。

...

较小的团队可能更喜欢将相关属性(例如定位和盒子模型)聚集在一起。

...

较大的团队可能更喜欢字母排序带来的简单性和易于维护性。

【讨论】:

  • 在您发布的指南中。作者建议使用 4 个空格而不是 TAB。那不是更高的字节大小吗?我一直在使用 TAB。
  • 当然——这也是一个备受争议的品味问题,需要根据代码编写人员的意见做出决定并达成一致。 CSS 格式是为了便于阅读、编写和维护,我建议您缩小生产 CSS 以消除不必要的空白并完全避免 1vs4 字节参数!
猜你喜欢
  • 2017-08-09
  • 2020-02-13
  • 2011-10-25
  • 1970-01-01
  • 1970-01-01
  • 2012-03-03
  • 2017-11-06
  • 1970-01-01
  • 2016-04-02
相关资源
最近更新 更多