Essential Best Practices to Improve Markup and CSS

Whenever we cover CSS articles we’ve got good response from our reader; for e.g. on one line CSS and Magazine style drop cap first letter with CSS. This makes us to write thorough, descriptive and clean articles.

.

If you want to develop great looking websites and want that to be easy to maintain you must follow certain rules in writing markup and CSS. Those sites requires high quality markup and styling. The most fundamental principle to remember while designing is separating presentation and the content or style & markup. Separation is the key a good designer need to build a good markup to produce good CSS.

1. Treat Markup and CSS as development objects
Good markup and CSS is time consuming to produce and minor changes or mistakes can do serious damage to you work. Like any other development artifacts, CSS files should start with a well structured header. Both markup and CSS files should contains a title, a revision, a time stamp, and a description or any other information the designer wants to keep like copyright and license terms.

	/************************************/
	 My Site THEME
	 Copyright 2010, DesignGala
	 URL: www.designgala.com
	 AUTHOR: Mr. S@R0Z
	 DATE: 31 Jan. 2010
	 REVISION: 1.0
	/************************************/

2. Build up a library of most used designs
Starting with a blank page every time would not be very effective. It a time consuming process and it would cost a lot. Rather starting from the scratch you can create certain layouts which can be used time and again like:
• 2-column layout
• 3-column layout
• blog layout
• print layout etc.

3. Define basic guidelines and naming conventions.
Having a set of basic guidelines for how to write your CSS is recommended because it will make your code more logical and standardized. Basic guidelines can consist of any rule you find valuable for you and your team. I would recommend considering the following:

– Hyphens Instead of Underscores: Use lowercase characters to define your class and use “-” or uppercase letters to separate multiple-words classes (e.g. “main-container”, or “mainContainer).

– Use structural naming: Properly name your page segments and avoid at all cost to use presentational naming. (E.g. Use sidebar and not right-column). Presentational naming prevents you from having names in your markup that actually describe what the elements are.

4. Use whitespace carefully but have proper indentation
Whitespace, including spaces, tabs, and extra line breaks, is important for readability of your CSS code. However, whitespace does add to page weight and you should be careful not to add whitespace that is not needed.

To make your code easy to read while you work on it and if you provide it for others to maintain use proper indentation. Code that is not well structured can be almost impossible to read so it is worth the effort to maintain some kind of formatting.

Unmanaged CSS

.div #container { width: 780px; background: #FFFFFF; margin: 0 auto;
border: 1px solid #000000; text-align: left; }

Managed CSS

.div #container
{
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}

5. Use Optimized CSS Code
You can optimize the CSS by grouping selectors that have the same properties. Each selector should be separated with a comma rather than writing same code separately.
E.g.

h2, h3, p, .block {
	font-size: 1.5em;
	padding: 10px 10px 10px 25px;
	margin: 10px 0;
	border: 1px solid #ddd;
	background: #f0f0f0 url(bkg.gif) no-repeat 5px 10px;
}

6. Use Shorthand properties
Like grouping elements to re-use styles makes you write less code you should always use shorthand properties. Several key CSS properties that you use over and over again support use shorthand: margin, border, padding, background, font, list-style, and even outline.
E.g.

/* CSS */
p {
margin-top: 5px;
margin-right: 10px;
margin-bottom:  15px;
margin-left: 20px;
}

//Should be replaced by:
p { margin: 5px 10px 15px 20px; }

7. Set up typography in CSS
It should be clear to anyone that applying style (fonts, size, color alignment etc.) directly in the markup is bad practice and not a durable solution. It may look right but it’s a pain to maintain. Typical Typographic effects in CSS are: Size, Case, Style, Color, Alignment etc.

E.g.

/* Having only CAPs in headers or menus is typography
and should be left to CSS. */
 
<a href="/">FRONT</a> /* Not Directly in HTML like this */
 
<a href="/">Front</a> /* Just content in HTML and Design on CSS */
 
/* css */
a
{
	text-transform:uppercase;
}

8. Validate & fix the bugs

Before putting a new design live you should validate that your CSS is OK and get rid of any mistakes you may have made because even small mistakes in markup and CSS results different outputs in different browsers. A designer should eliminate those bugs to make the product final and perfect. You can use relevant validation tools.

Tools
- The W3C Markup Validation Service
- XHTML-CSS Validator

9. Document your work
First thing you should take serious is in-line comments in the CSS code. A designer can also make separate documentation of the template s/he is developing.

<!-- markup -->
 
<!-- This is how you insert documentation in the code -->
<!-- css -->
/* In CSS this is how you insert documentation in the code */
 
/***** Initialize to 0 *****/
*{
 border: 0;
 margin: 0;
 padding: 0;
}
 
/***** Style for the page header *****/
 
Header{
	…
	}
 
/***** Style for the displaying Menu *****/
menu{
	…
	}