css - 如何将元素上的所有 CSS 规则组合在一起

Question

对于使用 jsfiddle 或 cssdesk 之类的网站，我如何将适用于我的元素的所有 css 规则集中在一个地方？我的 CMS 有大量作用于相同元素的 CSS 文件。

score 1 · Accepted Answer

不确定我是否正确理解了这个问题，但我想你是在问如何在你自己的网站上应用的小提琴上应用所有相同的样式。如果是这种情况，那么在 jsFiddle 的左侧导航中，有一个 Add Resources 选项。如果您的网站是公开的，那么您可以在那里输入指向您的 css 文件的直接 url。

然后，您在小提琴中输入的任何 html 都应在运行时从结果中应用的那些 css 文件中获取样式。

score 1 · Accepted Answer

使用 Firefox 的内置检查器（不是 firebug）来检查元素。在为检查员弹出的列中，选择“计算”选项卡。

突出显示您想要的所有样式，然后右键单击并选择，复制选择。

转到您的 jsFiddle 或 CSSDeck，粘贴属性，并用您的规则将其包围：

h1 { ...你复制的东西在这里...}

注意：您需要在所有属性的末尾添加分号。

score 0 · Accepted Answer

脑海中浮现出两个答案：

首先是简单地将您的 CSS 文件从您的笔记本电脑上传到某处的服务器。如果您可以从路由器打开端口 80 到本地计算机，您也可以在笔记本电脑上运行网络服务器。您可以从No-IP Free 之类的服务中获取指向您 IP 地址的静态 URL 。
在计算机上编写 CSS 时，请使用 CSS 预处理器，如SASS或LESS 。这需要对您的工作流程进行一些更改，但从长远来看，您会发现这些更改使 Web 开发人员的生活变得更加轻松。SASS 和 LESS 都理解 vanilla CSS，因此您不必更改现有文件，只需更改扩展名即可。它们还能够在您的计算机上导入其他 SASS 或 LESS 文件，并将它们包含在输出生成的 CSS 中。因此，以 SASS 为例……如果您的主 CSS 文件被调用screen.css，请将其移至screen.scss. 在您进行更改后，SASS 预处理器将通读文件并将其呈现回 CSS。现在，要在您的文件中包含另一个文件，请screen.scss添加@import 'newFile.scss';，SASS 生成的 CSS 文件将包含两者screen.scss和newFile.scss。
遵循这种设计范式还有一个额外的好处，就是将所有 CSS 保存在一个输出文件中。建议您将所有 CSS 保存在一个文件中，以最大限度地减少服务器请求（请参阅我是否仍然需要将所有 CSS 保存在一个文件中？进行讨论）。

3 回答 3