The following article gives 10 CSS tips pulled out from the surveys of 12 top designers.

Writing CSS is an art by itself. The following article will help you to create artistic stylesheets. This article also will explain you the basic characteristics of stylesheets.

Your CSS should not contain any markup tags

Linking an HTML document to an external style sheet may seem silly to an Intermediate or an advanced CSS developer; however this is very important to maintain the website’s consistency on a long term basis. Initially many sites looks very neat and have well organized CSS files but as time goes by the whole site gets littered with inline and internal styles due to short deadlines and immediate updates or sometimes because of website admin’s laziness. As years go by this situation might lead to re-designing of the website which is a waste of money and resource. This crisis situation would not have occurred if the web-admin had updated external style sheet regularly rather than adding inline styles and internal styles. Also note than adding more external style sheets will lead you to the same scenario. So it is advisable to use one external stylesheet for a web-site.

Do not use Hungarian naming notation in your stylesheets or in your HTML pages.

It is very important that you use appropriate and meaningful name when you name your style. The name should be a short definition of you style content. This will help you to understand stylesheets when you review them later. Let’s take the following illustration.

Illustration 1:

.vbgy { color: #369;}

Can you make out anything from the above illustration?

Look at the following illustration. Illustration 1 is just reframed and being illustrated in the following illustration.

Illustration 2:

.message-box {color: #369 ;}

From the above illustration we are able to make out that we are applying a particular color to a message box. So the next time you create a message box and when you search for an existing style in your external css you will easily be able to find out from the external CSS file that you have to apply the illustration 2 style whereas you will have no clue as to where you need to apply the illustration 1 style.

Make it an habit to add comments to your CSS documents.

Adding appropriate comments to your CSS file will help you and other web designers to add or edit existing styles in your CSS files. Lets take a scenario that you have joined in a web-designing project almost at the completion of the project. Comments will help you to easily understand the code developed by your seniors. If your senior had not added comments to the CSS file, it would take more time than the previous case to understand the CSS file.

Use appropriate and most relative comments. Lets take the following example.

Illustration 3:

/*Setting color for all Message boxes*/

Message-box {color: #369 ;}

In the above illustration even without seeing the style you were able to understand that we are going to set a particular color to all the message boxes that you are going to use in your HTML document.

You can also add the following comments in your CSS file or HTML documents that will make your web-site look more formal and organized.

Time stamp and Signature Comments:

It is a regular practice in some organizations to use time stamp and signature comments in their web documents. This type of comment will provide the reader with quick information with details such as who created the document, who updated the document last, and when the document was updated.

Illustration 4 is an example of Time Stamp and Signature comments that are globally used and practiced in many organizations.

Illustration 4:

/*

Document Signature:

**********************

Author of the Document: Archana

Date Prepared : 20/02/2008

Document Version : 1.0

Document Last updated on: 25/02/2008

Document Last update by : Jayanthi

Point of contact regarding the document: archana.venkatesan1986@gmail.com

*/

Document Flow Comments:

Document flow comments helps you make your CSS document and HTML document look more organized. Illustration 5 is an example of document flow comments.

Illustration 5:

/*———————-HEADER——————*/

/*———————-BODY BEGINS HERE———-*/

/*———————FOOTER INFORMATION GOES HERE——————*/

Use Version Control

Version control helps you to maintain your style sheets in a smooth way. Version Control is a life-saver of a web designer/ developer. Some applications like Dream weaver have a built in mechanism for maintaining version control. Dream weaver uses a check in or check out system mechanism that enables the developer or designer to make sure that he does not edit a file that is currently being edited by another developer or designer. Dream Weaver also has the capability to synchronize and merge your local files with your remote files or vice-versa. Sub Version and Concurrent Version System (SVN and CVS) are great tools used by major IT companies for robust management with options like being able to revert or view changes which helps a developer or a group of developers to track changes such as who added or edited or removed the code and also resolves the conflicts.

Expertise your text editor

It is important for a web-developer to master the tools that they use often. In case of CSS, it is the editor that a web-developer or web-designer has to master.

There are wide range editors that a web-designer or web-developer can choose from and be an expertise in the same. Some of the most popular text editors are as follows Notepad, Text pad, Text Mate, Coda, BB Edit, Dream Weaver, Etc. I’m not going to suggest you as to which one to choose. Because each of the above text editors has their own advantages and disadvantages. But choose one of the above tools and master the tool, because we are all aware about the famous saying that “Jack of All Trades Masters none” and is logically applied in this scenario too. Mastering your text editor helps you to save your development time and helps you to be more efficient while creating a flawless stylesheet.

Conclusion:

Being an expert in CSS is not important but organizing your CSS and your HTML document is very important. This will help you to add new enhancements to your website easily. Thus I would suggest you to implement the above 5 tips in your web site which will enable smoother and easier maintenance of your website. Implementing the above 5 tips might seem difficult initially but it will become handy on regular practice

Tags: CSS Tips, Important things to remember while creating CSS, Important things to remember while creating HTML docume, Top 5 CSS Tips