こんにちは、OOCSS大嫌いおじさんです。
ので、詳細は省きますが、Bootstrap-Sassを使って、Sassの@extendを使ってセマンティックな感じに命名を変えたいです。
#aboutme{
@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とかでキャッシュしてる場合はそうでもないですが）。
npm install gulp-uncss –save-dev
とかなんとかやって、gulp-uncssを入れます。
return gulp.src([
'app/sass/*.scss'
])
.pipe(compass({
config_file: 'config.rb',
css: 'app/css/',
sass: 'app/sass/',
}))
.pipe($.autoprefixer({browsers: AUTOPREFIXER_BROWSERS}))
.pipe($.uncss({html: ['app/**/*.html'], ignore: [/.reset/,/.open/]}))
こんな感じにTaskを組んでやります。
オプションhtmlは、CSSの判別に使うHTMLで、ローカルファイルの他、URL指定も可能です。
で、ignoreの方は、HTMLのソースから見つからなくても削除しないクラスなど。BootstrapではJavascriptの方で後から付加するクラスも結構あるので（.openなど）、忘れないように設定しておく。
Javascriptで使ってるクラス一覧とかがあったら楽なんですが、多分なさそうなんですよねー……。暇な時にでも作ってみましょう。
ただし、一部クラス（btn関係で確認）をextendするともの凄い勢いでCSSが肥大化、更にコンパイルに時間がかかるようになってしまうので、コンポーネント関連では利用しない方が無難ですね。