Минимизируйте длину CSS, сохраняя стиль данной константы HTML

Question

Предположим, A.css стилей B.html. Какие инструменты / методы существуют для программного уменьшения размера A.css при сохранении его стилевого эффекта на константе B.html? Вот некоторые приемы, которые я мог бы представить, используя такой инструмент:

1. Удалить избыточность в A.css. Например, если один и тот же класс определен дважды, вы можете удалить второе определение, не затрагивая семантику. Это кажется довольно простым.

2. Удалить определения стиля, которые не используются . Стилизует ли A.css элементы, которых нет в B.html? Если это так, удалите их.

3. Комбинируйте стили, где это необходимо . Если A.css определяет стили для div.x и div.y и каждый div, в котором есть класс x, также имеет класс y, можно объединить определения классов в A.css.

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

UPDATE

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

Answer 1

«Существует ли что-то подобное?»

Конечно. См. Инструмент CSS Tidy .

Я не верю, что он удаляет неиспользованные CSS, хотя. См. Sitepoint Dust Me Selector для этого.

Answer 2

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

Answer 3

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

Answer 4

ОК, вам не нужен маленький файл для КБ (использование сжатия gzip более эффективно!), Но для удаления устаревших стилей, что действительно улучшило бы обслуживание.

Я не знаю, существует ли идеальный инструмент, который вам нужен, но Firebug (расширение для Firefox) может сказать, что вам нужны элементы CSS, используемые данным элементом HTML. Не автоматизированный, но все же ценный инструмент.
Вы также можете отредактировать живой CSS, чтобы посмотреть, не изменит ли элемент стиля страницу HTML.

Answer 5

Хорошая идея - сжать вашу CSS .

Это не сжатие в стиле zip, а переписывание CSS (минификация). Конечно, вы также можете использовать mod_gzip или mod_deflate.

Answer 6

Мне не известны инструменты для удаления избыточных стилей, но если вы хотите уменьшить размер файла по соображениям производительности, есть несколько инструментов минифининга:

См .:

• Искусство масштабирования
• Улучшенный минимизатор CSS

Answer 7

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