Грандиозная задача рефакторинга 5 000 строк CSS. Какие-либо подсказки?

checkout 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; }

http://www.codebeautifier.com/

который основан на следующем:

http://csstidy.sourceforge.net/

Получите редактор кода с хорошей подсветкой синтаксиса. И удачи, не завидую.

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

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

Моя первоначальная мысль заключалась в том, существует ли что-то вроде NCover для CSS, так как было бы удобно увидеть, есть ли ссылки на весь CSS. Быстрый поиск в Google по CSS-коду обнаружил несколько вещей, но вы, возможно, захотите посмотреть сами: http://development.lombardi.com/?p=436

Установите sass, запустите css2sass на 5000 строк css, продолжайте. После того, как вы закончите рефакторинг файла sass, запустите sass2css, чтобы восстановить файл css. Удачи!

Некоторые советы:

1. Используйте контроль версий, чтобы можно было откатиться при необходимости.
2. Придумайте контрольный список визуальных тестов, которые нужно выполнять после каждого изменения в каждом браузере. Таблица с URL-ссылками и вещами, которые нужно искать, опираясь на них по мере того, как вы сталкиваетесь с проблемами (подумайте о «модульных тестах», но не об автоматизации).
3. Сначала используйте 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 между ними легче, чем между местоположениями в одном файле и т. Д.

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

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

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

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

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

• начните с импорта файлов в git ;
• коммит для каждого второстепенного шага,

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

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

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

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

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

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

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

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