Most common CSS and HTML mistakes

Below are common mistakes that beginners and even advanced coders make in CSS and html page design. Clean code is very important and will help further your skills as a developer.

Let’s talk about a few mistakes:

1) Code is too long and difficult to maintain

2) Code includes unnecessary or even unused tags or classes etc.

3) Code includes unclosed tags

4) Incorrect doctype

5) HTML and CSS code is not valid

To avoid these and other mistakes I recommend you follow a few rules:

1) Never use inline styling.

It will work, but it’s really difficult to maintain. It can be used only in case the styling for the particular element is unique.

2) After HTML5 became a standard, you can use only one doctype:

<!DOCTYPE html>

Now you don’t have to remember those old monstrous doctypes, such as:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And this one works well...

3) Try to close all your tags to make your code maintainable

You can write:
<ul>
     <li>Some info1
     <li> Some info2
     <li> Some info3

</ul>

that’s good, but for me a better way is:

Maybe, it’s just a habit after xhtml =)

4) Remember to use short hand properties:

Instead of:

#selector {
margin-top: 50px;
margin-right: 0;
margin-bottom: 50px;
margin-left 0;
}

Use:

#selector {
margin : 50px 0;
}

5) Not providing Fallbacks Fonts:

You can use the properties of this font for different operating systems:

font-family: "Arial Black", Gadget, "Nimbus Sans L", sans-serif;
font-family: Arial, "Nimbus Sans L", Helvetica, sans-serif;
font-family: "Comic Sans MS", Monaco, TSCu_Comic cursive;
font-family: "Courier New", "Nimbus Mono L", Courier, monospace;
font-family: Georgia, "Century Schoolbook L", Serif;
font-family: Impact, Charcoal, Rekha, sans-serif;
font-family: "Lucida Console", Monaco, monospace;
font-family: "Lucida Sans Unicode", "Lucida Grande", Garuda, sans-serif;
font-family: Tahoma, Geneva, Kalimati, sans-serif;
font-family: "Palatino Linotype", Garuda, Palatino, sans-serif;
font-family: "Times New Roman", "Nimbus Roman No9 L", Times, serif;
font-family: "Trebuchet MS","Nimbus Sans L", Helvetica, sans-serif;
font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;

Also, for custom fonts you can use font-face and the following services www.fontsquirrel.com and fontface.codeandmore.com, in order to provide font-face generated fonts.

6) Stop using clearing elements, like

<div style=”clear:both”></div>

Use overflow:hidden for parent element.

7) Use all CSS selectors:

:first-child, :last-child, :first-of-type, :last-of-type, :before, :after, :not(s), > F, + F , ~ F and many others.

They can really make your life easier and make your code more tight.

8) Use reset.css file where you can reset all standard properties.

You can use this reset file: www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet

9) Try to organize your CSS code in a logical way.

Write comments inside your code and divide it into blocks.

10) Delete all unnecessary white spaces.

11) Use 0 instead of 0px.

These rules will make your code more readable and much easier to maintain.