Организация и очистка большого веб-сайта с помощью лучших практик

#html #css #structure #inline-styles

#HTML #css #структура #встроенные стили

Вопрос:

Хорошо, итак, я всегда чувствовал, что хорошо разбираюсь в CSS, пока не получил свою нынешнюю работу. Одна из первых вещей, над которыми они заставляют меня работать, — это очистка всей их веб-системы учета и инвентаризации. Существуют проблемы с перекрестной совместимостью. Система чрезвычайно обширна и насчитывает более 150 страниц. Основная проблема заключается в том, что разработчик на самом деле не использовал лучшие практики при разработке системы (CSS). Система настроена с использованием одной таблицы стилей с более чем 1800 строками кода, которая на самом деле не имеет структуры. Другая серьезная проблема заключается в том, что веб-сайт в основном состоит из таблиц, и многие таблицы, а также другие элементы имеют встроенные стили, в частности, все поля ввода (размеры). Честно говоря, я не уверен, что лучший способ подойти к этому. Очевидно, что я хочу извлечь все встроенные стили из HTML. Но найти наилучший способ сделать это сложно. Есть предложения о наилучшем способе продвижения вперед с этим? Заранее спасибо за вашу помощь.

Ответ №1:

Мой лучший совет — делайте это постепенно, разбивая задачи на управляемые модули, и выполняйте по одному в день. Что-то вроде:

  • Используйте Firebug с расширением Pagespeed, чтобы помочь вам проанализировать эффективность вашего CSS и использовать содержащиеся в нем предложения в качестве дорожной карты для вашего общего рефакторинга.
  • Удалите все существующие встроенные стили, перенеся их, например, во внешний файл temp.css (обновляйте очень часто, чтобы убедиться, что ничего не сломается).
  • Я настоятельно рекомендую взглянуть на работу Николь Салливан с OOCSS и выбрать одну из ее сеток и медиа-объект, большинство сайтов верстаются по шаблонам, которые она очень хорошо описала с помощью очень скудного CSS.

На этот раз у вас есть возможность сделать все правильно, поэтому потратьте много времени на надлежащее планирование этого. Если вы разместите некоторые из них на fiddle, я могу помочь. Будьте осторожны.