Total Pageviews

Monday 28 November 2016

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.



No comments:

Post a Comment

Microsoft Logo using flexbox and Reactjs

 <!DOCTYPE html> <html> <head>     <script src="https://unpkg.com/react@18/umd/react.development.js" crossori...