如何组织css文件？

Question

当我的网站依赖于许多css文件时，我意识到它是一团糟。这意味着，我使用来自另一个团队的不同css文件，并将它们与我的一起使用。嗯，很多文件呢！我对组织它们感到困惑。有人有一个很好的解决方案吗？

Answer 1

删除重复的规则和属性后，您可以使用cssmerge合并文件。

Answer 2

你可以看到我对类似问题的回答。关于名称和文件以及一般css组织。

Managing CSS conflicts

Answer 3

你的“一体化”方法表明你可能会践踏每个人的CSS定义。 包含每个CSS文件的顺序可能会极大地影响您的网站。

对你来说，没有一个简单的答案。您需要让其他团队以相同的方式工作，或者使用版​​本控制系统与他们合作，您可以在一个地方贡献CSS。

Answer 4

我真的很想知道人们如何对CSS文件进行分组并防止命名冲突。

但我也认为您应该考虑如何将CSS打包为生产版本。它实际上取决于您正在使用的框架和您的应用程序代码，但理想情况下，您可以通过某种方式指定哪些页面依赖于哪些文件，以及将页面的CSS文件连接在一起并通过{运行它们的构建步骤{3}}，并输出一个唯一的文件名，包括内容的校验和或日期，以便可以无限期地缓存文件。 （然后你当然是文件的YUI Compressor）

Answer 5

Google Page Speed can tell you which CSS rules in a page are currently unused，如果您认为自己包含太多CSS。

Answer 6

这些是手动合并和组织CSS的一些技巧

1. 将代码分为链接样式，公共类，布局或结构样式，标题，导航，内容，页脚等部分
2. 缩进后代和相关规则 这使您可以更轻松地识别CSS中的页面结构以及元素之间的相互关系。此方法也可以应用于特定标记，例如标题标记。
3. 将您的代码压缩到一行 不是将每个属性放在自己的行上，而是将它们全部放在同一行上。这样可以减少CSS文件的文件大小，并且在尝试查找特定标记时也可以轻松扫描。
4. Alphabetize属性 这似乎使我的CSS在扫描或寻找东西时更容易阅读。
5. 尽可能使用速记 这使您的CSS更易于阅读和理解，并且效率更高。
6. 重置您的CSS 有很多方法可以重置CSS
7. 为不同的元素使用单独的CSS样式表 有一个主要样式表，您可以导入其他人。你可以有一个样式表，仅用于排版，另一个用于布局，另一个用于颜色。通过将这些元素组织在自己的样式表中，可以更轻松地管理代码。
8. 声明CSS文件顶部使用的颜色 在文件顶部的CSS注释中，您在文件中使用的颜色以及它们所代表的颜色。

Answer 7

我非常喜欢styleneat.com。只有它不是一个网络应用程序。