Существует так много, что можно сказать о передовых методах для CSS. Я постараюсь придерживаться основных моментов.
Использовать сброс CSS.
Попробуйте удалить действительно общие операторы CSS, такие как h1 {} и #container em {}. Вам гораздо лучше использовать h1.section-title и #container em.important {}, потому что таким образом, если вы решите использовать h1 или em другим способом где-то в вашем документе, вам не нужно беспокоиться о переопределении любого существующего кода .
Не будьте слишком конкретны в своих селекторах CSS, если это не нужно. Вы действительно должны иметь высокую степень специфичности, если нахождение в определенном разделе изменяет способ отображения элемента. В противном случае, чтобы сделать ваш код для вашего block класса многоразовым, во многих случаях #container .content .block ... может быть уменьшен до .block ....
Найдите общие черты в вашем CSS и посмотрите, можете ли вы создавать повторно используемые классы. Если у вас есть похожие блоки class="favorites" и class="popular", превратите их в class="block block-favorites" и class="block block-popular" и поместите общие черты в .block.
Привыкайте к тому, чтобы области в вашем CSS имели автоматическую ширину (это можно сделать неявно), чтобы они увеличивались до ширины ваших контейнеров. Это невероятно облегчает перемещение разделов из узкой части вашего сайта в широкую часть вашего сайта без необходимости изменения какого-либо кода.
Комментирование вашего кода и разбиение его на разделы обычно помогает сделать код более читабельным.
Вы будете удивлены, насколько чище выглядит ваш код, когда вы реализуете более мощные селекторы CSS. Большинство из них совместимы с разными браузерами (Internet Explorer 7 и более поздние версии).
Некоторые ценные ресурсы: Когда я могу использовать ... - Режим причуд на CSS селекторах - w3 на CSS селекторах
Ответ перенесен из:
Рекомендации по очистке существующих CSS / неиспользуемых стилей