Css 您应该将样式表分解到多大程度？_Css

Css 您应该将样式表分解到多大程度？

css

Css 您应该将样式表分解到多大程度？,css,Css,我正在为我的公司建立一个新的网站，我正处于创建第一个页面的html模型的阶段。我将使用它作为网站其余部分的基础。我正在考虑更好地组织我的样式表，现在我的设计在跨浏览器中看起来是一致的，但我想知道当我把它拆开的时候还能走多远一个想法是具备以下条件： reset.css 排版 layout.css colors.css 但我该在哪里划定界限呢？从理论上讲，我可以继续把它们分解成类、ID等，但我认为这太过分了这似乎是一个合理的方法吗？别再进一步了。如果你不得不这样做，试着在生产之前找到一种合并

我正在为我的公司建立一个新的网站，我正处于创建第一个页面的html模型的阶段。我将使用它作为网站其余部分的基础。我正在考虑更好地组织我的样式表，现在我的设计在跨浏览器中看起来是一致的，但我想知道当我把它拆开的时候还能走多远

一个想法是具备以下条件：

reset.css
排版
layout.css
colors.css

但我该在哪里划定界限呢？从理论上讲，我可以继续把它们分解成类、ID等，但我认为这太过分了

这似乎是一个合理的方法吗？

别再进一步了。如果你不得不这样做，试着在生产之前找到一种合并它们的方法。最大的问题是您开始堆积HTTP请求。对于浏览器来说，这并不是什么问题，而是每个页面所需的请求量。我想说你的观点很好，超过4个会有点过火。请记住，您始终可以使用良好的注释和格式来分解大型CSS文件。

Pickledegg

分解样式表没有什么错。事实上，我发现根据css规则的类型或应用于站点的哪个部分将其组织到不同的文件中非常有用。如果您将规则合并到一个大文件中，它会很快变得一团糟，并且变得非常难以管理

我建议你提出自己的方案，将规则分成文件，并在你所有的项目中坚持使用它。

巧合的是，今天有一个单独的列表涵盖了这一点。他们建议将其分为几个主要类别，包括您列出的一些类别（类型、布局、颜色），但更进一步，要包括各种技巧，以使旧浏览器满意

另一方面，将所有内容都保存在一个css文件中可以关闭浏览器和服务器之间的请求。一个折衷的办法可能是在开发时将内容分开，在生产时合并（作为构建过程的一部分，自然是：p）。

我不打算将排版拆分为单独的样式表，尽管这似乎是个好主意。不过，我会用排版保留颜色。我的典型方式是采用以下结构：

base.css

整个站点使用的全局样式
目标是可扩展的，例如，可以为微型站点重新设置（但使用现有布局）
实现/导入重置.css

page.css

实现任何特定于页面的更改

microsite\u skin.css

请参见base.css第2点

每当我试图决定将一些文件分解到多大程度时（我通常使用代码模块来实现这一点，但我将相同的原则应用于css/js），我都会将其分解为最小的可重用文件，这些文件在一起是有意义的。这对于跨网络的数据流来说不是最好的，但它使我的源代码的可维护性变得更容易。特别是当你将有很多css浮动时

如果你对使用colors.css和在另一个位置使用整个内容感到满意，而不做任何修改，那么你可能很好。

我会将布局分解为两个以上的部分，基本布局，即Hacks和菜单（每个菜单区域一个。这可能类似于顶部菜单和侧部菜单）如果站点根据区域的不同而改变颜色，我也会为每个颜色区域添加一个。您还可以使用或类似工具作为布局的基础框架。

我会将不同的样式表分开设计，只在上传/发布之前根据网站的不同将它们合并成2-4个样式表。始终将黑客分开。

根据您估计的未来需求将他们分开。如果你认为排版、布局或颜色（在全球范围内）会发生变化，那么至少用这种方式描述样式可能是明智的，这样以后就更容易用另一个样式表替换一个样式表

但如果你在这方面做得太过分，你最终会发现到处都是重复的规则（例如，内容在typography.css中有字体族规则，在colors.css中有颜色规则，等等）。这不是一种合理的分割方式，除非你预料到关键的变化会在那里发生

另一方面，如果像大多数网站一样，图形设计将保持相当静态，但架构将进行一些更改（例如新的内容类型），那么您希望根据网站的上下文对样式进行分组。例如，article.css、search.css等

从本质上讲，请尝试提前了解以后需要进行哪些更改，然后尝试在css文件设置中预测这些更改。

在我看来，主要问题是重复属性定义问题。这使得样式表无法管理。为了绕过这个问题，使用了分而治之的方法。如果我们能够确保可管理的样式表具有不冲突的规则，那么合并或模块化它们将很容易

在审查期间，我所做的就是检查规则冲突、classitis和divitis。使用Firebug/CSSTidy组合，突出显示问题区域。在这些行中，我甚至不考虑排版和字体分离

目标是有一个单一的基础CSS文件和单独的浏览器黑客文件。如果一个应用程序具有不同的主题，则需要多个基本CSS文件。

我几乎完全按照相同的方式分解我的CSS文件：

reset.ccs-从
排版.css-字体、大小、线条高度等
layout.css-所有定位、浮动、对齐等
colors.css（或更合适的skin.css）-所有颜色、背景图像等

然后，通过适当版本的条件注释包含IE特定文件

我没有必要去塞帕拉

<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>