Designs How-To Tutorials

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.

Worth Reading :

CSS Code

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.

Format CSS Codes

For example, the following is standard code without any formatting:





Here is the same code after formatting:





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.

About the author

Husnain Naz

Naaz is a web designer and loves to find new tips and tricks for creativity purposes and likes to share them with the people.

Leave a Comment

Pin It on Pinterest

Share This