Как удалить неиспользуемые стили из twitter bootstrap?

Размер моей таблицы стилей загрузки составляет около 120 КБ.

Но я использую только 25% этого кода стилей.

Мне не нужен этот класс span *. Я попробовал это, настроив его в bootstrap настроить страницу.

Я не отмечен сеткой, но я все еще вижу span1 - span12 class в формах, таблицах и гибких макетах.

Может кто-нибудь помочь мне удалить эти коды?

Ответ 1

Вас больше беспокоит влияние размера файла на время загрузки для ваших пользователей? Или хотите, чтобы вам было легче читать/понимать CSS, если он короче?

В любом случае, я предлагаю вам не тратить слишком много времени на беспокойство об удалении каждого дополнительного стиля CSS. Снимите флажки с элементов Bootstrap, которые вы не планируете использовать и загружать настроенную версию. Для версии live/production вашего сайта используйте минимизированную версию CSS, которая еще больше уменьшит размер файла.

Если вы просто хотите, чтобы код был более простым для вашего использования, это определенно понятно, но команда Bootstrap проделала большую работу по ее организации. Потратьте немного времени на это.

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

Ответ 2

После часа борьбы с хрюканьем я решил попробовать uncss сам, и это было намного проще. Если у вас есть только несколько страниц, или я не против делать это вручную, я бы рекомендовал это сделать.

На странице uncss есть полные инструкции, но для подведения итогов:

Установлены node.js.
npm install -g uncss
Скопируйте файл примера с uncss и назовите его чем-нибудь с расширением .js. Я назвал его uncss.js.
Замените массив файлов вашими html файлами. (Это выглядит как var files = ['my', 'array', 'of', 'HTML', 'files'])
Замените массив stylesheets на таблицы стилей. (Это выглядит как stylesheets : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css']). Аналогичным образом измените значение "csspath", если вам нужно.
Запустите node uncss.js (или все, что вы назвали своим файлом uncss). Он выталкивает оптимизированный CSS прямо в командную строку, поэтому сохраните его в файле с чем-то вроде node uncss.js > mynewcss.css.

Есть несколько вариантов настройки поведения. Я проигнорировал их всех, и все получилось хорошо, но они там, если вы хотите их. Страница, на которую я тестировал ее, прошла от 138 КБ до 9 КБ.

Ответ 3

У меня точно такая же проблема!

Я написал небольшой инструмент для удаления всех неприменимых правил стиля CSS в bootstrap.css

В результате было удалено правило 59%, размер файла css с 121 КБ до 59 КБ и увеличился примерно на 5 баллов при тестировании мой сайт на Google PageSpeed

Посетите мой проект по адресу: css-optimizer

Ответ 4

Я предполагаю, что бутстрап twitter сильно зависит от этих классов span*. Когда я только переключаю флажок "table" в "Base CSS", я все равно получаю классы span* в скомпилированном css, потому что они все равно отображаются. Взгляните на https://github.com/twitter/bootstrap/blob/master/less/tables.less:

// R.185: Change the column widths to account for td/th padding
.table td,
.table th {
  &.span1     { .tableColumns(1); }
  &.span2     { .tableColumns(2); }
  &.span3     { .tableColumns(3); }
  &.span4     { .tableColumns(4); }
  &.span5     { .tableColumns(5); }
  &.span6     { .tableColumns(6); }
  &.span7     { .tableColumns(7); }
  &.span8     { .tableColumns(8); }
  &.span9     { .tableColumns(9); }
  &.span10    { .tableColumns(10); }
  &.span11    { .tableColumns(11); }
  &.span12    { .tableColumns(12); }
}

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

Ответ 5

У меня есть шаблон с использованием Bootstrap 2, который является необходимой системой для Joomla. Я просто сделал это вручную и нашел, что это легко сделать. Файл CSS Bootstrap очень красиво построен и упорядочен по разделам. Я удалил все содержимое файла до bootstrap_unused.css, а затем скопировал его в bootstrap_original.css.

Затем я вырезал из bootstrap_unused.css то, что, как я знал, было в использовании, старался сохранить заказ и вставлял его обратно. Большая часть его работала в первый раз и уменьшала размер файла с 144 КБ до 14 КБ. Затем мне нужно было добавить несколько бит и частей назад для форм и т.д. И закончилось с 30 КБ.

Если мне нужны другие функции в будущем, я могу вернуть их обратно с bootstrap_unused.css, и у меня всегда есть bootstrap_original.css для справки.