Проблемы CSS. Часть 1

По поводу inline-block элементов и пробела между ними.
А именно про способ: «отрицательный margin»

Еще один подход к решению задачи, очень похож на предыдущий, но с использование отрицательного отступа. Главный его недостаток он не работает в IE 6/7. Плюс нам необходимо убрать отступ с первого элемента, что бы они ровно встали внутри нашего контейнера.

.child {
    margin-left: -0.25em;
}
 
.child:first-of-type {
    margin-left: 0;
}

Нам не нужно удалять маргин, у первого элемента
И более того это работает в IE 6/7/8 если указывать <!DOCTYPE >
Нужно просто использовать селектор +

.child + .child {
    margin-left: -0.25em;
}

Сам я такой метод никогда не использую
Но раз уж автор разбирает проблемы CSS странно, что он указал способ с очищением для :first-of-type

Код CSS «с душком»

Отличные правила написания красивого кода. Всегда и всем советую им следовать.

Правда есть еще кое что, о чем забыл написать автор. Можно добавить еще один пункт, противоположный последнему «Расплывчатые имена классов».

Назовем его «Чересчур точные имена классов»
Эта болезнь известна многим новичкам. Напимер классы:

.blue-nav-button {
    background: #00a;
    float: left;
    color: #fff
}

.column-45 {
    width: 45%;
}

.column-10 {
    width: 10%;
} 

Опытному верстальщику это сразу же будет резать глаз, и, как пишет автор, этого тоже нужно избегать, а если вы встречаете чтото наподобе, нужно переписывать.

Самая очевидная и главная причина этого — это то что вам придется переписывать имя класса(!) в html коде, когда вы захотите изменить дизайн. Напимер изменить ширину колонки на 35%, или кнопку в красный цвет.