plug-inを作ってみた。RSSWordPress.orggulp-uncssとbootstrap-sassでbootstrapを最適化こんにちは、OOCSS大嫌いおじさんです。詳細は省きますが、Bootstrap-Sassを使って、Sassの@extendを使ってセマンティックな感じに命名を変えたいです。.col-md-6;}みたいな。見た目を変えたければHTMLソースに一切手を触れずに、.col-md-8とかに書き換えれば充分という。本来、こういうのがCSSだと思うんですが......。OOCSSの記法自体はCSSフレームワークの実装としては素晴らしいと思いますが、実際にHTMLに直接そのクラス名は書きたくないな、といった感じでしょうか(btnとかはそのままでいいと思うんですけどね、breadcrumbsとか)。この書き方には大きな問題が。CSSサイズがとにかく肥大化します。Bootstrap-Sassでモジュールを選んでコンパイルすれば多少マシになるとはいえ、ただでさえでかいBootstrapの容量が、@extendされた分だけどんどんと肥大化していくわけです(まあ、Sassのプロセッサがある程度融通は利かせてくれますが)。いうことで、我らがgulpプラグインの一つ、gulp-uncssを導入して解決します。このgulp-uncss、使ってないCSSソースを判断してばっさりカットしてくれるという、そもそも素のBootstrapをそのまま使ってる人にもありがたいツール(CDNとかでキャッシュしてる場合はそうでもないですが)。–save-devとかなんとかやって、gulp-uncssを入れます。[/.reset/,/.open/]}))こんな感じにTaskを組んでやります。オプションhtmlは、CSSの判別に使うHTMLで、ローカルファイルの他、URL指定も可能です。ignoreの方は、HTMLのソースから見つからなくても削除しないクラスなど。BootstrapではJavascriptの方で後から付加するクラスも結構あるので(.openなど)、忘れないように設定しておく。Javascriptで使ってるクラス一覧とかがあったら楽なんですが、多分なさそうなんですよねー......。暇な時にでも作ってみましょう。一部クラス(btn関係で確認)をextendするともの凄い勢いでCSSが肥大化、更にコンパイルに時間がかかるようになってしまうので、コンポーネント関連では利用しない方が無難ですね。コメントをキャンセルメールアドレスが公開されることはありません。