«

»

8 Tips To Help You With CSS Coding

As with most things, the best way to approach things is logically. 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 to often we see designers going over board 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:

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:

HTML:

  1. <h1>Heading</h1>
  2. <h2>Sub Heading</h2>
  3. <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:

CSS:

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

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

All the links you can see have been given a class of .link in order to style them this is not necessary. The best thing to do here is apply an ID or class to the UL instead of the above, all anchors can now be targeted within that ul no extra classes have to be added at all.

CSS:

  1. #nav a {color:red;text-decoration:none}
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 end up with the same effect and save on mark-up. Most of the time the ul may be unique in a section of CSS and you can just use the parent id.

7. Validate

the best course of action is to Valadate your code as often as possible, especially if you are not sure. The validator will normally point you in the right direction with adjusted code fixes etc.

8. Rationalize your code

the best thing to do during the development of a website is to ask yourself QC questions such as, do I need that div or not. Thinking ahead all the time and working out the layout before hand will often lead to a higher quality finish.

Leave a Reply

Your email address will not be published. Required fields are marked *