web-dev-qa-db-ja.com

Twitterブートストラップから未使用のスタイルを削除するにはどうすればよいですか？

私のbootstrapスタイルシートのサイズは約120kbです。

しかし、私はそのスタイルシートコードの25％しか使用していません。

そのspan *クラスは必要ありません。 bootstrap ページのカスタマイズ でカスタマイズしてみました。

グリッドシステムのチェックを外しましたが、フォーム、テーブル、レスポンシブレイアウトにspan1 - span12 classが表示されます。

誰かがそれらのコードを削除するのを手伝ってもらえますか？

csstwitter-bootstrapresponsive-design
21
Giri

ファイルサイズがユーザーの読み込み時間に与える影響についてもっと心配していますか？または、CSSが短い場合は、CSSを読みやすく理解しやすくしたいですか？

いずれにせよ、余分なCSSスタイルをすべて削除することを心配するのにあまり時間をかけないことをお勧めします。使用する予定がないBootstrapの要素をオフにして、カスタマイズしたバージョンをダウンロードします。サイトのライブ/本番バージョンでは、最小化されたバージョンのCSSを使用します。これにより、ファイルサイズ。

コードをもっとシンプルに使いたいだけなら、それは間違いなく理解できますが、Bootstrapチームはそれを整理するのに素晴らしい仕事をしました。少し時間をかけてください。

すべてのspan*参照を完全に削除しようとすると、フォームフィールドの幅を制御するなどの使用する可能性のある機能が削除されることを考慮してください。グリッドを使用していない場合でも、これらは非常に便利です。

3
Voodoo

不平を言うのに1時間苦労した後、私は ncss を単独で試すことにしました、そしてそれははるかに簡単でした。実行するページが数ページしかない場合、または手動で実行してもかまわない場合は、それを実行することをお勧めします。

Uncssページには完全な説明がありますが、要約すると次のようになります。

  1. Node.jsをインストールします。
  2. npm install -g uncss
  3. ncss ページからサンプルファイルをコピーし、拡張子が.jsの名前を付けます。私はそれをuncss.jsと名付けました。
  4. Files配列をhtmlファイルに置き換えます。 （var files = ['my', 'array', 'of', 'HTML', 'files']のように見えます）
  5. スタイルシート配列を自分のスタイルシートに置き換えます。 （stylesheets : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css']のように見えます）。同様に、必要に応じて「csspath」の値を変更します。
  6. node uncss.js（またはuncssファイルと呼ばれるもの）を実行します。最適化されたCSSをコマンドラインに直接吐き出すので、node uncss.js > mynewcss.cssのようなファイルに保存します。

動作を調整するためのオプションがたくさんあります。私はそれらすべてを無視し、それはうまくいきました、しかしあなたがそれらを望むならそれらはそこにあります。私がテストしたページは138kbから9kbになりました。

33
felwithe

私はまったく同じ問題を抱えています！

Bootstrap.cssの未使用のcssスタイルルールをすべて削除するツールを作成しました

その結果、59％ルールが削除され、cssファイルサイズが121KBから59KBおよびGoogle PageSpeed でテストすると、約5スコア増加しました

ソースコードはこちら css-optimizer

7
Tho

Twitter bootstrapはこれらのspan*クラスに大きく依存していると思います。「BaseCSS」の下の「table」チェックボックスを切り替えるだけでも、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); }
}

ですから、カスタマイザーでそれらを削除することはできず、手動でのみ削除する必要があります。

1
Thijs Kramer

Joomlaに必要なシステムであるBootstrap 2を使用したテンプレートがあります。これを手動で行ったところ、簡単に実行できました。Bootstrap CSSファイルは非常にうまく構成されており、セクションごとに整理されています。ファイルの内容全体をbootstrap_unused.cssに削除してから、それをbootstrap_original.cssにコピーしました。

次に、使用されていることがわかっているものをbootstrap_unused.cssから切り取り、順序を維持するように注意して貼り付けました。ほとんどが最初に機能し、ファイルサイズが144KBから14KBに減少しました。次に、フォームなどにいくつかのビットを追加し直す必要があり、最終的に30KBになりました。

将来、他の機能が必要になった場合は、bootstrap_unused.cssから引き戻すことができ、参照用に常にbootstrap_original.cssを用意しています。

1
Nigel B. Peck