Sure shot tips for easy CSS

[arunpattnaik]

Hello everyone,

Here are a few interesting and sure-shot CSS techniques for beginners to advanced webmasters :-



1. Keep it Simple
This may sound obvious but if you find yourself using complicated coding to achieve your design then you should think again about whether the feature you need is really necessary or if you're just thinking about your design and not your visitors. Too often designers get caught up in their own design and go to great lengths to produce a certain visual effect only to find later on that visitors find it either irritating or unusable.
Complex code is usually the result of muddled thinking. Plan your layout logically and work from the outside in and from the top down where possible. Look at what containers you will need and break jobs down into smaller parcels. I usually start with a page wrapper and then progress logically through the header, navigation, main content and footers etc trying to preserve the flow of the document as much as possible.
While good visual design is necessary to attract visitors you must still have good content and a usable and accessible site. If you find your html and css looks like spaghetti then have a re-think and see if you can simplify it. This will make it easier to maintain in the future and will often save code and bandwidth.


2. Don't use hacks unless its a known and documented bug
This is an important point as I too often see hacks employed 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 first do some research (Google is your friend here) and try to identify the issue you are having problems with.
If you find its a known bug then 99% of the time there will be 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.
I couldn't count the number of times I've seen layouts using hacks when all that was needed was to control the default margins on the page (see next tip).


3. Take care of margins and padding on all elements that you use
All browsers apply default padding and margins to most elements and the amount they apply varies quite substantially. Therefore you need to explicitly control the padding and margins on all the elements you use.


4. Avoid using too much absolute positioning
Most novices to CSS quickly latch on to absolute positioning because it is pretty straight-forward and does what it says on the box. However absolute layouts have a number of problems and the biggest problem of all is that absolute elements are removed from the flow.
This means that when you absolutely place an element then it has total disregard to whatever else is on your page. It will overlap whatever was in that position and will take no notice of other content at all. The result of too much absolute positioning is that you end up having to control everything with absolute positioning and makes for a very rigid and inflexible layout.
The most common problem encountered when using absolute positioning for two or three columns is "How to put a footer at the bottom of all three columns?" The answer is you can't, unless you resort to scripting or use a fixed height for all three columns.
Instead you should look into using 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. If elements flow normally then they have a logical construction and one element follows another without having to position it at all. You can use margins to nudge elements into position or use floats when you want elements aligned horizontally.


5. Avoid "divitus"
Although "divitus" isn't a real word it is now commonly used to refer 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 generic dividers of page content and nothing else. 99% of the time there will be an html tag perfect for the job in hand.


e.g. p,h1,h2,h3,h4,h5,h6,ul,ol,dl etc...


Use divs to divide the page into logical sections or when there is no better alternative. If your page is logically divided into sections that use id's to identify each section then this will allow you to target inner elements in that section without having to over-use classes on each element
e.g. #top-section h1 {color:red}

[trigger]

Thanks for the post. I have been using tables for years and am looking to get into table-less development so these are handy tips.

[smeagain]

Right on the button particularly point 3 which is a major cause of Cross Browser Quirks.

[Arleigh]

Great post. It's my first time to hear the word "divitus". So I become interested to read more of its explanation.