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

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

将看起来彼此相关的事物分组。然后，使用空格分隔每个“组”。我只是在每个街区后点击“输入”。对于其他样式，例如“top”，“left”等，我将它们全部放在一行中，在它们的主要样式之后（如“position”）。我也倾向于将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;
}

只是我的两个便士！

Answer 2

不同的人有不同的意见，我希望按字母顺序排序。

然后可以重新考虑CSS本身来分离结构CSS页面和ui元素特定页面。

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

Answer 3

好问题，不确定是否有标准，但我的首选方法是。

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

Answer 4

与所有类型的编码一样，它并不重要。重要的是一致性。如果你在一个团队中工作，你们都应该同意最适合你的事情，而不是找到一个被认为最适合你需要适应的公约...这真的是浪费时间。同样，如果您正在处理将继承的项目，请坚持使用相同的约定，但要做最适合您的事情。

CSS样式订单的标准？

4 个答案: