我们需要以某种方式从 css 中提取文件只是特定的选择器以获得更好的性能!例如，#javascript和 #idea来自具有 540 个选择器的 css 文件。我们只需要从 #html 调用的选择器和 #page .
任何聪明的 js 代码？
例子
<!DOCTYPE html>
<html lang="whatever">
<head>
<meta charset="utf-8">
<title>Another Page</title>
<link rel="stylesheet" href="core.css" required> <!-- Required Core Style -->
<link rel="stylesheet" href="interface-elements.css" partial> <!-- The interface -->
</head>
<body>
<!-- From interface-elements.css we need to load in browser only next elements. Even file contain 540 selectors ! -->
<!-- Let's extract just 3 selectors :
.btn
.title
.dropcap -->
<button class="btn">Do something</button>
<h1 class="title">Huh</h1>
<p><span class="dropcap">L</span>orem ipsum Bla bla bla</p>
</body>
</html>
我们怎样才能以更好的方式做到这一点？
您有 2 个 css 文件 button.css其中包含核心按钮样式和 colors.css其中包含一组颜色。你在你的html页面中调用<a class="btn btn-primary"></a>然后浏览器加载所有颜色类 danger , primary , success ETC 。你明白我的意思吗？
最佳答案
不必要的选择器是从未使用过的选择器，但网站是动态的，因此无法通过编程方式找出。
使用 chrome 的插件“unusedCSS”来找出可能从未使用过的选择器。
关于javascript - 我们如何提高性能并卸载不必要的选择器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34263399/