6

在处理（复杂）Web 应用程序时，我感受到的最具挑战性的事情之一是组织 CSS。以下是我们在多个项目中尝试过的不同方法。

1：每个网页/模块都有不同的样式表。

显然，那时我们对 Web 应用程序还很陌生，这种方法导致样式表过多和样式重复过多。我们很难在整个应用程序中实现一致性。

2：有一个通用的样式表，在相似的网页中共享。

这在一段时间内运作良好，直到变得过于复杂。我们还发现我们有太多的例外情况，这些例外情况仍然会导致针对特定情况调整通用样式，如果做得不正确，可能会影响应用程序的不同部分，并且在某些时候会变得困难。此外，拥有庞大的开发团队（跨越不同时区）和艰难的项目时间表并没有帮助我们的事业。

虽然 #2 有效，但我们仍然看到我们的产品仍然没有我们想要的类似 UI 质量和一致性。

对于非常复杂的 web 2.0 应用程序，是否有任何 CSS 样式指南可供参考。其他人如何维护他们的样式表？

4

6 回答 6

3

我发现自己处于类似的情况。

首先，确保您有效地使用 CSS。如果您不觉得自己是使用 CSS 的绝对专家，请花一些时间学习，您将显着减少冗余并最终获得更易于使用的样式表。

在大多数情况下，如果您将所有样式合并到一个文件中，实际上不会对性能造成太大影响，实际上，将样式拆分为数十个文件只是为了确保排除任何不会出现的文件由于所有额外的请求， used 可能会导致更长的加载时间。但我相信你知道，一个庞大的 CSS 文件很快就会变得难以维护。

考虑这个 hack 以达成妥协。使用您选择的语言（对我来说是 PHP）来提供您的 CSS。我的意思是包含您的样式文件，如下所示：

<link rel="stylesheet" type="text/css" href="styles.php" />

, 让该文件的标题以 text/CSS 内容类型返回它，并让该文件

a) 将多个样式表拉入一个文件和/或 b) 根据各种参数（正在加载的文件、用户数据、一天中的时间等）更改样式的编写方式

A 总体上是一个很好的解决方案，可以减少开发性头痛和页面加载开销。B 可能还需要您设置适当的文件到期日期，以避免让浏览器忽略您当前想要生成的任何新样式，而支持上次访问时下载的内容。由于您通常可以通过简单地使用静态样式表和动态编写的元素类/ID 名称在 B 中完成相同的事情，因此除非您正在做一些非常奇怪的事情，否则它通常不是理想的解决方案。

并请一位设计师为您提供有关此类东西的建议。通常，我们开发人员很难围绕高效 CSS 的一些细节以及在该特定领域受过培训的人员展开思考。

于 2009-01-07T18:10:17.523 回答
2

我已经很多次了。首先，在早期，我过去只做一个包含所有内容的样式表，反正不多，那是旧时代；然后我决定采用您的第二种方法，幸运的是第一种方法我认为这是一个错误，太多的代码和碎片漂浮在...

第二种方法适用于您开始提出问题的时间......我的意思是：

这个 div 的背景样式应该放在 graphics.css 还是 layout.css 中？

当涉及到 P 的宽度时，字体样式应该在 fonts.css 中还是在布局中？

带有图标位置 div 的标题的边距是否应该转到图形.css 或 layout.css 或 fonts.css（对图标、文本和位置使用相同的声明会更简单.. .)？

然后你意识到这种方法有问题。

我现在做的是评论。很多。

模板.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; }

真的很难揭开。当然，如果您需要这样做，请继续，但我的意思是，有时它们只是毫无意义地分组只是为了更加神秘......就像穆德尔......哈哈哈。

希望能有所帮助。

再见。

于 2009-07-21T17:20:06.300 回答
1

我使用一个 mastersheet template.css 来设置我的主模板的样式。对于需要主模板无法涵盖的单独样式的任何站点，如果它很短，我要么将它放在站点头部，要么为这种情况创建一个新工作表。

理想情况下，我希望将 template.css 文件设计为灵活地涵盖大多数情况。

于 2009-01-07T18:05:49.967 回答
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");

祝你找到自己的风格。

于 2009-01-07T18:04:46.007 回答
0

我通常会尝试按视觉元素对我的 CSS 进行分组，并且只包含给定页面的相关样式表以保持我的加载时间较短。使用 PHP 或您使用的任何环境将所需的样式表动态合并到给定页面的单个样式表中是一个很好的解决方案。

对我有帮助的一件事是我实际上为我的 CSS 创建了伪命名空间。我知道 CSS 3 支持命名空间，这使它更容易，但由于某些浏览器不支持它，这就是我所做的：

  1. 创建与您的项目相关的文件夹和文件（我使用 Java 命名空间样式）
    • 例如 /css/com/mydomain/myprojectname/globalheader.css
  2. 接下来，我使用映射到文件系统位置的类名
    • 例如 <div id='header' class='com-mydomain-myprojectname-globalheader-topClass'>
  3. 在你的 css 文件中使用分隔符和好的注释
    • 例如 /*---------------- 开始链接部分 --------------- -----*/
  4. 使用 PHP 或其他方式加载这些文件并在加载时将它们组合成一个样式表（如果你真的很聪明，你可以缓存结果表。命名空间约定将防止类名之间的冲突。

虽然设计者认为这很冗长，但它可以很容易地在文件系统中找到特定的 css 类，而不会影响加载时间。此外，您不会遇到一个设计师/开发人员覆盖另一个类的问题。

于 2009-01-07T18:22:34.940 回答
0

如果您可以让每个人都正确地使用级联并将您的目标优势保持在最低限度，那么维护 css 文件会容易得多。

确保元素继承样式并且覆盖不会太重将防止你的 css 变得疯狂。通过这样做，您就可以让自己只有 2 或 3 个用于布局/基本样式和覆盖的样式表。如果您对进入布局/基本样式表的内容进行严格控制，并定期访问以重新评估覆盖表中的内容，以查看可以将哪些内容移至基本样式以及可以简化哪些内容，您将解放自己让人们随意覆盖，同时也保持对蠕变的控制。

这是我的理论...

于 2009-01-07T18:22:45.893 回答