Menu
Somehow we need to extract from css files just specific selectors for better performance! For example, #javascript and #idea from a css file with 540 selectors. We need just the selectors which is called from #htmland #page.
Any clever js code?
Example
<!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>
How can we do that in an better way?
You have 2 css files button.css which contains core button style and colors.css which contain a set of colors. You call in your html page <a class="btn btn-primary"></a> and the browser load all your color classes danger, primary , success etc . You understand what I mean?
329
A unnecessary selectors is a selector that is never used, but the website is dynamic so there is no programatic way to find out.
Use the plugin "unusedCSS" for chrome to find out what selector is maybe never used.
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
