Каков наилучший способ убирать CSS?

Question

Я убираю веб-сайт, который ранее был модифицирован разными людьми в прошлом. Вот скелет страницы у меня есть ..

• test.html
• nav.css
• default.css
• content.css

Я думаю, что CSS может сделать с надлежащей tidyup. Я думал об использовании сброса, как это http://meyerweb.com/

заменить:

*{margin: 0; padding: 0;} 

и может быть разделена на CSS в fonts.css, layout.css

Любые мысли, предложения, как я могу решить эта проблема была бы признательна.

Answer 1

Возможно, вы захотите инкапсулировать свой css в более формальную структуру CSS. Вы можете создать свой собственный каркас, но есть некоторые полезные с открытым исходным кодом рамки CSS, такие как Yahoo, YUI и синий печати CSS http://www.blueprintcss.org/

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

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

Постепенно старайтесь устранить избыточные и неучтенные стили.

Я бы также создал файл debug.css. Возьмите все старые имена стилей и добавьте к ним стиль идентификации. Например:

.myoldstyle {border: solid 1px red}; 

Затем вы можете определить, где используется старый стиль на всей территории сайта. Каждый стиль должен учитываться и переноситься в новую систему.Когда определенный стиль старой системы был правильно перенесен в новую систему, вы можете удалить (или лучше прокомментировать) стиль идентификации из файла debug.css. Вы можете быть уверены, что мигрировали все стили, когда debug.css не показывает никаких побочных эффектов на выходе.

Это может быть трудоемкий процесс, но его систематическое приближение может оказаться полезным.

Кроме того, вы можете начать просмотр своего сайта без каких-либо css. Просто ознакомьтесь с логической и семантической разметкой кода. Наличие чистой базы HTML-кода помогает при отладке стилей стиля.

Что касается организации CSS, я хотел бы разделить на основные категории: расположение, книгопечатание, LookAndFeel, навигационные

хранить всю информацию, относящихся к цвету в листе LookAndFeel стиля. Именно здесь вы потратите больше времени, пытаясь удовлетворить визуальные вкусы и желания клиента. Удобно хранить это отдельную логическую таблицу стилей. Другой материал более функциональный и стандартизированный. Наличие этой абстракции значительно упрощает выделение визуальных эффектов стилей.

И последний совет, ознакомьтесь с плагином Firefox firebug или debbugger от Safari. Они могут отображать вычисленные стили (способ стилей и элементов в конечном итоге определяется как применяются различные стили), и вы можете настраивать конкретные стили в реальном времени на ходу, чтобы вы могли исследовать эффекты определенного изменения стиля в сложном CSS система.

И, самое главное, сохраните отдельный файл ie.css. Это должна быть последняя таблица стилей, на которую ссылаются ваши заголовки. Если вам нужно обойти обходные пути для IE, поставьте их здесь. И выставлять эту таблицу стилей только через условные комментарии.

http://www.quirksmode.org/css/condcom.html

Это самый быстрый способ решения IE 6 задач.

Answer 2

Возможно, хорошее место для начала было бы, прочитав Common mistakes for CSS-designers to avoid? здесь, на Stackoverflow. Как отмечено в этом потоке, файл сброса обычно рассматривается как хорошая идея. Я также запустил бы ваш CSS через W3C CSS Validator, чтобы обнаружить любые предупреждения или ошибки. Также может быть хорошей идеей удалить любые сверхъестественные стили и более длинные ссылки (я боюсь, что единственный способ, которым я знаю, как это сделать, - это вручную, на глаз).

Answer 3

У Firefox есть большое расширение под названием Dust-Me Selectors для удаления классов/идентификаторов, которые не используются. Следует использовать с осторожностью, так как файлы CSS, вероятно, включены из более чем одного места, но это полезная помощь.

Answer 4

Начать использовать SASS и Compass. Смешины, переменные и другие супер приятные вещи. Ваш код css станет сухим и поддерживаемым. Они также хорошо сочетаются с сетками, такими как YUI, Blueprint и 960, и дают вам семантическое преимущество, которое вам нужно.

Answer 5

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

Answer 6

Я очень верю в сброс CSS, в частности, перезагрузку Эрика Мейера, но попытка перехватить сброс на существующий сайт может быть очень сложной задачей.

У вас действительно нет большого количества CSS, поэтому у меня возникнет соблазн объединить все это в один файл и организовать/оптимизировать его вручную.

Отъезд Презентация Натали Даун на номер CSS Systems - прочитайте PDF, так как он включает в себя массу заметок, не включенных в слайд-шоу.