CSS Coding Tips

As with most things, the best way to approach things is in a logical manner. Here we have 9 tips to help you with CSS coding.

1. Best to be Simple
This may sound like the stating the obvious but there is no point using complicated coding to achieve your designs. Only too often we see designers going overboard with complicated layouts and in the end only finding out the user is put off the website.

2. Don’t use hacks
This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. Apart from browsing compliance. If you find that you have hit a problem you are finding hard to solve do some research – you can find a lot of information on Google if you look properly.

3. Take care of margins and padding
All website browsers will apply default padding and margins and the amount that the browsers apply can vary a lot. So you need to control this on all the elements you write.

4. Avoid using too much absolute positioning
Most novices to CSS quickly latch on to absolute positioning because it is pretty easy to use. What you will find though is absolute layouts have a number of problems, you will see that the main problem is that absolute elements will be removed from the flow.

5. Avoid “divitus”
Divitus sounds like a strange word (and it sounds like a disease) it is now commonly used by designers and developers to refer to CSS style sheets that have too many divs and not enough semantic html. Semantic html is just a term to mean use the best html possible on a layout that you are working on and don’t use divs for everything.
e.g. p,h1,h2,h3,h4,h5,h6,ul,ol,dl etc…

you can use divs to divide the style sheet into sections or if there are no better solutions available.

e.g. #top-section h1 {color:red}(see next tip on “classitus”).

Here is an example with a very common misuse:

PLAIN TEXT
HTML:
<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>

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

PLAIN TEXT
HTML:
<h1>Heading</h1>
<h2>Sub Heading</h2>
<p>This is the content</p>

From looking at the above you will see buy using the right html code to describe the content you give your layouts structure and meaning with hardly any extra effort at all.

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.Rationalize
A common example of misuse of classes is shown below:

PLAIN TEXT
CSS:
a.link{color:red;text-decoration:none}
PLAIN TEXT
HTML:
<ul>
<li><a class=“link” href=“#”>Link1</a></li>
<li><a class=“link” href=“#”>Link2</a></li>
<li><a class=“link” href=“#”>Link3</a></li>
<li><a class=“link” href=“#”>Link4</a></li>
<li><a class=“link” href=“#”>Link5</a></li>
<li><a class=“link” href=“#”>Link6</a></li>
</ul>