Лучшая практика для работы с меньшим или уменьшенным CSS - PullRequest
Новая
       5

Лучшая практика для работы с меньшим или уменьшенным CSS

2 голосов
/ 13 января 2012

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

Обычно при разработке сайта я пишу свои html и cssзатем начните тестировать его в браузере, посмотрите, как он выглядит, доработайте, перезагрузите и повторяйте весь процесс, пока я не буду доволен тем, как все выглядит.

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

Но если я использую Less (или любой другой метод объединения / сжатия моего CSS), это делает номера строк бесполезными.Я знаю, что мог бы использовать Find для поиска раздела кода, но номера строк гораздо быстрее.

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

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

Ответы [ 4 ]

1 голос
/ 13 января 2012

Я согласен с Джоэлом - вот как я с этим справляюсь.Скрипт сборки минимизирует CSS ( и JS ) до того, как каждый релиз будет передан по FTP.У меня просто есть переключатель в PHP, как: 

if ($config->prod()) {
    // incldue the minfied css
} else {
    // include all the original files
}
1 голос
/ 13 января 2012

Минимизированный CSS действительно должен выходить только в рабочую версию вашего сайта.Когда вы выполняете тесты / изменения и т. Д., Все это должно быть сделано в некоторой тестовой или разрабатываемой версии вашего сайта в области вторичного сервера, где вы можете иметь версию css для номеров строк.То же самое относится и к JavaScript.На производственной просматриваемой копии вы хотите минимизировать ее.В разработке вы этого не сделаете.

В любом случае у вас всегда должно быть 2 копии вашего css.Первая копия является первичной исходной копией, которая является вашей разработкой.В нем есть все ваши правильно отформатированные стили с переносами строк.Другая - самая последняя уменьшенная версия вашего css, которая была запущена в производство.Это позволит вам быстро переключаться между двумя файлами в случае, если вам нужно что-то решить, при условии, что ваш сайт использует какую-то шаблонную доставку (страницы макета, главные страницы или что-то еще).

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

0 голосов
/ 01 апреля 2014

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

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

0 голосов
/ 13 января 2012

Personnaly, я использую скрипт сборки ant для создания рабочей версии:

  1. "конденсирует" несколько CSS-файлов в одном
  2. тогда их минимизируют с помощью компрессора YUI
  3. то же самое для сценариев
  4. (перекомпоновка страницы для указания на вновь созданные файлы)

таким образом, вы делите ваш http-запрос на эти файлы и получаете пропускную способность от 30% до 70%, я бы сказал. зависит также от gzip.

в моем случае версия dev имеет: 18 css весом 178ko уменьшено до 1 CSS в 96ko в рабочей версии

...