CSS代码组织技术

这可能是一个边缘问题，因为我不确定是否有正确的答案，但我很好奇人们如何组织他们的样式表，以及是否有一种常见的做法。我相信这可以归结为个人风格，但我还是想看看有些人有什么不同

全局样式始终位于顶部，其余样式通常按照它们在页面上的显示顺序编写

我倾向于在父类下缩进所有子样式、子类和伪类：

#search {
    float:right;
    margin-top:20px;
    width:325px;
    height:35px;

    background-image:url(css-ref/main.png);
    background-repeat:no-repeat;

    text-align:right;
    line-height:36px;
    font-size:13px;
}
    #search a:link,#search a:visited,#search a:active {
        color:#333;
    }
    #search a:hover {
        color:#1770a9;
    }

在类中，我总是按以下顺序列出属性：

.myClass {
    [position, display, and float]
    [margins and padding]
    [width and height]
    [background, border, border-style, shadow]
    [font settings]
    [animations/transitions]
}

对我来说，这提高了可读性，因为如果我需要遍历并查找特定类中的属性，事情的顺序总是相同的

---

是否有更好/更被接受的方式来组织样式表？如何做到这一点？

识别或嵌套是一种常见的做法，也是CSS元语言的一个关键特性，例如。

这里有一个很好的方法。仅供参考，缩进代码没有额外的可读性。所以我没有

如果这对你有好处，那就是最重要的。所有的开发人员都有不同的做事方式，只是让其他开发人员可以理解，并且适合自己。这里有一些好的提示：。但正如安迪所说，没有最好的办法。如果它对你有用的话，可能没问题。另外，谷歌推荐2个空格作为缩进，而不是制表符或4个空格：为什么是两个空格？用制表符压缩空格需要更长的时间吗？@Jon建议降低可读性，并取消在我的编辑器中控制缩进级别的功能。@Jon：这项建议表明谷歌也不知道所有事情。在这里推荐一些空格2而不是tab，这表明人们不理解tab是什么。选项卡是一个索引级别，不等于任何数量的空格。这不是同一类事情。