What to Avoid While Creating CSS?

Clean code stays the foremost priority in any kind of development with CSS no different. With the stampede of CSS coders keying their skills efficiently and remarkably, inconsistencies at the user end have become obvious and for guaranteed. From beginners to experienced, all of us are guilty of committing silly mistakes. While learning is a never ending endeavour, one can improvise on his coding skills at any time.

Not planning in advance

Plan your site layout in advance before plunging directly on the code. If required, pick a pen and paper and start writing your requirements. This is the first and the most common mistakes most CSS developers do. This will give you sufficient time to judge how different elements would behave and thus make important changes at an initial level only. It will save time and prevent bugs from creeping in at run time.

Using giant background images

Standalone big images might not look equally stunning in backgrounds. Most CSS developers use images bigger than the browser capacity. The approach has 3 disadvantages:

The image becomes blurred and the whole idea of displaying an appealing image is lost. It exhausts unnecessary bandwidth and the user will wait long for the image to load properly.  Why not use a small image and give it a ‘tile’ display with CSS?  Repeating images are cool!

Using 10 CSS files!

Waste of effort, time and productivity. Using so many CSS files will make excruciating for other developers to make changes in every file just to achieve a normal modification at the end user interface.  The browser has to make a separate request for every file which means slower processing and overall performance of the design. Use a schema where 1or 2 CSS files can accommodate the entire code.

Ignoring Shorthand code

Shorthand code works effectively in speeding up the overall processing of the page. It helps in condensing the Cascade style sheets and thus discount on the excessive time overloads. Use a simple code ‘padding: 5px 10px 0 10px; ‘

Besides, shorthand code can also be used for declaring fonts, margins and borders.

Not using appropriate comments

Coders often fail to understand the significance until they are entangled in a situation where they have to go back and make changes. It is difficult to remember the logic behind a particular piece of code done yesterday and there can be immediate and unpredictable requirements where modifications are required in the developments done several days back.

Comments help us in tracking the appropriate logic used and quickly browse through the entire work done. Most importantly, a third person who has to review your work will follow the information provided in the comments and proceed.

Using Animation unnecessarily

Animation has a sole purpose of reflecting the essence of one’s enterprise and brand. It’s worth goes much beyond than adding effects on the page. Use animation on your page only if required. Unnecessary use will make the page slower and might malign the actual design of the page you had developed. CSS has a responsibility of garnering web traffic and ultimately business for your brand. Give it the sufficient space it deserves.

White spaces

Believe it or not but may coders leave spaces between elements to make room for future additions. However, once the entire development is finalised they don’t eliminate such spaces. This accounts of unnecessary extra memory used and subsequent increase in the file size. Performance tuning ethics have frequently raised concerns against white spaces.

Not using unique names

Classes and ids are the most vulnerable to complications if not designated with unique names. Unique names help you identify your data objects more easily whenever they have to be edited at a later stage. For an eg, a div specific element can be named as #home right column instead of simply #right.

Not validating your code

Although a website might function normally without validation and with some mistakes, it is still not a good practise to launch your web product without validating the code behind it. To avoid any possible future errors and complications, do a dense validation of the code and eliminate the errors and redundancies instantly.



Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s