Five Tips To Make CSS Super Fast and Effective

Did you ever think what is the size of your CSS of your site? If the CSS of your site is ballooning, there must be chances that it could be delaying the time of rendering the page

because CSS is the first file that every browser compile or discovers and it will block the page until your CSS is parsed and downloaded.

Here are some five important tips to make your CSS faster.

1.  Use of shallow selector

every parent told their children that shallowness is not a virtue, but in the case of CSS, it is opposite. Always and consistently use the shallow selector it will you trim the kb of a large CSS file here are some given below:

                nav ul li.nav-item
        

this could also be written as

                .nav-item
        

2. Shorthand properties use

This is a very common thing and you will not surprised at how and why the longhand properties we use. I will show you some longhand properties which are given below.

                font-size: 16px;
              line-height: 12px;
             font-family: "Arial", "Helvetica", sans-serif;

above code can be trimmed and tied up like this.

                font: 16px/12 "Arial", "Helvetica", sans-serif;
        

The shorthand properties of font will condense the several declarations and it will convert into one line that takes less space.

3. Preload resource hint use

This is the first thing you have to do on your webpage because preload resource hint will tell your browser to your website css first. Initially, it will fetch CSS assets. you can do preload resource in the <link> tag of HTML.

Or your server configuration as an HTTP header:

Link: ; rel=preload; as=style
 

4. Cull redundancies with csscss

It is ruby based toll csscss it will check the css for all the duplicate rules and it will run a redundancy checker.

                gem install csscss
        

after the installation of you can check your css for the duplicacy and redundancies.

               csscss -v style.css 
        

after this you will how much of space will be saved in your website.

5.  Extra mile with cssnano

for making  the csscss more efficient, you have use cssnano - a node and postcss- dependent tool. cssnano will minifies the css also optimize the code and reduce the size of css

for installation write the below code.

                npm i -g cssnano-cli
        

then for optimization use the below code

               cssnano style.css optimized-style.css 
        

after this you will see it will create gulp file and then run command gulp watch in terminal.