How to write good CSS for website

To create a website is straightforward for every website designer but keeping all the necessary aspects during writing CSS for website is too important. Sometimes we write the bulk of CSS for simple styling, this decreases the rendering speed of the website which further creates a new problem related Google ranking or SEO. So, to write a neat and good CSS first we need to understand the core concept of website rendering and flow in which CSS works.

1. Load HTML
2. Parse HTML => Load CSS => Parse CSS
3. Create DOM
4. Display

Styling can cause unneeded re-rendering of website. Some of the important properties which can cause re-rendering are Left,Right,Top,Bottom and mergins. 

Try to avoid usage of Margin property. In place of margin, you can use Transform property. 

Another trick is to use minified CSS, Minifying a CSS file implies the removal of unnecessary characters in the source code to reduce the file size and facilitate faster loading of the site. When a user requests a webpage, the minified version is sent instead of the full version, resulting in faster response times and lower bandwidth costs. It improves the site speed and accessibility and helps the search engine rankings move up.

Try to avoid nesting, Do not nest more than 2 levels.

Take a look on below example.

div{
        width:100px
        }
        div>h1{
        color: #666
        }
  

div>h1>a{  
        text-decoration: none
        }
        div>h1>a>img{
        max-width: 100%
        }

For anchor create a class, for image create a class then write styles for these elements.

Some more tips for better CSS are mentioned below.

1. Use most specific identity for an element, so that DOM can search element easily and avoid traversing all the elements. For that use class for all the elements.
2. Reduce conflicts between elements styling. Try to avoid giving different styles to parent and element itself. It cant be time-consuming to check which one is most specific.
3. Use all the browser prefixes for understandable browser code.

Conclusion

The conclusion of the blog is that we should choose most specific CSS properties so that it does not cause any browser compatibility issues or take time to load in the browser. Best CSS property can load the website fast.