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

8

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

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

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

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

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

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

Ваш Ответ

5   ответов
3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1

вы можете использовать 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;
        } 
    }
}
0

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

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

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

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

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

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

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

Похожие вопросы