CSS代码组织技巧

这可能是一个边界问题，因为我不确定是否有正确的答案，但我很好奇人们如何组织他们的样式表，以及是否有一种常见的做法。我相信这归结于个人风格，但我仍然想看看有些人做了什么不同。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] 
}

对我而言，这提高了可读性，因为如果我需要通过并在特定类中查找属性，那么事情总是会以相同的顺序排列。

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

来源

2012-12-12 Jon

如果它对你有好处，那就重要了。所有的开发人员都有不同的做事方式，只是让其他开发人员可以理解，并且对自己最适合。 – Andy

这里有一些很好的提示：http://net.tutsplus.com/tutorials/html-css-techniques/30-css - 最佳实践换初学者/。但正如Andy所说，没有最好的办法。如果它适合你，它可能是好的。 – JSW189

身份验证或“嵌套”是一种常见做法，并且是CSS元语言（如SASS）的一个关键功能。

来源

2012-12-12 18:03:55 Anson

要继续，google推荐2个空格用于缩进，而不是tab或4个空格：http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml – Andy

为什么有两个空格？压缩带有制表符的空白需要更长的时间吗？ – Jon

@Jon建议减少可读性，并在编辑器中取消控制缩进级别的功能。 – cimmanon

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

来源

2012-12-12 18:33:41 Eric

CSS代码组织技巧

回答

相关问题