[TIPS] Problems for beginner's to look out for

VeriTi said:
Q: How do I make some piece of text disappear.
A: This is not an easy question because there is a variety of ways that will not work. Bulletproof method:
selector{
color: transparent; /* This makes text invisible */
letter-spacing: -1ex; /* Optional - makes text overlap itself so it occupies almost no space (little more than one letter */
content: none; /* Optional - for Opera removes whatever was inside originally like there was never anything */
}

Advice: fight your laziness




1) Do NOT use universal selector (*) for configuring font looks unless you have a reason to do it and there is no other way to be done.
2) There is only ONE correct way of using draft options like transition, and here it is on example:
-o-transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
transition: all .3s ease;

Three first lines make sure that it will work for most popular browsers: FF, Opera, Chrome & Safari. The last one puts a standardized way, so if current specification will be accepted, next versions of other browsers will 'catch' it without any need to modify the code.

Also, try not to use some non-standard stuff like linear-gradient because almost always it can be replaced with 1px wide gradient pic made in image editor

And one important thing:
Correct your code manually after you're done. Firebug or other dev tools are not omnipotent and the code you're going to get by autocomplete is often a huge mess. Reviewing a code also increases your CSS skill.