Thursday, March 28, 2024

Using Structured Processes With CSS to Build a Maintainable Website

There are several ways of doing something and all of them are right in their own way. However, there are some methods that are better than others. With experience, we develop certain procedures that we follow and as we reuse them on new projects, the methods and techniques improve from project to project and we end up with a set of “best practices” of our own.

In this article, I’d like to share some of the techniques I use to build maintainable CSS (and, going forward CSS3) code while building a website. Before I begin, let me clarify that these are not techniques that I have developed. I have picked them up from people I have worked with or from blogs I have read.

Back to the drawing board

Before opening your text editor to type a line of HTML or CSS, put away your computer and pick up drawing pad, a pencil and an eraser. You are going to draft the page structure on paper. Place the logo, navigation area, sidebars, footer etc on the paper. You should also pen down the widths of the blocks and ideally specify the padding and margin the blocks have.

Wondering why I am telling you to use a paper and pencil to do this instead of building the page directly in HTML and CSS? Well the answer is quite simple. There are several ways that you can build the page. Either assign a padding to a container element or specify the margin for the contained element. When you have two elements juxtaposed with a line between them, you can either specify a right border for one of them, left border for the other or insert a new element in the middle. The advantage of the paper prototype is that when you are writing the CSS, you can see the entire page structure and decide which element gets the padding, margin or border, instead of retro-fitting it to the CSS that you build.

Write the HTML markup

Now that the page is laid out on the paper, open up your favorite text editor. If this is the first project, type the standard HTML tags that every page requires. In the body area, type the building blocks that you sketched on the paper. It is important that you keep the markup as simple as possible. It makes the code a lot more manageable. If you are building a website built purely in HTML5, then use can use the new HTML tags introduced in HTML5, but for the rest of us, we will use tags to build the structure of the page. Enter the divs and number or name them so that we can target then from CSS.

A trick I use while building the page structure is to put the ID of the div as the content for the div so that when we view the page in the browser or CSS editor, it is easy to identify the element that you are defining the styles for. And after the CSS is written, it takes a couple of seconds to delete that text from the divs.

Write the CSS

Now that we have the page drafted out on a piece of paper and the markup in place, we are all set to layout the page into make it look pretty.

Reset styles for all browsers

Before we begin styling the page, we should bring all browsers to the same level. Certain browsers set a padding to elements while others set a margin. Images on older versions of Firefox show up with a border by default. To reset all this, use the following CSS:

body
h1, h2, h3,
p, ul, li,
form {
border: 0;
margin: 0;
padding: 0;
}

These are the tags that I usually use in the websites I build, but if you use any other tags, you should add them to the list.

Group tags by their purpose

If you notice, I have divided the tags into 3 or 4 lines. I have grouped them by their purpose. Typographic tags are together, text block tags go together etc.

Some people suggest that you should order the properties alphabetically, but quite honestly, I don’t bother with that. One single block of styles typically won’t run more than 10 to 12 lines, so looking though them is quite simple.

Indent Styles to Highlight Dependency

After defining the styles for giving structure to the page, you will define the styles for elements contained within the main content area, sidebar etc. So the question is how do you order your CSS file? Do you first define all the page level tags and then below them define the styles for the contained elements? Well that is not the best way to do it. You should define the styles immediately below the container element and indent the contained styles so as to highlight the dependency. For example:

/*----=SIDEBAR----*/
    #sidebar {
/* sidebar styles come here */
     }
/*----=BOX1----*/ 
     #box1 {
/* box1 styles come here */
     }
/*----=RELATED ARTICLES----*/
     #related-articles {
/* 'related articles' styles come here */
     }
/*----=MAIN CONTENT----*/
     #main-content {
/* main content styles come here */
     }
/*----MESSAGE BOX----*/
     .msg-box {
/* message box styles come here */ 
     }
/*----=FOOTER----*/
     #footer {
/* footer styles come here */
     }

Using Flags

Indenting styles makes the code so much more readable, and quicker to understand where the dependencies are made very evident. However, when there are several styles, it becomes difficult to find the style you are looking for. The simplest way is to search for it using the search tool that your text editor offers. Now let’s say you are looking for #container, but several elements under #container have be styled using “#container p” etc. So searching for “#con” will result in several lines and you will have to hop through them to get to the right one.

To overcome this problem, you should use flags. For example:

/*--- =CONTAINER----
     #container {
/* container styles defined here */
...

Now simply search for “=con” and you will reach directly to the right block of styles.

Conclusion

In this article, I’ve shared with you the techniques that I use to make my CSS code more manageable and readable by other people. Some people would advice you to use a CSS framework to achieve this, but I prefer building my own framework since I will be able to add only the styles I need–and it also gives you an opportunity to thoroughly understand the ins and outs of CSS.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured