Я убираю веб-сайт, который ранее был модифицирован разными людьми в прошлом. Вот скелет страницы, который у меня есть.
Я думаю, что CSS мог бы сделать правильный tidyup. Я думал использовать reset как http://meyerweb.com/
для замены:
*{margin: 0; padding: 0;}
и, возможно, разделить css на fonts.css, layout.css
Любые мысли, предложения, как я могу решить эту проблему, были бы благодарны.
Возможно, вы захотите инкапсулировать свой css в более формальную структуру CSS. Вы можете создать свою собственную платформу, но есть некоторые полезные фреймворки css с открытым исходным кодом, такие как yahoo YUI и Blue Print CSS http://www.blueprintcss.org/
Самое приятное в этом подходе заключается в том, что он прилагает большие усилия для устранения проблем с браузером вокруг шрифтов и макета.
В зависимости от того, как далеко вы продвигаетесь, вам, возможно, придется существенно коснуться существующей разметки. В зависимости от того, насколько велико ваш сайт, я бы попытался поэтапно настроить стили и перенести их на формальную структуру CSS. В долгосрочной перспективе это сделает CSS более управляемым и понятным другим разработчикам, знакомым с концепцией структуры.
Постепенно попытайтесь устранить избыточные и неучтенные стили.
Я бы также создал файл debug.css. Возьмите все старые имена стилей и добавьте к ним стиль идентификации. Например:
.myoldstyle {border: solid 1px red};
Затем вы можете определить, где используется старый стиль на сайте. Каждый стиль должен учитываться и переноситься в новую систему. Когда определенный стиль старой системы был правильно перенесен в новую систему, вы можете удалить (или лучше прокомментировать) стиль идентификации из файла debug.css. Вы можете быть уверены, что мигрировали все стили, когда debug.css не показывает никаких побочных эффектов на выходе.
Это может быть трудоемкий процесс, но систематическое его приближение может быть полезным.
Кроме того, вы можете начать просматривать свой сайт без каких-либо css. Просто ознакомьтесь с логической и семантической разметкой кода. Наличие чистой базы HTML-кода помогает при отладке стилей стиля.
Что касается организации CSS, я хотел бы разделить на основные категории: макет, типография, lookandfeel, navigation
Сохраняйте всю информацию о цвете в таблице стилей lookandfeel. Именно здесь вы будете тратить больше времени, пытаясь удовлетворить клиентские визуальные вкусы и желания. Удобно хранить это отдельную логическую таблицу стилей. Другой материал более функциональный и стандартизированный. Наличие этой абстракции значительно упрощает выделение визуальных эффектов стилей.
И один последний совет, посмотрите плагин Firebug Firefox или debabugger Safari. Они могут отображать вычисленные стили (способ стилей и элементов в конечном итоге определяется как применяются различные стили), и вы можете настраивать конкретные стили в реальном времени на ходу, чтобы вы могли исследовать эффекты определенного изменения стиля в сложном CSS система.
И самое главное, сохраните отдельный файл ie.css. Это должна быть последняя таблица стилей, на которую ссылаются ваши заголовки. Если вам нужно обойти обходные пути для IE, поставьте их здесь. И только выставляйте эту таблицу стилей в IE через условные комментарии.
http://www.quirksmode.org/css/condcom.html
Это самый быстрый способ решить проблемы IE 6.
Может быть, хорошим местом для начала станет чтение Общих ошибок для CSS-дизайнеров, чтобы избежать? здесь, в Stackoverflow. Как отмечено в этом потоке, файл reset обычно рассматривается как хорошая идея. Я также мог бы запустить ваш CSS с помощью W3C CSS Validator, чтобы выявить любые предупреждения или ошибки. Также может быть хорошей идеей удалить любые сверхъестественные стили и более длинные ссылки (я боюсь, что единственный способ, которым я знаю, как это сделать, - это вручную, на глаз).
В Firefox есть большое расширение, называемое Dust-Me Selectors для удаления классов/идентификаторов, которые не используются. Очевидно, следует использовать с осторожностью, поскольку файлы CSS, вероятно, включены из более чем одного места, но это полезная помощь.
Я очень верю в сбрасывание CSS - особенно Eric Meyer reset, но попытка трансляции на reset на существующий сайт может быть очень сложной.
У вас действительно нет большого количества CSS, поэтому у меня возникнет соблазн объединить все это в один файл и организовать/оптимизировать его вручную.
Ознакомьтесь с презентацией Натали Даун на CSS Systems - прочитайте PDF, так как он включает в себя массу заметок, не включенных в слайд-шоу.
Начните использовать SASS и Compass. Смешины, переменные и другие супер приятные вещи. Ваш код css станет сухим и поддерживаемым. Они также хорошо сочетаются с сетками, такими как YUI, Blueprint и 960, и дают вам семантический край, который вам нужен.
TopStyle - отличное приложение, которое делает то, что немногие другие инструменты CSS могут сделать с точки зрения очистки кода. Он смог изолировать бесчисленные избыточные стили, правила и атрибуты в наших массивных файлах CSS портала, которые другие инструменты не смогли найти. Это действительно лучший инструмент CSS. Демо-версия имеет небольшие ограничения, но все еще многое делает.