拥有一个包含几乎每个页面都要使用的样式元素的怪物.css文件有什么好处吗?

我在想,为了便于管理,我想把不同类型的CSS拉出到几个文件中,并包括我的主<link />是坏的吗?

我觉得这样更好

positions.css buttons.css tables.css copy.css

vs.

site.css

你见过用一种方法做和用另一种方法做有什么问题吗?


当前回答

像Sass或LESS这样的CSS编译器是一个很好的方法。通过这种方式,你可以为网站交付一个最小化的CSS文件(这将比普通的单个CSS源文件小得多,速度也快得多),同时保持最好的开发环境,所有东西都整齐地分割成组件。

Sass和LESS具有变量、嵌套和其他方法的附加优势,使CSS更容易编写和维护。强烈推荐。我个人现在使用Sass (SCSS语法),但以前使用LESS。两者都很棒,好处相似。一旦你用编译器编写了CSS,你就不太可能不需要编译器。

http://lesscss.org

http://sass-lang.com

如果你不想在Ruby上浪费时间,这个Mac版的LESS编译器非常棒:

http://incident57.com/less/

或者你可以使用CodeKit(同样的人):

http://incident57.com/codekit/

WinLess是一个用于编译LESS的Windows GUI

http://winless.org/

其他回答

SASS和LESS使这一切都成为一个有争议的问题。开发人员可以建立有效的组件文件,并在编译时将它们全部组合起来。在SASS中,您可以在开发过程中关闭压缩模式以方便阅读,并在生产过程中切换回来。

http://sass-lang.com http://lesscss.org

最后,不管你使用什么技术,一个简化的CSS文件就是你想要的。更少的CSS,更少的HTTP请求,更少的服务器需求。

也许可以看看compass,这是一个开源的CSS创作框架。 它基于Sass,所以它支持一些很酷的东西,比如变量、嵌套、mixin和导入。如果您想要保持独立的较小CSS文件,但将它们自动合并为一个(避免多次缓慢的HTTP调用),则导入非常有用。 Compass在此基础上增加了一组预定义的mixin,便于处理跨浏览器的东西。 它是用Ruby编写的,但是它可以很容易地用于任何系统....

对于页面的加载时间来说,只有一个CSS文件更好,因为这意味着更少的HTTP请求。

拥有几个小的CSS文件意味着开发更容易(至少,我是这么认为的:应用程序的每个模块拥有一个CSS文件会让事情变得更容易)。

所以,这两种情况都有很好的理由……

一个可以让你得到两个想法的最好的解决方案是:

使用几个小的CSS文件进行开发 也就是更容易发展 要为您的应用程序建立一个构建过程,将这些文件“组合”成一个文件 顺便说一句,这个构建过程也可以缩小那个大文件 这显然意味着你的应用程序必须有一些配置,允许它从“多文件模式”切换到“单文件模式”。 而要在生产中使用,只有大文件 即更快的加载页面

也有一些软件可以在运行时组合CSS文件,而不是在构建时;但是在运行时这样做意味着消耗更多的CPU(并且显然需要一些缓存机制,以避免太频繁地重新生成大文件)

你想要两个世界。

您需要多个CSS文件,因为浪费您的理智是一件可怕的事情。

同时,最好有一个单一的大文件。

解决方案是使用某种机制将多个文件合并为一个文件。

一个例子是

<link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" />

然后,allcss.php脚本处理连接文件并传递它们。

理想情况下,脚本会检查所有文件的mod日期,如果其中任何一个文件发生变化,则创建一个新的组合,然后返回该组合,然后检查if - modified HTTP头,以便不发送多余的CSS。

这让你两全其美。也适用于JS。

我更喜欢在开发过程中使用多个CSS文件。这样管理和调试就容易得多。但是,我建议你在部署时使用像YUI Compressor这样的CSS缩小工具,它可以将你的CSS文件合并成一个整体文件。