All geek questions in one place

How do we improve performance and unload unnecessary selectors?

Somehow we need to extract cssonly certain selectors from files for better performance! For example, #javascriptand #ideafrom a css file with 540 selectors. We only need a selector that is called from #htmland #page. Any smart 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 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 do we do it better?

You have 2 css files button.cssthat have a kernel button style and colors.cssthat contains a set of colors. You call a html page <a class="btn btn-primary"></a>, and the browser downloads all your color classes danger, primary, successetc. Do you understand what I mean?

+4
source share
1

- , , - , .

"unusedCSS" , , , , .

+1

Source: https://habr.com/ru/post/1619834/

More articles:


All Articles