Home » Web » What to Avoid While Creating CSS?

What to Avoid While Creating CSS?

Reading Time: 3 minutes

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.

(Have been liking our posts for a while? Subscribe now! We’ll make sure that you never miss an update. And talk to our PSD to CSS experts now if you need professional help in your web strategy.)

Varun Bhagat is a technology geek and works in PixelCrayons as a Sr. Technology Consultant. He possesses in-depth knowledge of different web development technology and helps our clients to choose the best technology as per their needs.

Are you ready to turn your idea into reality? Contact Us Now