Удалите дубликаты объявлений CSS в нескольких файлах - PullRequest
29 голосов
/ 11 марта 2012

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

Прямо сейчас я столкнулся с чем-то вроде этого:

styles.css
#content {
width:800px;
height:1000px;
background: green;
}

styles.game.css
#content {
width:800px;
height:1000px;
background: blue;
}

И я хочу это:

styles.css
#content {
width:800px;
height:1000px;
background: green;
}

styles.game.css
#content {
background: blue;
}

Общее количество строк во всех файлах превышает 10 тыс., Поэтому методы, основанные на ручном редактировании, не подходят.

Ответы [ 6 ]

10 голосов
/ 23 апреля 2013

Я специально для этой цели написал инструмент под названием csscss .В качестве бонуса он также интегрируется с Sass и LESS.Сделайте попытку и дайте мне знать, если у вас есть проблемы в github.

9 голосов
/ 11 марта 2012

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

https://addons.mozilla.org/en-US/firefox/addon/css-usage/

6 голосов
/ 06 апреля 2013

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

https://npmjs.org/package/css-purge

https://github.com/rbtech/css-purge

3 голосов
/ 13 марта 2013

Эта система заявляет, что делает это: http://sourceforge.net/projects/cssmerge/?source=dlp

Но я не смог заставить ее работать, хотя.

Итак, здесь приведены некоторые инструменты для сравнения CSS-файлов.Это не так быстро, как автоматическое решение, но сделало бы его быстрее, чем при использовании только визуального сравнения.

http://www.diffchecker.com/

http://www.araxis.com/merge_mac/index.html

http://csscompare.codeplex.com/

1 голос
/ 22 марта 2012

Вы можете использовать валидатор W3C CSS для удаления дубликатов свойств.Загрузите файл css, щелкнув «По загрузке файла» и нажмите «Проверить», а затем перейдите к части предупреждений, где вы можете увидеть повторяющиеся свойства.Затем вы можете удалить свои дубликаты, перейдя к определенной строке в файле.

URL: http://jigsaw.w3.org/css-validator/#validate_by_upload

0 голосов
/ 11 марта 2012

Вероятно, самая близкая вещь к тому, что вы ищете, это препроцессор css и импорт css. Мне нравится LESS: http://lesscss.org/

Я бы сделал что-то вроде

styles.css
@site-width: 800px;
@site-height: 1000px;

#content {
width: @site-width;
height: @site-height;
background: green;
}


styles.game.css
@import url("style.css");

#content {
width: @site-width;
height: @site-height;
background: blue;
}

РЕДАКТИРОВАТЬ: я как бы упустил из виду, что вам даже не нужен LESS вообще, или высота и ширина в styles.game.css

Это бы выглядело как

* * 1010
...