[English Tutorial] De-Tangling CSS Code

Web page building requires extensive coding and designing. Often, CSS codes are written by people who are new to CSS or do not have adequate practice with CSS. It isn’t as if the coding itself is wrong but that antiquated practices are still in use and these are convoluted and ambiguous thereby increasing the size of the page and total time it takes for the page to load.


Below are a couple of pointers aimed at helping people write better code. These tips aren’t for beginners or intermediate level coders but for coders across all groups. Even advanced coders can gain something because in the field of web design, it is very easy to miss a trick.

Formatting CSS

Formatting code and indenting it gives it a smoother aesthetic appearance. Of course, some would say that this is an vestigial enterprise as formatting simply focuses on how the code looks but formatting and spreading code helps in de-bugging and trouble shooting. It is easier to find faulty code lines or even some elements which do not work.


For example:

Here is the same code after formatting:

selector{ property:value; another-property:another-value; }

It may not look like a very useful tip at first but when you have a whole page of code, it makes it much easier to go over the code. The aim here is to improve the readability of the code and this is not just for the designers themselves but also for others who may be working with the designers in order to build the web page.

Formatting can be done in various ways. Tab can be used for indentation instead of multiple spacebar strikes. The colon and value can be separated and lines can be put between new code lines. The code should be presented in a manner which is not difficult to follow.

This method of doing things is not simply for CSS users but for coders in any language. In CSS, if there is any difficulty in code, never fail to add a CSS comment in order to clarify the reason for the code or to explain the code further. If code is written properly, a designer building that web page can return at any time to work with the code and tinker it for better results. However, if the code is jumbled, then a substantial amount of time will be spent in sorting the code out. Think of it as a wire which gets tangled and then requires a lot of effort to untangle.

Do not write tangled code.

Another good habit to inculcate is to add semi-colons after each rule. CSS designates the semi-colon as the ‘delimiter’ and facilitates more than one rule to be written in a line. In the example of code above, it can be seen that each rule has its own line and its own semi colon. This makes it easy to run quick tests for rules as they can be added to the end of another rule’s line. One may prefer to use inline styles on elements utilizing the style attribute and modular code writing makes it very simple to do so.

Picking IDs and Classes


IDs and classes for elements should be short but descriptive. CSS which is very long is difficult to follow and if it is too short then it becomes open to interpretation and its true cause is lost. Use a single word or two words and definitely not more than three to describe an element’s purpose.

In terms of cases (uppercase or lowercase), it is advisable to stick to a particular method and to follow that method in order to keep the coding in a similar fashion. Multiple changes in style of coding can result in creating confusion.



Share this Post :

No comments yet.

Please Post Your Comments & Reviews

Your email address will not be published. Required fields are marked *