css - CSS 样式顺序的标准？

Question

CSS 元素样式的分组顺序是否有标准或最佳实践？我知道这不是主要问题，但我想确保我始终生成可读代码，尤其是对于具有多种样式的元素。

举个例子:

#element {
    font-family: Arial;
    font-size: 8pt;
    color: #666666;
    border: 1px solid #ccc;
    position: relative;
    top: 5px;
    left: 5px;
}

#element 按照文本样式、边框、位置的顺序对样式进行分组。是否有一个 css 类型层次结构的标准，将某种类型的优先级或重要性置于此顺序上？例如，您是否应该按以下顺序分组:位置、文本样式、边框？

Answer 1

坦率地说，这归结为个人喜好，但这是我的惯例:

将看起来彼此相关的事物分组。然后，使用空格分隔每个“组”。我只是在每个 block 后点击“输入”。对于其他样式，如“top”、“left”等，我将它们全部放在一行中，在它们的主要样式(如“position”)之后。我也倾向于将 CSS3 属性作为任何给定 block 中的最后样式。

有时，当我心情好的时候，我也倾向于松散地按字母顺序排列属性(按 block )。但同样，这真的只是偏好。

我做的例子:

#element {
    color:black;        
    font-family:Arial;
    font-size:1.2em;
    font-weight:bold;
    text-transform:capitalize;
    text-shadow:0 1px 1px black;

    background-color:white;
    border-bottom:1px dotted gray;
    box-shadow:1px 1px 2px black;

    position:fixed;
    top:0; right:0;

    height:30px;
    width:245px;
}

只是我的两个便士!