CSS样式的标准顺序?

CSS样式的标准顺序?,css,Css,CSS元素样式分组顺序是否有标准或最佳实践?我知道这不是一个主要问题,但我想确保我总是生成可读的代码,特别是对于具有多种样式的元素 例如: #element { font-family: Arial; font-size: 8pt; color: #666666; border: 1px solid #ccc; position: relative; top: 5px; left: 5px; } #元素按文本样式、边框、位置的顺序对样式进

CSS元素样式分组顺序是否有标准或最佳实践?我知道这不是一个主要问题,但我想确保我总是生成可读的代码,特别是对于具有多种样式的元素

例如:

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

#元素按文本样式、边框、位置的顺序对样式进行分组。css类型层次结构是否有一个标准,将某种类型的优先级或重要性放在这个顺序上?例如,您是否应该按位置、文本样式、边框的顺序进行分组?

不同的人有不同的意见,我更喜欢按字母顺序排序

然后CSS本身可以被重新分解,以分离出结构化CSS页面和特定于ui元素的页面


结构CSS是控制页面结构的CSS。

坦率地说,它归结为个人偏好,但我的惯例是:

将看起来相互关联的事物分组。然后,使用空格分隔每个“组”。我只是在每个街区后点击“回车”。对于其他样式,如“顶部”、“左侧”等,我将它们放在一行中,在其主要样式(如“位置”)之后。我还倾向于将CSS3属性作为任何给定块中的最后一个样式

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

我所做的示例:

#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;
}

只有我的两便士

好问题,不确定是否有标准,但我更喜欢的方法是

#element {
    layout,
    positioning,
    text style
    appearance
}
比如说

#element {
    display: block;
    width: 15px;
    height: 15px;
    float: left;
    position: relative;
    font-size: 12px;
    line-height: 16px;
    text-decoration: none;
    color: #333;
    text-indent: -9999px;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
}

就像所有的编码风格一样,这并不重要。重要的是一致性。如果你在一个团队中工作,你应该就什么最适合你达成一致,而不是找到一个你需要适应的被认为是最好的惯例。。。那真是浪费时间。同样,如果您正在处理将被继承的项目,请坚持相同的惯例,但要做最适合您的事情。

关于“优先级或重要性”:同一块中的不同顺序如何可能影响任何事情?如中所示,
color
如何比
border
具有更高的优先级?只有当您将同一物业列出两次时,这才重要。个人偏好。