5

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?

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Robert Adrian Bogdan
  • 51
  • 5
  • Why you don't use IDE search(e.g. Notepadd++) – Alex Dec 14 '15 at 09:30
  • check these https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS, https://css-tricks.com/efficiently-rendering-css/, http://csswizardry.com/2011/09/writing-efficient-css-selectors/ – Nikos M. Dec 14 '15 at 09:30
  • the truth is some css selectors take longer time to be searched e.g selectors having attributes and attributes pattern matching, or general sibling selectors, the most efficient would be id selectors and class selectors, check this also http://stackoverflow.com/questions/25618138/what-happened-to-the-use-efficient-css-selectors-rule – Nikos M. Dec 14 '15 at 09:31
  • Yes i know that ! But for example : You have 2 css files `button.css` wich contain core button style and `colors.css` wich contain an set of colors. You call in your html page `` and the browser load all your color classes `danger`, `primary`, `success` etc . You understand what i mean ? – Robert Adrian Bogdan Dec 14 '15 at 09:34
  • @RobertAdrianBogdan, yes i see, but that depends on whether new elemnts with new (unused) classes may be added dynamicaly in the page, else if everything is static and hardcoded it would be easy to load only the styles used, e.g via a tailor-made css stylesheet – Nikos M. Dec 14 '15 at 11:48

1 Answers1

2

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.

Grim
  • 1,938
  • 10
  • 56
  • 123
  • I remember the Canoo-Webtests gives infos about unused selectors. – Grim Dec 14 '15 at 10:39
  • I need an javascript script wich do that : Analyze css file, analyze html code and from existing css file, generate temporary css file with only " called selectors" ... And that file will be loaded in browser ( JUST AN IDEA ) – Robert Adrian Bogdan Dec 14 '15 at 10:51
  • Why javascript? Do you like to send a statistic about used selectors to a server? – Grim Dec 14 '15 at 11:18