Question

这可能是一个临界问题，因为我不确定是否有正确的答案，但我很好奇人们如何组织他们的样式表，以及是否有一个常见的做法。我敢肯定这取决于个人风格，但我仍然希望看到一些人做的不同。

全局样式总是排在最前面，其余样式通常按照它们在页面上显示的顺序编写。

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

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

对我来说，这提高了可读性，因为如果我需要经历并找到特定类中的属性，事情总会按照相同的顺序。

是否有更好/更可接受的组织样式表的方法？你是怎么做到的？

Answer 1

缩进或“嵌套”是一种常见做法，是SASS等CSS元语言的一个关键特性。

Answer 2

这是一个很好的方式。仅供参考我发现缩进代码没有额外的可读性。所以我没有。 http://www.visibilityinherit.com/code/initial-css-settings.php

CSS代码组织技术

2 个答案: