0

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

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

很抱歉这个问题之前措辞不佳。我想说的是我想要一个包含所有我需要的规则的大型 CSS 文件，所以我只需要加载一个样式表。我知道整本书都会被阅读，但我想知道是否有办法只选择其中的一部分。例如，如果我想.style在一个浏览器上应用，我可以只选择第一行。如果我只想要.second-style，那么我可以选择第二行。类似于图像精灵如何仅选择图像的特定选择以最小化 HTTP 请求。

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

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

4

4 回答 4

2

如果我了解您要完成的工作...您可以通过命名 CSS 并更改<body>元素上的类来实现它：

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

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

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

并不是说我赞成这样做。

于 2013-07-08T21:04:34.973 回答
1

Sprites 用于最小化 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;
}
于 2013-07-08T21:25:50.563 回答
1

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

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

例如，您可以使用 LESS 将样式组织到模块中

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

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

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

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

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

..tada：模块+重组=选择

于 2013-07-08T21:00:17.983 回答
0

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

我建议每个网页有 2 张 CSS 表格：一张用于在所有网页中保持不变的布局，一张用于特定于该页面的布局。这意味着您将加载尽可能少的 CSS，尽管您将有 2 个 HTTP 请求。如果您真的担心 HTTP Web 请求，您总是可以将其全部转储到一个大文件中，尽管我不建议这样做，因为从过去的开发周期中进行任何更改/查找不必要的规则将是一件痛苦的事情。

于 2013-07-08T21:05:55.823 回答