" startxlabs"
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.
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.
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.