So, I'm going to deal with this as two separate questions.
Common mistakes CSS developers make:
Number 1 - not planning for the future. Too often, developers build something that works *well enough*, and then just add to it as they need to. This works okay in the short-term, but as the site grows the CSS quickly turns into A Big Ball Of Mud. Legacy CSS is a nightmare to refactor, and locating unnecessary properties or selectors is, in the best case, very difficult, and in the worst case impossible. Plan for the long-term. Document well. This will help avoid unexpected errors like IE refusing to read any files after the 31 CSS file limit, or ignoring the end of any CSS file longer than 288KB. You may laugh, but these are very real issues (which are difficult to isolate without experience) that I have seen mature websites encounter.
Number 2 - being too precious. We want to avoid non-semantic class names where possible, and adding extra classes or IDs can feel dirty, and inelegant. However, semantics in class names (unless they are *very* common) are something that only developers really care about - Google and screenreaders couldn't care less. (An exception to this would be something like "bigRedBox" – this is obviously not future-proof). Although not ideal, let's be pragmatic. If you have to use them, presentational classes like "floatRight" are okay. If all they are doing is floating things right, what else would you call them?
Building complex CSS3 selectors to avoid adding classes is rarely the best solution: they are malperformant, often fragile, have poor browser support and are difficult for new developers to understand.
What CSS mistakes might discourage visitors?
Number 1 - (as mentioned by David) designing for a single browser. This doesn't (or shouldn't!) often happen in sites with high traffic, but I have seen it occur. You need to know your audience. Use your reporting tools to figure out which browsers your users are using, and make sure to
test and ensure they have a good experience. Perhaps they only provide 1% of your traffic, but if that equates to 100,000 users a month that is still a figure you need to be considering.
Number 2 – too many files/huge CSS. CSS has much greater performance implications than many people think. Particularly for mobile users, every file downloaded incurs latency and lag in presenting the content. Always work towards best practises, keep files small, use build scripts to concatenate and minify… Above all, minimise the amount of HTTP requests.
I hope this is helpful. There are hundreds more tips like these in the book. ;)
