2014年12月24日

bootstrapを改造してオレオレcssフレームワーク失敗談

失敗談というか最終的にゴリ推したんですけど、cssの実装で失敗した話です。

最近、僕がやってるミニ四駆のサイトをリニューアルしました。
スクリーンショット 2014-12-18 14.14.10.png
M4G ミニ四駆ギャラリー
これの前はfoundationでやっつけで作ったのですが、思ったよりこのサイトの人気がでてきたので
真面目に作ろうと思い実装をしてみました。

僕が今回開発で使った構成は、rails(まだ3.2)、htmlはslimで書いています。cssの実装は標準のscssにscssライブラリにcompassを使っています。 foundationよりtwitterbootstrapが良いなと思いbootstrapベースで開発を行いました。 あとliveloadというguardのプラグインを使ってファイルを更新すると勝手にリロードするようなgemも使っていました(超便利)

今回試みたのは scssのextendを使って,bootstrapを隠蔽してみました。
具体的にいうと、.containerとか大枠は使っているのですが、レイアウトを組むのに、
.col-md-3.col-xs-3.col-sm4 みたいなhtmlのクラスの振り方が嫌だったので、下記のように変えて機能だけもらうことを考えました。とりあえず、htmlも読みやすくなって、機能も標準でもらえるのでこれでいい感じと思い開発を進めていました。
.products{
// スタイル継ぎ足したり
@extend .col-md-3;
@extend .col-sm-4;
@extend .col-xs-3;
}
これで、twitterbootstrapのクラスは使わずになるべくhtmlで表現している領域の名前をなるべく使うことによって綺麗なHTMLを目指しました。。。。がしかし、、extendを多用してたら一回のcssの変換が急激に遅くなってしまって、すごいストレスになってしまいました。 scssの総量で言えばそうでもありませんが、一回のリロード5秒とかまたされると弊害になってきます。。。
まぁぶっちゃけてこれだけなんですが、今度はもっと純粋に軽量な形で自分のcssフレームワークとかつくれたらいいなぁとか思っています。

twitter bootstrapのやBEM,SMACSS等色々と見ていますが、自分の思考と合わないところもありなんかいい感じに描けないか模索していますが、浅く考えてるならフレームワークに乗っかるというのがチームで組んでいくには無難な手段なのかもしれません。

最近思うことは、cssを読んでる場合にクラス属性などを振らずにある程度の見た目になっているのがベストだとおもうので、smacssの考えに近いと思いますが、レイアウト関連とモジュール関連のみにして一つのベースに従うのがいいと思っています。いたって当たり前なことだと思うんですが、必ずここはもう少し余白が欲しいとか、フォントのサイズマニュアルで指定しちゃうとかバラバラになっていく解決策としてベースに100%頼るみたいなことができたら理想だとは思います。 最近のサイトはどこもcssの量が多い気がする。。 もちろん多少多くてもそんなパフォーマンスも変わらないとは思うけど、もっとシンプルになれると思うので、css周りはまだまだ進化の余力があるなと感じる今日この頃です。
駆け足で失礼しました。

この記事は、CSS Architecture Advent Calendar 2014の24日の記事です。
http://www.adventar.org/calendars/337

あぁ、シーサーブログめっちゃ書きにくい。。ブログ引っ越そうかな。
ラベル:CSS
posted by ヤミタケ at 23:55| Comment(0) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。