Утомительная задача рефакторинга 5000 строк CSS. Какие-нибудь советы?

Question

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

Answer 1

оформить sass ... включает в себя возможность конвертировать css в sass. http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html

Файл sass - это файл yaml, который можно проанализировать в файл css. Позволяет использовать переменные и альтернативную организацию ...

пример sass:

  !main_color = #00ff00

  #main
    :color = !main_color
    :p
      :background-color = !main_color
      :color #000000

---

Вывод css:

  #main {
    color: #00ff00; }
    #main p {
      background-color: #00ff00;
      color: #000000; }

Answer 2

Несколько советов:

1. Используйте контроль версий, чтобы при необходимости можно было выполнить откат.
2. Придумайте контрольный список визуальных тестов, которые нужно выполнить после каждого изменения в каждом браузере. Электронная таблица URL-ссылок и вещей, которые нужно искать, основываясь на них, когда вы сталкиваетесь с проблемами (например, «модульные тесты», но не автоматизированные).
3. Сначала используйте специальный beautifier для CSS, чтобы получить все в формате, который вы предпочитаете для фигурных скобок и т. Д.
4. Подумайте об использовании чего-то вроде SASS для "компиляции" вашего CSS по ходу работы.
5. Прокомментируйте чертовски много вещей, особенно когда вы делаете вещи, специфичные для IE6.
6. Позаботьтесь о будущем, создав отдельный файл со специфическими для IE6 директивами, или, по крайней мере, воспользуйтесь способом фильтрации Microsoft для других браузеров.
7. Часто используйте валидацию W3C.

Механически, я бы атаковал это так:

<link type="text/css" href="newhotness.css" />
<link type="text/css" href="newhotness-ie6.css" />
<link type="text/css" href="oldandbusted.css" />

Переместите код из третьего (старого) файла в два других, по мере очистки. Таким образом, вы можете проверять свой код, не беспокоясь о множестве ошибок в старом материале, и вы можете отслеживать свой прогресс, Ctrl-Tab между ними легче, чем между местами в одном файле и т. Д.

(Если вы не можете контролировать разметку для добавления своих CSS-файлов, используйте @import вверху старого файла.)

Answer 3

Начните с нуля!

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

Эти 5000 строк вполне могут быть выражены в 2000 строках современного, хорошо разработанного CSS. Я думаю, что большинство опытных разработчиков CSS сочли бы менее трудным написать 2k строк нового CSS, чем модифицировать 5k строк ужасного CSS.

Answer 4

http://www.codebeautifier.com/

на основе этого:

http://csstidy.sourceforge.net/

Answer 5

Сначала я хотел бы создать набор тестов: автоматизировать посещения страниц (возможно, с помощью Selenium?), Делать снимки экрана, а затем использовать что-то вроде ImageMagick для сравнения этих изображений с эталонными изображениями.

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

Answer 6

Как сказал Триптих, я бы начал с нуля. Также учтите следующее:

• используйте файл сброса CSS для сглаживания кросс-браузерных несоответствий: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
• сделайте так, чтобы он отлично работал в Firefox, затем при необходимости настройте его для других браузеров
• изучить базовый HTML. Как это организовано? Это выложено с таблицами? все DIVs? Семантическая маркировка?
• используется ли CSS для макета или простого оформления (шрифты, цвета и т. Д.)?
• Как только вы это почувствуете, изучите содержание. Распределите по макету и элементам как можно больше, чтобы вы могли идентифицировать все общие элементы и максимально повысить эффективность вашего CSS
• помните C в CSS. Сделайте наиболее часто используемый шрифт основным шрифтом, чтобы другие элементы наследовали его по умолчанию.
• использовать относительные единицы (ems) для размера шрифта, чтобы обеспечить правильное масштабирование текста
• стараться не использовать ЛЮБЫЕ встроенные стили
• используйте Firebug - он позволит вам проверить элемент и увидеть, какой именно CSS действует и откуда взялись правила
• не бойтесь повторно использовать части старого CSS, особенно для таких вещей, как выпадающие меню, которые могут нуждаться в очень специфических заклинаниях для правильной работы
• веселись! начиная с нуля, вы можете применять лучшие практики и учиться на этом. Когда вы закончите, вы, вероятно, вспомните об этом как о хорошем опыте.
• здесь есть презентация, которая поможет вам выбрать подходящее место для решения этой задачи: CSS Systems

Answer 7

Не обязательно CSS, но вот совет: используйте GIT .

• начать с импорта файлов в git;
• зафиксируйте каждый незначительный шаг и запишите, что вы сделали;
• всякий раз, когда вы обнаружите, что вы что-то сломали, вы можете идентифицировать точно такой же шаг, используя git bisect ( хорошее описание );

---

Для дополнительных ударов, поговорим о покрытии кода для CSS , чтобы помочь вам быстро отсеять неиспользуемые правила.

Answer 8

Предложение инструмента: ReSharper от JetBrains. Он автоматически заполняет CSS и переименовывает селекторы по всему сайту из окна редактирования файла CSS .

Answer 9

Использование Dust-Me Selectors Плагин Firefox может быть удобен Это немного похоже на инструмент покрытия кода для CSS.

Answer 10

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

Возьми эту часть и назови ее. Затем сопоставьте все части приложения, использующие этот «шаблон», с правильным HTML / CSS.

Повторяйте, пока не закончите. Разбейте большую задачу на маленькие кусочки.

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