如何将元素上的所有CSS规则拉到一起

Question

对于使用像jsfiddle或cssdesk这样的网站，如何在一个地方将所有适用于我的元素的css规则拉到一起？我的CMS有相当多的CSS文件，它们作用于相同的元素。

Answer 1

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

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

Answer 2

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

突出显示所需的所有样式，然后右键单击并选择“复制选择”。

转到你的jsFiddle或CSSDeck，粘贴属性，并用你的规则包围它：

h1 { ......你复制的东西...... }

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

Answer 3

我想到了两个答案：

1. 首先，只需将您的CSS文件从笔记本电脑上传到某个服务器。如果您可以从路由器打开端口80到本地计算机，也可以从笔记本电脑运行网络服务器。您可以通过No-IP Free等服务获取IP地址的静态网址。

2. 在计算机上编写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保存在一个文件中以最小化服务器请求（请参阅Should I still bother keeping all css in one file?进行讨论）。