Designs How-To Tutorials

De-Tangling CSS Code

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

CSS Codes - Classes and IDS

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. 

About the author

Admin

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