CSS Best Practices

I have always tried to write a perfect CSS, but I think nobody can say that they're written CSS is perfectly and optimized. May be, one can say that perfect CSS writing is a myth. But with the skills and experience you can write some good style sheets.

If you look for some suggestions to write a perfect CSS, than might be possible to get many different ways to write a good CSS because everybody will give their own perfect style codes suggestion.

Though I have tried to list down few practical points to write a better style sheet. These points surely will help you to make your CSS less complex, optimized and clean-up.

There are few points which needs to be keep in mind while writing a CSS.

• Stay organized while writing the CSS. i. e. Make sure your header, nav bars, main selectors should come first.
• Make your CSS readable.
• Create a logical structure of CSS. I.e. overrides, margins, links and types, main layout, secondary layouts, form elements, etc. depending on the application structure.
• Make sure CSS classes name must be in small case.
• Use “-” instead of “_”.
• Naming convention of CSS class must be meaningful and useful.
• Use short hand CSS.

        Example:

               margin-top: 10px;

                  margin-right: 24px;

                  margin-bottom: 12px;

                  margin-left: 0;

          Use 

                  margin: 10px 24px 12px 0;

• Use External Style Sheets.
• Use hex color codes instead of color names.
• Try to use Reset.
• Use multiple CSS classes.
• Comment your CSS to make other understand well.
• Group the classes which can be repeat on mostly elements.
• Use margin:0 to make layout in centre.
• Use List to present data in a structured way.
• Shrink CSS file size so that CSS will be lightweight and loading time could be faster.
• Simplify css using equivalences or unique commands.
• Don’t use extra selectors.
• Try to make a library of common css classes.
• Use proper document structure.

CSS is easy to use and lightweight and loads faster. There are many more advantages of using CSS. It helps webpages to make responsive on any devices.

References:

https://hackhands.com/70-Expert-Ideas-For-Better-CSS-Coding/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

https://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners--net-6741

https://www.smashingmagazine.com/2009/08/designing-a-html-5-layout-from-scratch/

http://learn.shayhowe.com/html-css/writing-your-best-code/