blog

Clean HTML/CSS Code Formatting

2008

Jul 31st

published in

Uncategorized

comments

0

Writing clean code is no different than building a car with the wiring under the dash that is color coded, bundled neatly and labeled; it is just all around easier to work with. Un-fomatted code becomes difficult to trouble shoot, find particular lines of code and will certainly upset the next web designer that works with your code – in general it is just difficult to read!

html


If you want an example of what I am referring to, take a page from a blog, online book or any text document. Print one page out single spaced and that does not have proper text formatting (such as paragraph indents, periods, capital letters etc) and print a different page out as double spaced and that has proper text formating. Have a friend pick out one phrase on each page and see how long it takes you to find this phrase on each page. I am sure you will find that it takes quite a bit less time to find the phrase on the page that is formatted properly and double spaced.

Many WYSWIG editors have options to format source code, however these editors do not format very well (and honestly you shouldn’t be using a WYSWIG editor after your first year of coding – you should be able to hand code with a program such as Coda). Even if you use this auto format tool, I recommend further adjusting the code by hand with every document you write.

The idea of hand formatting each line on each page may initially seem as if it will slow you down and take away precious minutes; but in reality it will speed you up for these reasons:

  • Sections of code are easier to find – you will spend less time sifting through cleanly formatted code than “dirty” code
  • Code is easier to Debug
  • Code is more open to commenting; which helps you and future designers
  • Easier to find missing or extra divs when formatted properly

HTML

Clean code formatting includes double spacing on each line, commenting where necessary and using indents to keep opening and closing DIV’s and tags inline with each other. One should create two tiers of code within a page – starting with the head tag and ending with the head tag, and again starting with the body tag and ending with the body tag.

Example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <meta content="meta content goes here"/>

        <link rel="shortcut icon" href="url" />

        <link rel="stylesheet" type="text/css" href="global.css" title="global style"
media="screen,projection" charset="UTF-8" />

        <title> Your Document </title>

</head>

<body>

        <div id="wrap">

                <div id="content">

                        <div id="main">

                                <p>content goes here</p>

                                <p>content goes here</p>

                                <img src="yourimage.gif" width="10" height="10"
 alt="avatar" />

                        </div>

                        <div id="sidebar">

                                <p>content goes here</p>

                        </div>

                </div>

                <!-- Special Note About Footer -->

                <div id="footer">

                        <p>content goes here</p>

                </div>

        </div>

</body>

</html>

The far left edge of the text editor is the root level of the hierarchy. The Doctype and HTML tags are used very little so they are formatted far left. Then the head is the first tag that has sub items – the meta tag, link tag and title tag, are all indented one tab. Since none are nested within each other they are all only indented once. Keep in mind that an opening tag or div should always be indented the same number of tabs as its closing counterpart.

Then at the start if the body tag begins the hierarchy again. The wrap div is the first item nested within the body so it is indented one tab, the content div is nested within the wrap so it is indented two tabs, so on and so forth. Every time a tag or div is nested within another indent one tab. Take a look at the main div and sidebar div – they are both nested within the content div, but are not nested within each other, so they are both only indented one tab from main div. Then the content items within main are on all indented only once from main. You can see how easy this formatting is to read and you should also be able to see how easy it is to tell if a div is missing as the opening and closing divs will always be in line vertically with each other.

CSS

With the CSS file you will want to double space between each of the styles (aka rules) and indent each of the declaration blocks one tab. Using a block format allow for easier readability that inline styles. Example CSS style:


html, body {
        background-color: #322e2f;
        background: url(images/background_body.gif) repeat;
        height: 100%;
        padding: 0px;
        margin: 0px;
}

Breaking the CSS into sections will also help organize the data; at minimum I recommend a section for:

  • General notes
  • Global styles
  • Header
  • Navigation
  • Main Content
  • Footer
  • Various classes & styles

To divide each of the sections create a comment header such as this:


/******************

GLOBALS

******************/

For comments on sections within each main section use:

/* Inner page only */ 

For comment on a particular  style: 

#content {
        width: 972px;
        float: left;
        background-image: url(image.jpg);
        background-repeat: repeat-y;
}  /*here is a note about this item */

Here is the entire example CSS page: 

/**********************************

 NOTES:

 - Naming Convention: ALL ID's are to be named off their parent ID i.e #content -->
 #content_title --> #content_title_title1  

***********************************/

/******************

GLOBALS

******************/

html, body {
        background-color: #322e2f;
        background: url(images/background_body.gif) repeat;
        height: 100%;
        padding: 0px;
        margin: 0px;
} 

/******************

HEADER

******************/

#header {
        width: 972px;
        height: 167px;
        background-image: url(images/background_header.jpg);
        background-position: right;
        background-repeat: no-repeat;
}

/******************

NAVIGATION

******************/

#header_left {
        float: left;
        margin: 0px;
        width: 227px;
        height: 166px;
}

/******************

FLASH AREA & IMAGE AREA

******************/

#flash {
        height: 251px;
}

/* Inner Images */

#inner_image {
        height: 125px;
        background-color: #204e71;
        width: 973px;
}

/******************

CONTENT AREA

******************/

#content {
        width: 972px;
        float: left;
        background-image: url(image.jpg);
        background-repeat: repeat-y;
} /*here is a note about this item */

/******************

FOOTER

******************/

#footer {
        height: 45px;
        width: 972px;
        background-color: #4b7fa6;
        margin: 0 auto;
}

/******************

VARIOUS CLASSES

******************/

.clear {
        clear: both;
}

viagra works like niacin

This is yet another coding technique I wish I would have learned when I began to code web sites as it would have saved countless hours of looking for missing div’s and troubleshooting code issues. Clean code formatting is also about taking pride with your work. The end user may not ever see the source code, but what if a potential employer was looking up a site you coded and decided to view the source? You certainly would not want them to see a jumbled mess of code. It also makes the life of the web developer who comes after you easier when they are working with your code – maybe they won’t string a noose around their neck and hang themselves over a missing div – you could feel good about saving a life. Well, probably not…

I credit this article to the partner in crime that forced me to code in the manner – Trevor Sheridan. Ass.

Download the source files here


melatonin and ulcerative colitis
This entry was posted in Uncategorized and tagged , , , . Bookmark the permalink.

Comments are closed.