0

我希望开始一个讨论，以获得一些关于如何在一个非常大的项目中组织样式表的好主意，并有一大群开发人员在做这个项目。

一种可能的方法是使用评论和区域组织所有样式的工作表，不幸的是，即使使用带有选项卡的单行书写方法，该工作表也会变得非常大，甚至 SVN 提交和更新也可能变得更加混乱。

所以我们认为最好在不同的工作表中划分样式。我们不确定如何组织它，因为我们对此有不同的想法。

  • 一种可能的想法是将其组织为类型：colors.css、fonts.css、forms.css、...
  • 另一个想法是按功能/行为对它们进行分组：navigator.css、menu.css、warnings.css、errors.css、...
  • 我们还可以按页面组织它们：login.css、contact.css、home.css、...
  • 或者甚至结合使用这三个想法。

现在让我担心的是，我们不希望将所有样式添加到每个页面，因为并非所有页面都需要所有样式，而且我们真的很担心性能，因为我们的项目每天都有数百万用户使用。我们当然会在稍后部署时对其进行压缩，但即便如此，我们认为每页仅加载所需的内容更为明智。

在这样的情况下，我担心其他开发人员没有按正确的顺序加载样式，因为需要根据页面或页面组加载不同的工作表，他们可能会搞砸，这样做会导致级联失败（想象他们在 global.css 之前加载 menu.css，global 会覆盖一些菜单样式！！！）。

现在我们可以只选择一张，我们可以总是加载所有这些，或者我们可以使用一些我们喜欢的想法，使用字母前缀告诉开发人员加载顺序：

  • a_global.css
  • a_forms.css
  • b_region1.css
  • b_anotherregion.css
  • c_page.css

但说实话，这看起来有点可怕。所以现在我想知道那里是否有某种流行的 css 架构，或者至少有一些我们可以在这里为我们的项目使用的好主意。

非常感谢！！

4

2 回答 2

2

  1. 使用预处理器，因此您可以根据需要组织源文件。（我们的团队使用 LESS，因为我们从 Twitter Bootsrap 开始，但它卡住了）。编译后的 CSS 文件不应受版本控制，每个开发人员都应编译自己的版本进行测试。我会推荐一个 grunt 任务来编译一个用于生产的缩小版本。我会采用以组件为中心的方法（表单、导航、网格、排版等）。

  2. 使用预处理器为您提供了变量和 mixin 的强大功能。您可以保留 variables.less 和 mixins.less 等定义通用样式的文件。因此，当蓝色变为稍浅的蓝色时，您只需在一个文件中进行更改。

  3. 一个包含您需要的所有 CSS 的大文件应该没问题，因为它被浏览器缓存，因此它可以最大限度地减少对您的服务器的 HTTP 请求。当特定页面有许多不常见的元素时，页面特定的样式表是可以的。

  4. 创建一个样式指南 html 模板，其中包含您能想到的所有常见元素。标题、链接颜色、列表、照片缩略图、表单输入、网格配置、手风琴等。当您需要创建新组件时，请将其添加到此模板中，修改样式表，查看它是否破坏了任何其他元素以及它如何与休息。然后使用这些片段来创建特定页面。

于 2013-09-09T10:18:34.193 回答
1

SASS 或 LESS

这将帮助您保持代码易于管理。（变量，混合等）

划分多个文件。

总是一个好主意。怎么分。我建议基本上按每页划分它们。

但是- 排除一般样式以分隔将包含在任何地方的文件。

顺便说一句，一个文件并不意味着性能低下。您确定 10 次较小工作表的请求会比 1 次较大文件的请求更快吗？此外，这些文件将被缓存在网络浏览器中，因此一个文件看起来不是一个坏主意。

于 2013-09-09T10:08:02.387 回答