Как идти о неиспользованных проблемах CSS

Я запускаю несколько спидтестов в блоге, и я всегда получаю жалобы на неиспользуемый CSS. Но это не тот CSS, который я никогда не использую, он просто не используется на этой конкретной странице.

Сейчас я работаю структурированно, но в файле все еще должен быть какой-то CSS, который не будет использоваться, потому что он вам нужен на другой странице.

Я не думаю, что использование разных CSS-файлов на разных страницах - это путь, я думаю, что вам гораздо лучше просто создать один большой файл, который можно кэшировать.

Теперь есть элегантный способ справиться с этим, или вы просто придерживаетесь этого.

Ваше утверждение о том, что вам лучше с одним, большим файлом CSS, является правильным. Скорее всего, он будет иметь размер всего лишь несколько КБ, и его следует кэшировать, так что это не потребует больших затрат. Есть несколько вещей, которые стоит проверить, хотя.

Если какой-то CSS-код используется только на одной странице, в этом случае может быть лучше поместить CSS-код на страницу в некоторых тегах стиля. (Примечание: это может усложнить обслуживание, особенно если позже вы решите использовать аналогичный стиль в другом месте.)

Если вы возьмете свои самые популярные страницы (например, страницы, на которые приходится более 50% просмотров страниц) и обнаружите, что на этих страницах используется только очень небольшое количество вашего CSS, пользователи могут быстрее разделить их на два файла CSS. Теперь новым пользователям, которые посещают ваши самые популярные страницы, загружается намного меньше. На других страницах есть один дополнительный HTTP-запрос, но это не так уж сложно.

Убедитесь, что ваш CSS хорошо оптимизирован. Избегайте потомков селекторов, где это возможно. Если правая часть селектора слишком общая, это может замедлить время рендеринга. Например, .class div {}будет немного медленно, потому что браузер должен проверять каждый <div>элемент на странице, а затем искать дерево DOM до самого верха, чтобы найти (или нет) элемент с классом.

Я думаю, что это недостаток инструмента speedtest, который вы используете: он не просматривает весь сайт и не видит, какой CSS вообще никогда не используется. Если вы можете найти инструмент, который делает, дайте нам знать!

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

Да, это имеет смысл, если только не существует набора страниц, которым требуется дополнительный бит CSS, и в этом случае вы можете включить его в эти страницы.

Есть небольшой удобный плагин Firefox под названием Dust-Me Selectors , который проверяет ваш CSS и сообщает о любых неиспользованных правилах. Тем не менее, он не работает с последней версией Firefox (v8.0), что немного обидно.

PS: Если бы я был тобой, я бы взял CSS Lint с щепоткой соли - есть школа мысли, которая говорит, что ее «рекомендации» педантичны и просто полны излишеств. (Подробнее см. Убедительную статью Мэтта Уилкокса « CSS Lint вреден » ). В лучшем случае, это полностью неофициально… и, давайте посмотрим правде в глаза, нам действительно нужен еще один инструмент / псевдостандарт, чтобы удовлетворить?

Наиболее оптимизированный и масштабируемый способ, который я могу себе представить, состоит в следующем:

1. Создание основного файла CSS для всего, что связано с «глобальной областью действия» (например, дизайн сайта, глобальные классы, библиотеки, плагины и т. Д.).

2. Создание системы, включающей в себя папку, содержащую один уникальный CSS-файл на страницы (только при необходимости). Эти файлы могут иметь то же имя файла, что и страница, на которую они ссылаются, так что вы можете запускать серверный скрипт на каждой странице, который ищет файл CSS в этой папке и добавляет его на страницу, если она есть.

3. Возможно, создание разных CSS-файлов для конкретного браузера, которые вы загружаете только тогда, когда у посетителя есть соответствующий браузер.

Сделав это, вы получите надежный и оптимизированный способ разделения вашего CSS. Да, в главном файле все еще будут неиспользованные правила, но они будут там, где они должны быть с логической точки зрения.

Также имейте в виду, что эти 3 «слоя» CSS-файлов будут кэшироваться как один CSS-файл.