你如何在项目中组织CSS？

Question

我在处理(复杂)Web应用程序时感受到的最具挑战性的事情之一是组织CSS.这是我们在多个项目中尝试的不同方法.

1:为每个网页/模块设置不同的样式表.

显然,我们对网络应用程序来说是非常新的,这种方法导致了太多的样式表和过多的样式重复.我们很难在整个应用程序中实现一致性.

2:在相似的网页上共享一个共同的样式表.

这种方法运作良好,直到变得过于复杂.此外,我们发现我们有太多的例外情况仍会导致针对特定情况调整常见样式,如果做得不正确会影响应用程序的不同部分,并且在某些时候会变得困难.同时拥有一个庞大的开发团队(跨越不同的时区)和艰难的项目时间表并没有帮助我们的事业.

尽管#2有效,但我们仍然看到我们的产品仍然没有我们想要的类似UI质量和一致性.

是否有任何CSS样式指南,应该参考非常复杂的Web 2.0应用程序.其他人如何维护他们的样式表？

Answer 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");

祝你好运找到自己的风格。