見た目や位置に関するID、クラス名とは、#left、.rightBox、.red、.font16pxなどが考えられます。
ではなぜ、見た目や位置に関するID、クラス名は付けない方が良いかというのは、そもそも(X)HTMLは文章の構造を表すものでうんたらかんたらといった理由も有りますが、これらのID、クラス名はサイトの仕様が変更された場合に矛盾が生じてしまいます。
例えば、.redと付けたのは良いが、後から太字にして色も変えた方が良いんじゃないか？と言った意見が出て変更しなければならなくなった。とか、その右寄せになってる部分左寄せに変更したいなどと言った場合に、ID、クラス名を変更しなければならなくなってしまいます。
もちろんID、クラス名を変えなくともスタイルを変更すれば見た目上問題は有りませんが、見た目以外では問題だらけになってしまいます。
個人で趣味のサイトを運営している分には仕様なんて変更しない！とも考えられますが、長く運営していればサイトに手を加えたくなるのは必然だったりしますし、特に仕事においては関わる人間が多数になる事から仕様変更はあって当たり前だったりします。
とはいえ、セマンティックなサイトを追求するならともかく、現実的な視点で考えると見た目や位置に関するID、クラス名を全く使わない事は、中々厳しい部分が有ります。
例えばブログ機能のあるサイトやブログを提供するといった場合に、それを使う人が専門的な知識を有している事はまず無いでしょうから、意味のあるID、クラス名を使ってくださいとお願いしたところで無理がありますし、ブログの機能として好きな色が使える場合も意味のあるID、クラス名を付けるのは困難です。
他に、JavaScriptを使って何かするような場合も、無理に意味を考えてID、クラス名を付けるくらいならその機能を表すID、クラス名を付けた方が分かりやすくなるケースが多いです。
この辺りは、理想と現実のバランスとメンテナンス性などを考えて付けていくことが大事だと思います。
ID、クラス名に悩み過ぎて時間が経ってしまうのも勿体無いので、ボクが最近使ってるID、クラス名を上げておきます。
ざっとこんな感じでしょうか。
他に、最近だと一覧などを表示する場合にxxxListと付ける事が多いです。
例えば、日付とタイトルの一覧の場合dateListや、概要付きの一覧ならsummaryListといった感じで付けてます。
尚、あくまでもこれはボクの付け方なのでID、クラス名の参考としてお使いください。