Question

这不是我认为存在的东西，但看看这是否可能总是很有趣。我很好奇我是否可以拆分样式表并调用它的某些部分。例如：

.style { color: red; }
.second-style { color: green; }

很抱歉此问题的措辞有多么糟糕。我想说的是我想要一个包含我需要的所有规则的大型CSS文件，所以我只需要加载一个样式表。我理解整个事情都会被阅读，但我想知道是否有办法选择它的某些部分。例如，如果我想在一个浏览器上应用.style，我可以只选择第一行。如果我只想.second-style，那么我可以选择第二行。与图像精灵的方式类似，只选择图像的某个选择以最小化HTTP请求。

希望这个问题现在更有意义。

编辑我想要这样一个选项的另一个原因也是管理IE条件评论，因为越来越多的客户要求浏览器兼容性。

Answer 1

如果我理解你要完成的任务......你可以通过命名CSS然后更改<body>元素上的类来实现它：

.classname-a .style { color: red; }

.classname-b .second-style { color: green; }

<body class="classname-a">
....

不是我赞同这样做。

Answer 2

你可能想看看LESS http://lesscss.org/

当然@import也可以提供帮助，但LESS更灵活，因为它不仅可以帮助你组织你的CSS，还可以支持变量等等。

你可以用LESS做的是将你的风格组织成模块，例如

typography.css
sprites.css
style1.css
style2.css
forms.css
..etc

这主要是出于组织原因，之后您可以组合您的模块以生成一个大的CSS文件，然后您可以在您的网站上使用。

现在假设你想要一个使用style1和typography的文件..所以只需创建一个名为variant1.css的文件，其中包含

@import "style1.css"
@import "typography.css"

现在variant1.css将包含您列出的2个css文件的内容

.. tada：modules + recombination = choices

Answer 3

精灵用于最小化HTTP请求的数量。通过组合和缩小CSS文件，您基本上可以做同样的事情，因为您将提供一个CSS文件，该文件将被用户的浏览器缓存。

此外，不要加载带有条件注释的样式表，只需添加一个类：

<!DOCTYPE html>

<!--[if lte IE 7]><html class="bad-ie" lang="en"><![endif]-->
<!--[if IE 8]>    <html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]>    <html class="ie9" lang="en"><![endif]-->
<!--[if gt IE 9]> <html class="good-ie" lang="en"><![endif]-->
<!--[if !IE]> --> <html class="not-ie" lang="en"><!-- <![endif]-->

并定位样式表中的浏览器：

.bad-ie body {
    font-size: 100px;
    color: red;
}

Answer 4

据我所知，这是不可能的。如果我理解你想要的东西并且它是可能的，那么它将不是非常有效，因为你必须通过整个CSS表来查找加载时每个页面适用的规则。

我建议每个网页有2个CSS表：一个用于所有网页中不变的布局，另一个用于该页面。这意味着您将加载尽可能少的CSS，尽管您将有2个HTTP请求。如果您真的担心HTTP Web请求，您可以随时将其全部转储到一个大型文件中，但我不建议这样做，因为从过去的开发周期中进行任何更改/找到不必要的规则将是一个PAIN。 / p>

CSS“spriting”样式表的内容？

4 个答案: