Советы по очистке и поддержанию большого файла CSS

Я только начал эту новую работу, где, как дизайнер, я должен поддерживать CSS-файл для нашего веб-приложения. Сейчас он охватывает почти 7000 строк, весит более 160 КБ и имеет сотни! Важных правил.

Я хотел бы реорганизовать файл, разбить его на подразделы, очистить и унифицировать его синтаксис.

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

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

У вас есть какие-нибудь рекомендации относительно того, как действовать, с чего начать, и стоит ли это даже моего времени?

 BoltClock♦28 мая 2012 г., 16:46
Слегка связано: Как управлять CSS Explosion
 Purpletoucan28 мая 2012 г., 16:46
IMHO Я не думаю, что автоматизированный рефакторинг был бы возможен, потому что это могло быть сделано только в сочетании с полным пониманием логики веб-приложения. Хотя вы можете уменьшить его с течением времени или уменьшить общее количество обслуживаемых байтов, элегантного и быстрого решения не существует. Я был бы рад оказаться неправым!
 Avihay Menahem28 мая 2012 г., 16:38
Я думаю, что лучше просто минимизировать выходной сигнал, потому что вы можете сделать так много путаницы .... попробуйте это: Code.google.com / р / преуменьшать
 tool28 мая 2012 г., 16:44
Приложение построено на Java, скомпилировано в JS. Так что скрипт php работать не будет, но спасибо за подсказку.

Ответы на вопрос(5)

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

 tool28 мая 2012 г., 16:40
Я на самом деле изучаю один из них, возможно, МЕНЬШЕ, но я не хочу переписывать все это, просто очистить его. Например, я уверен, что есть сотни дублирующих правил.
 tool28 мая 2012 г., 16:58
Спасибо за совет, я мог бы иметь 2 CSS во время, чтобы облегчить переход
 Hawken28 мая 2012 г., 16:50
@ tool Может быть, не полная перезапись, но запускать через строку и копировать в новый CSS только то, что действительно необходимо

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

С другой стороны, вы можете начать с нуля и примерно основывать свои стили на оригинале.

То, что я бы порекомендовал, использует утилиту «Inspect Element», такую как Firebug, в Firefox, чтобы увидеть, есть ли какие-либо избыточные стили.

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

Во-первых, проясните стиль с пластиной для варкиhttp: //html5boilerplate.com яснее, это должно устранить необходимость во всех важных правилах! Этот шаблон призван устранить различия в стилях между браузерами.

Затем можно использовать что-то вроде этогоhttp: //lesscss.org чтобы создать динамически управляемую таблицу стилей.

Найдите общие элементы и используйте для них общий класс.

Даже в самых сложных приложениях вам не нужна таблица стилей в 7000 строк.

 Hawken28 мая 2012 г., 18:16
Я бы не использовал шаблоны; он добавляет больше кода, который все равно будет перезаписан.
 Paul28 мая 2012 г., 22:04
Он делает, но, очевидно, благодаря дизайну вы можете сбрасывать со счетов много, цель - настоящая совместимость браузера, которую он стремится дать Я думаю, это хорошее начало, и если вы соберете все в кучу, вы не получите такой небольшой удар.
 Paul28 мая 2012 г., 22:18
Честно говоря, просто используйте плиту или сброс HTML5 / Stackoverflow.com вопросы / 5719424 / ... больше кода, но кого это волнует, гораздо меньше проблем в долгосрочной перспективе

вы можете использовать LESS. Сначала сделайте ваш CSS красивее, используяhttp: //www.procssor.co со своими настройками, затем вставьте его вhttp: //css2less.cc. Возможно, вам придется внести некоторые изменения, чтобы «модульно» кодироват

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

Скомпилируйте CSS из LESS и начните его использовать.

Редактировать

Так что ваш CSS может выглядеть так:

#wrapper #nav { some-rules }
#wrapper #content { some-rules }
#wrapper #footer { some-rules }

#wrapper #content form#register-form { some-rules }

Применить css2less:

#wrapper {
    #content {
        some-rules;
        form#register-form {
            some-rules;
        } 
    }
    #footer {
        some-rules;
    }
    #nav {
        some-rules;
    }
}

И модульно это:

Main.less

#wrapper {
    #content {
        some-rules;
    }
    #footer {
        some-rules;
    }
    #nav {
        some-rules;
    }
}

Register.less

#wrapper {
    #content {
        form#register-form {
            some-rules;
        } 
    }
}
Решение Вопроса

трудным, вот мой опыт 2р, исходя из моего опыта:

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

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

попытаться определить неиспользуемый / избыточный CSS и избавиться от него.

вы можете попытаться сделать селекторы короче (например,.main .foo .bar может подойти как.bar) - это улучшит читабельность и увеличит производительность, но примите это с щепоткой соли и будьте готовы вернуться назад, если что-то начнет ломаться при каждом вашем шаге.

попытаться устранить, если возможно, любой!important - сделать селектор более конкретным, если это необходимо. Сброс CSS может помочь с этим, если большинство из!importantля устранения проблем, связанных с браузером, были сделаны операторы @, иначе введение сброса css теперь потенциально может добавить больше проблем, чем их решить - это если вообще нет сброса css в вашем приложении.

разбить и перегруппировать CSS в разные модули (и файлы, если это поможет) - объектно-ориентированный CSS - это возможный метод, позволяющий сделать вещи более понятными, он лучше всего работает, если вы начнете с него, но он также может помочь вам в рефакторингеhttps: //github.com/stubbornella/oocss/wik является допустимым, но есть альтернативы, которые вы можете рассмотреть, например, SMACSS.

После этого вы можете рассмотреть возможность использования препроцессора CSS, такого какМеньш или Sass, позволяя вам определять переменные и миксины (аналогично функциям), модульность и многое другое - хотя это может оказаться очень дорогой задачей, поэтому оцените ее внимательно, если это принесет вам больше пользы, чем боли.

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

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

То, с чем ты сталкиваешься, является одной из самых сложных задач, так что удачи тебе в этом!

 FelipeAls28 мая 2012 г., 19:51
Большие очки! Я не использую OOCSS в своих проектах, но это все еще отличный способ уменьшить количество правил эти 2 или 7 блоков настолько похожи, давайте использовать один и тот же стиль для обоих) или еще раз подумать о том, почему существует так много разных шаблонов для не так много страниц.

Ваш ответ на вопрос