The document discusses CSS best practices for web development. It recommends using a CSS reset to eliminate browser inconsistencies, organizing stylesheets in a logical structure, writing readable CSS code with proper formatting and indentation, keeping CSS consistent through naming conventions, combining similar CSS elements, using multiple classes, using CSS shorthand where possible, commenting CSS code, and avoiding inline styles. It also recommends validating CSS code to quickly spot errors.

What's hot

Viewers also liked

Similar to Css Best Practices

Recently uploaded

Css Best Practices

• 1.
  CSS BEST PRACTICESBy Sachin Chaudhari – Zensar Technologies
• 2.
  Introduction This Presentationis consolidation of the CSS (Cascading Style Sheet) best practices during web development.
• 3.
  Advantages of CSSCSS helps to reduce html code Pages load faster Easy for maintenance Saves time
• 4.
  Types of CSSInline styles Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to. <a href=&quot;&quot; style=&quot;text-decoration: none;&quot;> Embedded/Internal styles Embedded or Internal styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in. <style type=&quot;text/css“> p { color: #00f; } </style> External styles External styles are styles that are written in a separate document and then attached to various documents. External style sheets can affect any document they are attached to. <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styles.css&quot; />
• 5.
  CSS Best PracticesUse a Reset Resets essentially eliminate browser inconsistencies such as heights, font sizes, margins, headings, etc. The reset allows your layout look consistent in all browsers. Example: body, h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } ol,ul { list-style:none; }
• 6.
  CSS Best PracticesOrganize the Stylesheet with a logical Structure lay your stylesheet out in a way that allows you to quickly find parts of your code. So, an example stylesheet might be ordered like this: Generic classes (body, a, p, h1, etc.) /****** header *********/ styles goes here... /****** header End*********/ /****** main content *********/ styles goes here... /****** main content End*********/ /****** footer *********/ styles go here... /****** footer End *********/ /****** common*********/ styles go here... /****** common End *********/
• 7.
  CSS Best PracticesMake it Readable The readability of your CSS is incredibly important, though most people overlook why it's important. Great readability of your CSS makes it much easier to maintain in the future, as you'll be able to find elements quicker. Also, you'll never know who might need to look at your code later on. All on one line .content { background: red; padding: 2em; border: 1px solid black; } on different line .content { background: red; padding: 2em; border: 1px solid black; }
• 8.
  CSS Best PracticesKeep it Consistent Along the lines of keeping your code readable is making sure that the CSS is consistent. develop your own &quot;sub-language&quot; of CSS that allows you to quickly name things. There are certain classes that I create in nearly every application, and I use the same name each time. For example, I use &quot;.dbfl&quot; to float divs to the left. Good Example .dbfl { display:block; float:left; } .dbfr { display:block; float:right; } Bad Example .dbfl { display:block; float:left; } .dbfr { float:right; display:block; }
• 9.
  CSS Best PracticesCombine Elements Elements in a stylesheet sometimes share properties. Instead of re-writing the same properties just combine them. For example, your h1, h2, and h3 elements might all share the same font and color: h1, h2, h3 {font-family: tahoma, color: #333}
• 10.
  CSS Best PracticesUse Multiple Classes Sometimes it's beneficial to add multiple classes to an element. Let's say that you have a <div> having class &quot;box&quot; which defines color and font properties . <div class=&quot;box&quot;></div> Now you want to float it right, and you've already got a class . right in your CSS that floats everything to the right. You can simply add an extra class in the declaration, like so: <div class=&quot;box right&quot;></div>
• 11.
  CSS Best PracticesUse Shorthand while declarations Comment your CSS Avoid Using Inline Styles
• 12.
  CSS Best PracticesValidate your CSS Validating your CSS does more than give a sense of pride: it helps you quickly spot errors in your code. Validation Service http://jigsaw.w3.org/css-validator/
• 13.
  THANK YOU