在处理（复杂）Web应用程序时我感受到的最具挑战性的事情之一是组织CSS。这是我们在多个项目中尝试的不同方法。
1：为每个网页/模块设置不同的样式表。
显然，我们对网络应用程序来说还是一个新手，这种方法导致了太多的样式表和过多的样式重复。我们很难在整个应用程序中实现一致性。
2：有一个共同的样式表，在相似的网页上共享。
这种方法运作良好，直到它变得过于复杂。此外，我们发现我们有太多的例外情况仍会导致针对特定情况调整常见样式，如果做得不正确会影响应用程序的不同部分，并且在某些时候会变得困难。同时拥有一个庞大的开发团队（跨越不同的时区）和艰难的项目时间表对我们的事业没有帮助。
尽管＃2有效，但我们仍然看到我们的产品仍然没有我们想要的类似UI质量和一致性。
是否有任何CSS样式指南应该引用非常复杂的Web 2.0应用程序。其他人如何维护他们的样式表？
答案 0 :(得分：3)
我发现自己处于类似情况。
首先，请确保您有效地使用CSS。如果您不认为自己是使用CSS的绝对专家，请花一些时间进行学习，这样可以大大减少冗余，最终得到一个更容易使用的样式表。
在大多数情况下，如果将所有样式合并到一个文件中，并没有太大的性能影响，事实上，将样式分成几十个文件，以便您可以确保排除任何赢得的由于所有额外请求，使用可能会导致更长的加载时间。但是，我相信你知道，一个庞大的CSS文件很快就会变成令人头痛的问题。
考虑这个黑客来实现妥协。使用您选择的语言（PHP代表我）来提供您的CSS。我的意思是包括你的样式文件：
<link rel="stylesheet" type="text/css" href="styles.php" />
，让该文件的标题以text / CSS内容类型返回，并拥有该文件
a）将多个样式表拉入一个文件 和/或 b）根据各种参数（正在加载的文件，用户数据，一天中的时间等）更改样式的编写方式。
A是一个很好的解决方案，可以减少开发性头痛和页面加载开销。 B可能还需要您设置适当的文件到期日期，以避免浏览器忽略您想要生成的任何新样式，以支持上次访问时下载的内容。因为你通常可以通过简单地使用静态样式表和动态编写的元素类/ ID名称来完成B中的相同操作，所以它通常不是理想的解决方案，除非你做的事情非常奇怪。
让设计师就这类东西给你提供建议。通常情况下，我们的开发人员很难围绕高效CSS的一些细节以及在该特定领域接受过培训的人员。
答案 1 :(得分：2)
我已经参加了很多次。首先，在早期，我曾经做过一个里面有一切的样式表，不管怎么说，过去是这样的;然后我决定你的第二种方法，第一种方法，我幸运地认为这是一个错误，太多的代码和碎片浮动...
第二种方法很好，直到你开始提问... 我的意思是：
此div的背景样式应该在graphic.css中还是在layout.css中？
字体样式应该是fonts.css还是布局时到P的宽度？
带有图标位置div的标题的边距是应该转到graphic.css还是layout.css或fonts.css（对于图标，文本和文本使用相同的声明会更简单位置...）？
然后你意识到这种方法有问题。
我现在所做的就是评论。很多。
template.css -
/* ////// Headers ////// */
#header {
width: 1004px;
height: 243px; /* 263H-20MARG=243H */
padding: 20px 0px 0px 0px;
background-color: #000000;
background-image:url('../images/redset/top1-bk.png');
background-repeat:no-repeat;
background-position:right top;
clear: both;
}
/* logo */
#logo {
background-image:url('../images/redset/wh-logo.png');
background-repeat:no-repeat;
width:327px;
height: 263px;
float: left;
margin: -20px 0px 0px 0px;
}
#logo a {
width:327px;
height:263px;
}
/* Top menu & Banner */
#menuybanner {
text-align: center;
/* margin-right: 65px; optional*/
}
#bannerz {
height: 152px;
width: 653px;
text-align: left;
margin-right: 24px;
/* optional: width: 100%;
margin: 0px */
}
#bigmenu {
text-align: left;
margin: 18px 0px 14px 74px;
}
#bigmenu img {
margin: 0px 22px 0px 0px;
}
最初这将是三种不同的CSS：布局，图形和文本。现在我知道每个人都做了什么。
顺便说一下，我知道它增加了档案的重量，但我不想做一些混合效果，因为每个跟在我后面的人并且阅读css应该能够理解我做了什么，并且css喜欢这些：
a, .b, .c, .d, #f, #2 { background-color: black; }
真的很难揭开面纱。当然，如果你需要这样做，那就继续吧，但是我的意思是，有时他们只是为了更加神秘而变得更加神秘......就像moodle ......哈哈哈。
希望有所帮助。
见你。
答案 2 :(得分：1)
您希望利用CSS的级联性质以及继承规则的方式。
首先编码最常见的案例，然后更改细节。
对于正常规模的项目，这根本不应该失控。
为了更清楚地查看内容，您可以使用索引表并从中调用其他样式表。当您想要进行更改时，您将知道要去哪个样式表，您将节省时间。以下是我的一个项目中的示例。
/*
This is the CSS index page. It contains no CSS code but calls the other sheets
*/
@import url("main/reset.css");
@import url("main/colors.css");
@import url("main/structure.css");
@import url("main/html-tags.css");
@import url("main/sign-up-sign-in.css");
@import url("main/pagination.css");
@import url("main/menu-items.css");
@import url("main/teachers-list.css");
@import url("main/footer.css");
@import url("main/misc-custom-sections.css");
@import url("main/error-messages.css");
祝你找到自己的风格。
答案 3 :(得分：1)
我使用一个mastersheet template.css来设置主模板的样式。对于任何需要主模板无法覆盖的单独样式的网站，我要么将其放在网站头部，如果它很短，要么为该情况创建一个新工作表。
理想情况下，我想将template.css文件设计为灵活，以涵盖大多数情况。
答案 4 :(得分：0)
我通常尝试按视觉元素对CSS进行分组，并且只包含给定页面的相关样式表以保持较低的加载时间。使用PHP或您使用的任何环境将所需的样式表动态合并到给定页面的单个样式表中是一个很好的解决方案。
有一件事对我有帮助，我实际上为我的CSS创建了伪命名空间。我知道CSS 3支持名称空间，这使得它更容易，但由于某些浏览器不支持它，这就是我所做的：
虽然设计人员认为这很冗长，但它可以很容易地在文件系统中找到特定的css类，而不会产生加载时间。此外，您不会遇到一个设计人员/开发人员覆盖其他人的问题。
答案 5 :(得分：0)
如果你能让每个人都能正确使用级联并保持你的目标强度最小化，那么维护css文件会更容易。
确保元素继承样式并且覆盖不太重将使您的CSS不会变得疯狂。通过这样做，您可以自己只有2或3个样式表用于布局/基本样式和覆盖。如果你对布局/基本样式表中的内容进行了大量的控制，并定期进行重新评估覆盖表中的内容，以查看可以移动到底部的内容以及可以简化的内容，您将自由释放允许人们随意覆盖，但也要控制蠕变。
有我的理论......