Cascading Style Sheets have many advantages and lots of powerful features to offer. But, you need to be careful about certain aspects while designing with this presentation language. As it happens with most things, it is always a best way to embrace a logical and structured approach. Following are some tips and tricks that will make your CSS coding hassle-free.

Stay at an Arm’s Length from Complexity

Think twice before you start using complicated coding for your web design. Most of the time, designers get caught up in their own design and go to great lengths to generate a certain visual effect only to find later on that visitors find it either annoying or unusable. Plan your layout rationally and work from the outside in and from the top to bottom where possible. Look at what containers you will need and break jobs down into smaller units. While good visual design is necessary to attract visitors, you must still have good content and a usable and accessible site. So always use simple code that makes it easier to maintain and often save bandwidth and money.

Use Hacks When Needed

Hacks are employed too often to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design, then you need to do some research first and try to identify the issue that is creating worries for you. In case of a known bug, there is 99% chance of finding a known solution to this bug and you can safely use a hack if required knowing that you are fixing a bug and not just correcting bad coding.

Be Careful About Margins and Padding

All browsers apply default padding and margins to most elements and the amount they apply varies quite largely. Therefore you need to explicitly control the padding and margins on all the elements you use.

Say Good Bye to Absolute Positioning

Most of the beginners quickly resort to absolute positioning as it is pretty straight-forward. However absolute layouts have a number of problems and the biggest problem of all is that absolute elements are removed from the course. Instead you should use mostly static positioning, margins and floats to maintain the flow of the layout. Static positioning is the default and basically means no positioning at all and the elements just take up space in the normal flow of the document. You can use margins to push elements into position or use floats when you want elements aligned horizontally.

Avoid “Divitus” and “Classitus”

Divitus generally refers to layouts that have too many divs and not enough semantic HTML. Semantic HTML means using the correct HTML element for the task in hand and not just using divs for everything. Divs are nothing more than generic dividers of page content. It is always recommended to use an HTML tag like p, h1, h2, ul, ol, dl etc. than a <div> tag. A common misuse of divs can be found in the following example:

<div id=”header”>
<div class=”bold”>Heading</div>
</div>
<div id=”subheader”>
<div class=”bold”>Sub Heading</div>
</div>
<div>This is the content</div>
This code can be simplified like this:
<h1>Heading</h1>
<h2>Sub Heading</h2>
<p>This is the paragraph</p>
Classitus refers to over-use of classes (or ids) when in fact none are necessary. If your page is logically divided then you can target many specific elements without the need for millions of classes. A common example of misuse of classes is shown below:
<ul>
<li><a class= “link” href= “#”>Link1</a></li>
<li><a class= “link” href= “#”>Link2</a></li>
</ul>

This code can be simplified like this:

<ul id= “nav”>
<li><a href= “#”>Link1</a></li>
<li><a href= “#”>Link2</a></li>
</ul>

Keep Validating Your Code

Visit the validator at every opportunity and validate your CSS and HTML especially when learning something new. If you are new to HTML or CSS then validate regularly during development to ensure that you are using the correct code.

Be Flexible in Your Coding

Remember that a web page isn’t the same as a printed page and that ultimately the user has more control over how your page will appear than you do. Allow for some flexibility in your design so that things like text resizing issues don’t break your layout.

Tags: Hassle-free CSS Coding