МЕНЬШЕ / САСС CSS напротив минификации / оптимизации? - PullRequest
Новая
       5

МЕНЬШЕ / САСС CSS напротив минификации / оптимизации?

5 голосов
/ 19 августа 2010

Интересно, могу ли я сказать, что LESS / SASS CSS "препроцессоры ( я думаю, что они называются? )" - это противоположность оптимизации как минификация?Интересно, будет ли заметное влияние на производительность?или вы думаете, что простота разработки важнее?

Я спрашиваю об этом, потому что то, что генерирует LESS CSS, - это что-то вроде 

body #div1 #div2 p
body #div1 #div2 p a:link, body #div1 #div2 p a:visited
...

, и я думаю, что это может немного раздувать мой CSS,как видите, такая специфика не требуется, и это затрудняет чтение CSS (по крайней мере, то, что я вижу в firebug).

Ответы [ 4 ]

4 голосов
/ 20 августа 2010

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

Используя новую директиву @ extend , вы можете уменьшить избыточность в своем CSS, применяя принципы OOCSS и, таким образом, улучшать производительность. Вот хорошая статья, чтобы начать с @ extend . И еще несколько ресурсов OOCSS:

Большим преимуществом @extend в Sass является то, что он требует ручного усилия, связанного с применением OOCSS, и делает его чудесно безболезненным и легким.

Наконец, как указала Андреа, в Sass есть множество вариантов минимизации CSS (см. : сжатый стиль ), так что в целом у вас есть довольно мощный набор инструментов для не только повышения производительности. как разработчик, но и улучшая производительность вашего CSS. Для примера этого в действии посмотрите, как Крис Эппштейн, автор Compass и основной вкладчик Sass, реорганизует таблицу стилей Digg с 125 строк кода до 85 строк кода ( снижение на 32%).

2 голосов
/ 20 августа 2010

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

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

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

1 голос
/ 20 августа 2010

В зависимости от параметров , SASS может выдавать вывод в разных стилях.Для производства вам нужно установить стиль вывода на «компактный».

0 голосов
/ 13 декабря 2010

Существует аддон firebug для sass, который должен облегчить чтение.В любом случае вам не нужно напрямую читать вывод.

Sass, less, и xCSS будет генерировать больше вывода, но я бы не назвал это блатом.

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

Таким образом, вы должны взвесить начальный объем вашего хорошо отформатированного файла sass / less с рукописным CSSфайл, который был отредактирован несколько раз.

Еще одним преимуществом sass является то, что ваш HTML становится меньше.Вам не нужно добавлять имена классов в код, чтобы компенсировать плоскую, глобальную структуру CSS.

...