我正在为我的公司建立一个新网站，而我正处于创建第一页的html模型的阶段。我将使用它作为网站其余部分的基础。我正在考虑更好地组织我的样式表现在我的设计看起来一致的跨浏览器，但我想知道当我打破它时还有多远。
一个想法是拥有以下内容：
但我在哪里画线？从理论上讲，我可以继续将它们分解为类，ID等，但我认为这会过分。
这看起来是一种合理的方法吗？
答案 0 :(得分：9)
巧合的是，A List Apart今天有article封面。他们建议分为几个主要类别，包括你列出的一些类别（类型，布局，颜色），但要进一步包括各种技巧以保持旧浏览器的快乐。
另一方面，将所有内容保存在一个css文件中可以保持浏览器和浏览器之间的请求。服务器关闭。妥协可能是为了保持开发和合并生产（作为构建过程的一部分，自然地：p）。
答案 1 :(得分：5)
我不倾向于将排版分成单独的样式表，尽管这似乎是一个好主意。不过我会用排版保留颜色。我的典型方法是具有以下结构：
base.css reset.css page.css microsite_skin.css 答案 2 :(得分：2)
Pickledegg，
分解样式表没有错。实际上，我发现将css规则根据其类型或应用到的站点的哪些部分组织到不同的文件中非常有用。如果将规则整合到一个大文件中，它很快就会变得一团糟，变得非常难以管理。
我建议您提出自己的方案，将规则分成文件，并坚持使用它。
答案 3 :(得分：2)
我会将布局分解为2个以上的部分，基本布局，IE浏览器，菜单（每个菜单区域一个。这可能是顶级菜单和侧面菜单） 如果站点根据区域改变颜色，我也会为每个颜色区域添加一个。 您还可以使用Yaml或类似作为布局的基础框架。 我会保留不同的样式表，而设计只是在上传/发布前不久将它们合并到2-4中。总是让黑客分开。
答案 4 :(得分：2)
根据您估计的需求将在以后分开。如果您认为排版，布局或颜色（全局）会发生变化，那么至少以这种方式描绘样式可能是明智的，因此以后更容易将样式表替换为另一个样式表。
但如果你在这方面走得太远，你最终会在所有地方都有重复的规则（例如，＃layout在typography.css中有一个字体系列规则，colors.css中的颜色规则等）。除非你预料到那里会发生关键变化，否则这不是一种合理的解决方法。
另一方面，如果像大多数网站一样，图形设计将保持相当静态，但架构将进行一些更改（例如新的内容类型），那么您希望基于网站的上下文。例如，article.css，search.css等
基本上，请尝试展望以后需要进行哪些更改，然后尝试预测css文件设置中的这些更改。
答案 5 :(得分：2)
IMO的主要问题是重复的属性定义问题。这使得样式表难以管理。为了绕过这个问题，使用了分而治之的方法。如果我们可以确保具有非冲突规则的可管理样式表，那么合并表单或将它们模块化将很容易。
在评论期间，我所做的只是检查规则冲突，分类炎和结肠炎。使用Firebug / CSSTidy组合，突出显示问题区域。在这些方面思考，我甚至没有考虑排版和字体分离。
目标是拥有一个单一的基本CSS文件和单独的浏览器黑客文件。如果应用程序具有不同的主题，则需要多个基本CSS文件。
答案 6 :(得分：2)
我将所有样式（包括IE6和7特定样式）放在一张表中。 IE6和7样式的目标是使用条件注释的div，只有当其中一个浏览器进入该站点时才会出现，例如：
<body>
<!--[if IE 7]><div class="IE IE7"><![endif]-->
<!--[if IE 6]><div class="IE IE6"><![endif]-->
... rest of markup ...
<!--[if IE]></div><![endif]-->
</body>
不确定人们如何看待这种方法，但额外的标记可以忽略不计，并且能够在不使用黑客的情况下在主要样式旁边包含IE6 / 7样式...只需在选择器前添加“.IE”或“.IE6”等，是一个很大的便利。
对于多个样式表...保存您的HTTP请求。使用图像精灵，一个样式表，一个“application.js”javascript等。
我仍然会为打印和手持式样式添加单独的工作表，但这就是它......
答案 7 :(得分：1)
不要太过分了。如果必须，请尝试在生产之前找到合并它们的方法。最大的问题是您开始堆叠HTTP请求。这不是浏览器的问题，而是需要为每个页面提出的请求数量。我会说你处在一个好点，超过4会有点过分。请记住，您始终可以使用良好的评论和格式来分解大型CSS文件。
答案 8 :(得分：1)
每当我试图决定分解一些文件的程度时（我通常用代码模块执行此操作，但我将相同的主体应用于我的css / js）我将其分解为最有意义的可重用文件一起。这不是通过线路传输数据的最佳选择，但它使我的源代码的可维护性变得更加容易。特别是如果你有很多css漂浮在周围。
如果您对使用colors.css感觉很舒服，并且在没有修改的情况下在另一个地方使用整个东西，那么您可能会很好。
答案 9 :(得分：1)
我几乎完全以同样的方式打破我的行为：
然后通过适当版本的条件注释包含IE特定文件。
我没有必要将它们进一步分开，尽管我确实将每个文件组织在不同的部分（基本元素，命名元素，类等）。
更新：在我完成的最后几个项目中，我已经改变了我的系统。
然后我还使用条件注释来添加任何特定于IE的CSS文件（如果需要）。
我改进这一步的下一步是添加一个构建过程步骤，将所有CSS文件合并到一个文件中，以减少服务器上的HTTP请求。
答案 10 :(得分：1)
看看blueprint-css。 Blueprint是一个CSS框架，它为您提供各种默认样式（例如浏览器重置代码）。
blueprint-css中的样式表按如下方式组织：
有关详细信息，请参阅blueprint-css Git存储库。
答案 11 :(得分：1)