javascript - css组合器有问题吗？

Question

我正在使用自定义框架。

当我设计我的网站时，我将 CSS 规则分成几个文件，例如

• typography.css
• 链接.css
• master.css
• 表格.css
• 等等

现在明显的问题是它意味着多个 http 请求。

正如我提到的，我正在使用自定义框架。
在此框架中包含一个 css 文件，您只需调用

echo load::css('name');  
echo load::css('another');

会吐出来

<link rel="stylesheet" type="text/css" href="http://site.com/name.css">
<link rel="stylesheet" type="text/css" href="http://site.com/another.css">

现在我想做的就是打电话

load::css('name');
echo load::css('another');

如你所见，我只在最后一个调用 echo，这将输出

<link rel="stylesheet" type="text/css" href="http://site.com/combined/0df4899f90fe7be26f4893b1a4a30eb6.css">

0df4899f90fe7be26f4893b1a4a30eb6 == 'name another'

基本上，

当您调用 load:css('something') 时，它会将名称存储在一个数组中，它会返回值为 md5(implode(' ', $cssArray)) 在 php 脚本处理结束时，它将实际创建具有 md5 名称的组合文件(如果它不存在)。

这意味着对所有 css 内容只向服务器发出一个请求。

谁能看出这种方法有任何潜在问题？
我还计划为 javascript 文件实现这个。
如果我还要实现 css/js 压缩器，我会遇到任何问题吗？

---

Google 缩小？
在做了一些研究之后，我遇到了 google minify。

是否可以改变它，这样你就可以给它一个 css 文件路径数组，让它吐出内容，这样我就可以调用类似的东西

$css = minify::css($cssArray)然后用缩小的内容做我想做的事？

我看到的其中一个有用的东西是重写路径的能力？

Answer 1

好吧，这可能取决于您如何组合样式表。我不确定您的框架如何组合 CSS 文件(按名称、按文件夹或手动)，但浏览器(我不知道 IE)按字面解释每一行，即使它是多余的:

#foo
{
  color: red;
  color: green;
  color: blue; /* This one will be the actual color of #foo */
}

所有这些都被执行了，所以最后一个被解释的就是被渲染的那个。如果你在不同的样式表(我通常使用globals.css、header.css和body.css)中重新定义样式，最后一个会生效，这可能会使您的网站看起来很时髦。

我认为同样的概念也适用于 JavaScript，但我还没有遇到过函数重新定义。