10 Quick Tips for an Easier CSS Life

[pagol]

As with most things, a logical and structured approach is the best way to go. Therefore I have put together 10 quick tips (in no special order) to help make your CSS coding as pain-free as possible.

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.

This is covered in depth in this article "No Margin For Error".

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}(see next tip on "classitus").

A common misuse of divs can be found in the following example:
PLAIN TEXT
HTML:

1.
<div id="header">
2.
<div class="bold">Heading</div>
3.
</div>
4.
<div id="subheader">
5.
<div class="bold">Sub Heading</div>
6.
</div>
7.
<div>This is the content</div>

A lot of times the above code can simply be reduced to this:
PLAIN TEXT
HTML:

1.
<h1>Heading</h1>
2.
<h2>Sub Heading</h2>
3.
<p>This is the content</p>

As you can see, by using the correct html to describe the content you give your layout inherent structure and meaning without any extra effort.

6. Avoid "Classitus"

"Classitus" is another made up word similar to "divitus" (as explained above) and refers to the over-use of classes (or id's) 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:
PLAIN TEXT
CSS:

1.
a.link{color:red;text-decoration:none}

PLAIN TEXT
HTML:

1.
<ul>
2.
<li><a class="link" href="#">Link1</a></li>
3.
<li><a class="link" href="#">Link2</a></li>
4.
<li><a class="link" href="#">Link3</a></li>
5.
<li><a class="link" href="#">Link4</a></li>
6.
<li><a class="link" href="#">Link5</a></li>
7.
<li><a class="link" href="#">Link6</a></li>
8.
</ul>

All the links have been given a class of .link in order to style them and is completely unnecessary. If we apply an ID or class to the UL instead, we can target all the anchors within that ul without having to add any extra classes at all.
PLAIN TEXT
CSS:

1.
#nav a {color:red;text-decoration:none}

PLAIN TEXT
HTML:

1.
<ul id="nav">
2.
<li><a href="#">Link1</a></li>
3.
<li><a href="#">Link2</a></li>
4.
<li><a href="#">Link3</a></li>
5.
<li><a href="#">Link4</a></li>
6.
<li><a href="#">Link5</a></li>
7.
<li><a href="#">Link6</a></li>
8.
</ul>

As you can see we get the same effect and save considerably on mark-up and readability. A lot of times the ul may be unique in a section anyway and you can use the parent id without even having to add an id to the ul. (Remember that id's are unique and can only be used once per page.)

7. Validate 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/css then validate regularly during development so that you can be sure the code you are using is correct; that will allow you to concentrate on getting the design right.

Do not wait until you have finished coding the design as you may be using features that are not appropriate and will result in a lot more work than necessary. Validating frequently will also catch simple errors like typos which will always creep into the code when you are not looking.

8. Rationalize your code

At every stage during development ask yourself whether you need that extra div wrapper or not. Can existing elements be utilised for background images without adding extraneous code?

Thinking ahead and planning your layout beforehand will often lead to more concise code and an easier-to-manage layout.

9. Flexibility

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. With this in mind try to allow for some flexibility in your design so that things like text resizing issues don't break your layout. Don't make everything a fixed height/width or at least use ems to allow the layout to expand when text is resized.

With a little thought and patience you can still make your page look good and satisfy accessibility requirements.

10. Browser support

A designer's lot is often not a happy one due to the variance in the display offered via various browsers. There is no easy answer to this question (apart from the tips already given) and my method of working is as follows.

First of all decide with your client (or yourself) what browsers you are aiming to support. This will of course be based on many factors (which we won't go into here) but could be as simple as checking your server stats to see who your visitors are.

Once you have decided what browsers to support then make sure that you have access to these browsers in some way. The easiest way is to download the browser you need so you can test locally.

If you can't download the browsers for one reason or another or you need to test on another platform, then there are a number of sites that will offer remote access or screenshots. Some of these require payment and some of the simpler ones are free (a quick look on Google will soon sort you out).

Once you have decided what browsers to support it is time to start coding then you must check your design at every stage in the browsers that you want to support. This means writing a line of code then firing up at least 3 or 4 browsers to check. As you get more experienced you will soon learn what is likely to work and what doesn't and you can check less frequently.

If you take this approach of checking at every stage then you will soon find out what works and what doesn't and identify problems straight away and determine the cause is immediately. This would not be the case if you waited until you had finished and then checked the design. It could take hours (or days) to identify where the problem is and what is causing it. It may in fact be too late to fix it because you have built the whole page on a function that only works in one browser and you would have to start again from scratch.

By checking as you go you eliminate this problem and quite often a small change in design at each stage will accommodate nearly all the browsers you need to support without needing to hack. You can't make these small tweaks and changes in design if you wait until the end.

The above tips for css coding aren't in any special order and most are just plain common sense. If you follow the advice given you will make your web design life a lot easier and less stressful.


*** thanks Paul
http://www.search-this.com/2007/03/26/1 ... -css-life/

[Tashlima]

nice one, i read this before and want to read it everytime i get confused.

[pagol]

r a TAS mami bayper na... ak ak jon ak rokom koi... amar motay kono rules nai.. jay jamnay koray santi pai.. like amar nejay style totally different... but clean.. and ami multi level css use kori bayshe.

css, w3c almost kichu e monay nai akon r....................

[Tashlima]

mama valo bolsen "bayper na!!!"

[parthasarker]

Very useful topic.. Some of them I follow from now I will try to follow them all.