CSS BEST PRACTICESBy Sachin Chaudhari – Zensar Technologies

Introduction

This Presentation is consolidation of the CSS (Cascading Style Sheet) best practices during web development.

Advantages of CSS

CSS helps to reduce html code Pages load faster Easy for maintenance Saves time

Types of CSS

Inline stylesInline 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="" style="text-decoration: none;">

Embedded/Internal stylesEmbedded 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="text/css“>p { color: #00f; }</style>

External stylesExternal 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="stylesheet" type="text/css" href="styles.css" />

CSS Best Practices

Use 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;}

CSS Best Practices

Organize 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 *********/

CSS Best Practices

Make 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; }

CSS Best Practices

Keep it Consistent Along the lines of keeping your code readable is making sure that the CSS is consistent. develop your own "sub-language" 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 ".dbfl" 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; }

CSS Best Practices

Combine 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}

CSS Best Practices

Use Multiple Classes Sometimes it's beneficial to add multiple classes to an element. Let's say that you have a <div> having class "box" which defines color and font properties .

<div class="box"></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="box right"></div>

CSS Best Practices

Use Shorthand while declarations Comment your CSS Avoid Using Inline Styles

CSS Best Practices

Validate your CSS Validating your CSS does more than give a sense of pride: it helps you quickly spot errors in your code.

Validation Servicehttp://jigsaw.w3.org/css-validator/

THANK YOU