拥有一个包含几乎每个页面都要使用的样式元素的怪物.css文件有什么好处吗?
我在想,为了便于管理,我想把不同类型的CSS拉出到几个文件中,并包括我的主<link />是坏的吗?
我觉得这样更好
positions.css buttons.css tables.css copy.css
vs.
site.css
你见过用一种方法做和用另一种方法做有什么问题吗?
拥有一个包含几乎每个页面都要使用的样式元素的怪物.css文件有什么好处吗?
我在想,为了便于管理,我想把不同类型的CSS拉出到几个文件中,并包括我的主<link />是坏的吗?
我觉得这样更好
positions.css buttons.css tables.css copy.css
vs.
site.css
你见过用一种方法做和用另一种方法做有什么问题吗?
当前回答
你想要两个世界。
您需要多个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。
其他回答
整体样式表确实提供了很多好处(在其他答案中有描述),但是根据样式表文档的总体大小,您在IE中可能会遇到问题。IE对从单个文件中读取的选择器数量有限制。限制为4096个选择器。如果你是单片样式表,你会想要拆分它。这种限制只会在IE中暴露出来。
这适用于所有版本的IE。
参见Ross Bruniges博客和MSDN AddRule页面。
I've created a systematic approach to CSS development. This way I can utilize a standard that never changes. First I started with the 960 grid system. Then I created single lines of css for basic layouts, margins, padding, fonts and sizes. I then string them together as needed. This allows me to keep a consistent layout across all of my projects and utilize the same css files over and over. Because they are not specific. Here's an example: ----div class="c12 bg0 m10 p5 white fl"/div--- This means that the container is 12 columns across, utilizes bg0 has margins of 10px padding of 5 the text is white and it floats left. I could easily change this by removing or adding a new - What I call a "light" style- Instead of creating a single class with all these attributes; I simply combine the single styles as I code the page. This allows me to create any combination of styles and does not limit my creativity or cause me to create a massive number of styles that are similar. Your style sheets become a lot more manageable, minimized and allow you to re-use it over and over. This method I have found to be fantastic for rapid design. I also no longer design first in PSD but in the browser which also saves time. In addition because I have also created a naming system for my backgrounds and page design attributes I simply change out my image file when creating a new project.(bg0 = body background according to my naming system) That means that if I previously had a white background with one project simply changing it to black simply means that on the next project bg0 will be a black background or another image..... I have not found anything wrong with this method yet and it seems to work very well.
存在一个临界点,在这个临界点上使用多个css文件是有益的。
一个拥有100万以上页面的网站,平均用户可能只看到其中的5个,可能有一个巨大的样式表,所以试图通过大量的初始下载来节省每次页面加载的单个额外请求的开销是虚假的经济。
把这个论点延伸到极致——这就像是建议整个网络应该维护一个大的样式表。显然是荒谬的。
每个网站的临界点都不一样,所以没有硬性规定。这将取决于每个页面的唯一css数量、页面数量以及普通用户在使用网站时可能经常遇到的页面数量。
我通常有一些CSS文件:
一个用于重置和全局样式的“全局”CSS文件 “模块”特定的CSS文件用于逻辑分组的页面(可能是结帐向导或其他东西中的每个页面) 用于覆盖页面的“page”特定CSS文件(或者,将其放在单个页面的块中)
我真的不太关心CSS文件的多页请求。大多数人都有不错的带宽,我相信还有其他优化会比将所有样式组合到一个单独的CSS文件中产生更大的影响。在速度和可维护性之间进行权衡,我总是倾向于可维护性。YUI压缩机听起来很酷,但我可能要检查一下。
对于页面的加载时间来说,只有一个CSS文件更好,因为这意味着更少的HTTP请求。
拥有几个小的CSS文件意味着开发更容易(至少,我是这么认为的:应用程序的每个模块拥有一个CSS文件会让事情变得更容易)。
所以,这两种情况都有很好的理由……
一个可以让你得到两个想法的最好的解决方案是:
使用几个小的CSS文件进行开发 也就是更容易发展 要为您的应用程序建立一个构建过程,将这些文件“组合”成一个文件 顺便说一句,这个构建过程也可以缩小那个大文件 这显然意味着你的应用程序必须有一些配置,允许它从“多文件模式”切换到“单文件模式”。 而要在生产中使用,只有大文件 即更快的加载页面
也有一些软件可以在运行时组合CSS文件,而不是在构建时;但是在运行时这样做意味着消耗更多的CPU(并且显然需要一些缓存机制,以避免太频繁地重新生成大文件)