Я средний веб-дизайнер (в лучшем случае!), И писать сложные HTML и CSS мне больно. Многое из того, что я делаю со стилями и версткой, - это метод проб и ошибок, а также множество настроек. Я также часто передумал о точно какого цвета я хочу вещей. По сути, я в той же лодке, что и вы.
Давным-давно я отказался от идеи цикла итерации tweak-deploy-test (mvn clean tomcat:deploy занимает 2 минуты в моем текущем проекте), так как в 10-й итерации попытка разобраться с простой проблемой макета и ожидание развертывания привели бы меня не в своем уме. Сейчас я использую две стратегии;
Получить статическую копию HTML, с которым я хочу работать. Обычно это означает развертывание приложения, переход на страницу и сохранение его в рабочем каталоге. Это сохраняет статический HTML, а также любые изображения. Затем я копирую файлы CSS из своего рабочего пространства в рабочий каталог и вручную редактирую сохраненный файл HTML, чтобы указать на эти файлы CSS.
Откройте статическую HTML-страницу в Firefox. Теперь я могу настроить CSS или HTML и просто обновить Firefox, чтобы показать изменения. Время итерации теперь составляет около 1 секунды. Я могу еще больше улучшить свои настройки, используя аддон Firebug. Это позволяет вам манипулировать CSS и HTML из Firefox. Это особенно полезно для правильного определения поля и размера отступа. После того, как я настроил его в Firebug, я вручную отредактировал сохраненный HTML и CSS, а затем обновил Firefox, чтобы убедиться, что я доволен результатом.
На определенных ключевых этапах я вносил изменения в свое рабочее пространство, чтобы отразить изменения в статических файлах. Затем я повторно развернул и проверил, чтобы убедиться, что я правильно понял. Поскольку я использую Firefox для всей своей разработки, я должен уделять особое внимание совместимости браузера, особенно с IE, но обычно это происходит на более позднем этапе.
Edit:
Я не упоминал Javascript, но этот процесс прекрасно работает и для JS!