最佳实践Magento CSS文件

Question

我有几个问题，有关使用Magento交付的CSS文件以及进行更改的最佳实践。

首先，我无法找到所有带有Magento的CSS文件的基本描述。例如，什么时候使用reset.css文件？

但是我更大的问题是，为什么Magento几乎在styles.css中做所有事情？将CSS分为几个较小的文件并将其加载到Local.xml文件中的不同视图中，这是一个更好的主意吗？这可以更好地控制元素的样式。

例如，可以创建一个用于简单产品视图的CSS文件，并将该文件加载到local.xml中，另一个用于分组产品。

我遇到的另一个问题是，关于-moz*样式。为什么它们在styles.css中而不是在Firefox特定的CSS文件中？如果我使用Opera（或任何其他浏览器），他们将这种样式显示为错误，因为他们对它们不了解。

Answer 1

但是我更大的问题是，为什么Magento几乎在styles.css中做所有事情？将CSS分为几个较小的文件并将其加载到Local.xml文件中的不同视图中，这是一个更好的主意吗？这可以更好地控制元素的样式。

不，不会更好。单独的CSS文件将导致更多的HTTP请求，这些请求会减慢您的网站。我相信您在这里有2个选择：

1）留下1个大CSS文件，但 缩小它

2）将它们分成几个较小的文件，以提高自己的可读性，并通过使用该文件自动组合它们 Fooman Speedster Magento扩展.

我遇到的另一个问题是，关于-moz*样式。为什么它们在styles.css中而不是在Firefox特定的CSS文件中？如果我使用Opera（或任何其他浏览器），他们将这种样式显示为错误，因为他们对它们不了解。

Afaik这样做是普通实践。在单独的文件中编写每个浏览器特定样式时，还有更多缺点。

例如，只需将其添加到圆角：

.rounded-corners {
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
}

根据访问者使用相应样式的浏览器，将应用于哪个浏览器。不支持这些属性的浏览器只会向您显示方角。

Answer 2

您必须从双方看一看。

• 浏览器，下载和渲染内容
• 开发人员，编写/编辑/管理CSS

浏览器需要在必要时，合并和缩小的最少文件。理想情况下，尽可能少和简单的CSS（即，没有1个以上的层次依赖性）。

但是，开发人员可能难以管理一个文档中的所有内容，或者发现这样的工作效率较低。

这实际上就是为什么存在CSS处理（例如SASS/SILS）的原因。因此，您可以直接，干净和评论的CSS，并随心所欲，但是浏览器获得的是一个组合的文件和优化的文件。因此，这为您提供了两全其美的最好。

实际上，您只需要2个样式纸（打印和屏幕） - 尽管较新的浏览器只能通过媒体查询来执行此操作。

就CSS输入而言，请执行使开发最适合您的事情。但是就输出而言，请尝试确保您拥有尽可能少的文件，优化和删除。