If you are inquisitive about learning and implementing CSS, then you must do it the right way, the way professionals do.<\/p>\n
Sometimes it\u2019s the result of sloppy committal to writing from the beginning, and thanks to various hacks and changes over time.<\/p>\n
CSS could be a language that is employed by almost each developer for some purpose. Moreover, it is a language for which we have a tendency to typically view as granted, it’s powerful and has several nuances that may facilitate (or damage) our styles.<\/p>\n
1. Create it Readable<\/strong><\/p>\n The readability of your CSS is necessary, although the general public overlooks its importance. Nice readability of your CSS makes it a lot easier to keep up with the future, as you will be able to notice components faster.<\/p>\n Note:<\/strong>\u00a0Usually while\u00a0writing CSS, most developers adopt one of the following approaches.<\/p>\n Approach 1:<\/strong> All on one line as below:<\/p>\n [java] Approach\u00a02:<\/strong> Each style gets its own line as below:<\/p>\n [java] Both practices square measure is acceptable, although you may usually notice that way two despises way one! Simply keep in mind – opt for the tactic that appears best TO YOU. This is all that matters.<\/p>\n 2. Use Reset and Normalize CSS<\/strong><\/p>\n Most CSS frameworks have an option to reset them. If you are not aiming to use the existing framework reset CSS \u00a0one, then a better option will be to set them to reset or normalize. Resets or Normalize CSS eliminate browser inconsistencies like heights, font sizes, margins, headings, etc. The reset permits your layout to look consistent all told browsers.<\/p>\n Find different type of Reset CSS from here: http:\/\/cssreset.com\/<\/p>\n 3. Organize the Stylesheet<\/strong><\/p>\n It is smart to put your stylesheet come in the simplest way that permits you to realize elements of your code quickly. I like to recommend a top-down format that tackles designs as they seem within the ASCII text file. So, an associate degree example stylesheet could be ordered like this:<\/p>\n i) Generic Element (body, a, p, h1, etc.) Also, use commented CSS like below:<\/p>\n [java]
\n.example{background:red;padding:2em;border:1px solid black;}
\n[\/java]<\/p>\n
\n.example {
\n background: red;
\n padding: 2em;
\n border: 1px solid black;
\n}
\n[\/java]<\/p>\n
\nii) .header
\niii) .nav
\niv) .wrapper<\/p>\n
\n\/****** header ******\/
\nstyles goes here…
\n\/****** navigation ******\/
\nstyles goes here…
\n\/****** main content ******\/
\nstyles goes here…
\n\/****** footer ******\/
\nstyles go here…
\n[\/java]<\/p>\n