Sniper-CSS, avoid unused styles.
<p>This is a short guide where I want to share how I went from 212kB of CSS to 32.1kB (84.91% code reduction), still using 3rd-party style libraries<br />
and fully maintaining the aesthetics of the App.</p>
<p>This example project was made using <a href="https://astro.build/" rel="noopener ugc nofollow" target="_blank">Astro</a>.</p>
<p><img alt="" src="https://miro.medium.com/v2/resize:fit:700/1*bvE-mIIylRvvKcYlgi6Q2Q.png" style="height:315px; width:700px" /></p>
<p><a href="https://as-next.web.app/" rel="noopener ugc nofollow" target="_blank">https://as-next.web.app/</a></p>
<p>We will go through this:</p>
<ol>
<li>From 3rd-party CSS to custom required-only CSS.</li>
<li>Review and improve other CSS code resources.</li>
<li>Re-think how to write your CSS structure.</li>
</ol>
<p>Let’s start! ✨</p>
<h1>1. From 3rd-party CSS to custom required-only CSS.</h1>
<p>Using styles libraries (ie: <a href="https://getbootstrap.com/" rel="noopener ugc nofollow" target="_blank">Bootstrap</a>, <a href="https://tailwindcss.com/" rel="noopener ugc nofollow" target="_blank">Tailwind</a>) is a common task on a daily Frontend Developer job.</p>
<blockquote>
<p>You will still using them, of course, but this is how I made the best of them to get a <em>boost </em>in my App.</p>
</blockquote>
<p>If you ever tried to improve your site metrics reported by <a href="https://developers.google.com/web/tools/lighthouse/" rel="noopener ugc nofollow" target="_blank">Lighthouse</a>, then you know that some of the recommendations that you get, are to reduce unused styles/scripts code.</p>
<p>Chrome’s DevTools also provides a really interesting tool called <a href="https://developer.chrome.com/docs/devtools/coverage/" rel="noopener ugc nofollow" target="_blank">Coverage</a>, and this can help you to know which sections of code are not used at all in the app after a full interaction with your App*</p>
<p>*Check the docs of Coverage tool to better understand this.</p>
<h2>Where we are.</h2>
<p>I’ll share this example using Bootstrap, and the first thing to note is that I’m not using it as a project dependency but through CDNs, and there is a reason, you’ll see why.</p>
<p><a href="https://betterprogramming.pub/sniper-css-avoid-unused-styles-835abfda3284">Click Here</a></p>