Существующие рекомендации по замене (повторному редактированию) CSS веб-сайта без изменения HTML

Question

Я вижу ряд других хороших ответов на вопросы, касающиеся передового опыта CSS по переполнению стека:

• Как управлять CSS Explosion
• Соглашения CSS / Модели макета кода
• Существуют ли какие-либо стандарты CSS, которым я должен следовать при написании моей первой таблицы стилей?
• Какой метод лучше всего привести в порядок CSS?
• Рекомендации - Форматирование таблицы стилей CSS

Но мне кажется, у меня другая проблема.

Я пытаюсь "перекинуть" существующий сайт, который был красиво создан с использованием div и ul, и т. Д., И у него есть хороший существующий файл CSS, но когда я начинаю делать Изменения в CSS Я быстро нахожу, что я нарушаю макет. У меня такое ощущение, что очень трудно понять, как все CSS будут работать вместе и что CSS влияет на родительские и родственные элементы в HTML.

Итак, мой вопрос: «Каковы лучшие практики реорганизации существующего веб-сайта путем замены только CSS и без изменения существующего HTML?» Я не могу изменить классы, идентификаторы, иерархию узлов и т. Д.

Пример конкретного сайта, который я пытаюсь перенастроить: http://demo.nopcommerce.com/.

Существующий CSS может быть настолько сложным / подробным, как этот фрагмент из основного файла CSS:

.header-selectors-wrapper
{
    text-align: right;
    float: right;
    width: 500px;
}

.header-currencyselector
{
    float: right;
}

.header-languageselector
{
    float: left;
}

.header-taxDisplayTypeSelector
{
    float: right;
}

.header-links-wrapper
{
    float: right;
    text-align: right;
    width: 570px;
}

.header-links
{
    border: solid 1px #9a9a9a;
    padding: 5px 5px 5px 5px;
    margin-bottom: 5px;
    display: inline-table;
}

.order-summary-content .cart .cart-item-row td, .wishlist-content .cart .cart-item-row td
{
    border-bottom: 1px solid #c5c5c5;
    vertical-align: middle;
    line-height: 30px;
}

.order-summary-content .cart .cart-item-row td.product, .wishlist-content .cart .cart-item-row td.product
{
    text-align: left;
    padding: 0px 10px 0px 10px;
}

.order-summary-content .cart .cart-item-row td.product a, .wishlist-content .cart .cart-item-row td.product a
{
    font-weight: bold;
}

Буду признателен за любую помощь.

Answer 1

Я бы предложил использовать плагин Firebug для Firefox. Вы можете использовать это для предварительного просмотра изменений в CSS путем редактирования существующего CSS при просмотре страницы в браузере без внесения постоянных изменений в файл CSS. Вы также получите представление о «Каскаде» стилей и т. Д.

Очень удобный инструмент для отладки JavaScript.

Answer 2

crimson_penguin и Jon P оба предложили хорошие инструменты для использования, поэтому я добавлю несколько общих советов для вас.

Вот что я бы сделал в вашей ситуации, хотя это ни в коем случае НЕ РЕШЕНИЕ.

Прежде всего, знайте, как вы хотите, чтобы конечный продукт выглядел. Подготовьте дизайн, чтобы вы знали с самого начала, где вы хотите в конечном итоге. Также не экономьте на деталях: «Чем больше вы потеете на тренировках, тем меньше вы кровоточите в битве»

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

Например:

#navigation {....}
   #navigation #left {....}
     #navigation #left h1 {....}
     #navigation #left p {....}
   #navigation #right {....}

Как только у вас есть дизайн и вы знаете текущий код, начните вносить некоторые изменения. Начните с простых низкоуровневых элементов, таких как блок текста или изображения. Тогда вы можете построить вокруг них. Как упоминалось в двух предыдущих постерах, Firebug (для Firefox) и DOM-Inspector (для Safari / Chrome) могут быть очень полезны, поскольку вы можете попробовать что-то на странице, не делая ничего, пока не увидите, как это выглядит.

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

Answer 3

Если бы я делал это, я бы широко использовал DOM-инспектор WebKit (доступно в Safari или Chrome, щелкнув правой кнопкой мыши на странице и выбрав Inspect Element). Я ожидаю, что это очень поможет, как обдумав структуру узла / класса / идентификатора, так и отладку нового css во время его написания.

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

Answer 4

Мы только начинаем масштабную работу по перерисовке моей работы - около 13000 страниц JSP, а приложение содержит более 1,5 миллиона строк кода.

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

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

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

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

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

С этой целью я уже нашел инструмент, который может делать именно то, что я описываю - он из LinkedIn и называется CSS Blocks . Они упоминают еще один инструмент, который используется для оптимизации CSS под названием OptiCSS (звучит как «оптика»), но, видимо, он не совсем готов к прайм-тайм.

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