とあるWebサービスを作った時に初めてCSSの設計(SMACSS)を考え、Sass(Compass)も使ってみたのでちょっとした感想を。
CSSの設計をSMACSSを元にして考えてみた。
今まで関わってきたプロジェクトのCSSというのが、
・共通部品用css一つ
・あと機能(ページ)ごとにそれぞれcssファイル
みたいな形だったので、
もうちょっと整理できないかなと思い、cssの設計を考えてみた。
まずはこれでお勉強↓
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
- 作者: 谷拓樹
- 出版社/メーカー: インプレス
- 発売日: 2014/07/24
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (3件) を見る
この中でも紹介されている、
「SMACSS」
を元にcssを書いていくことにしました。
SMACSSは要は繰り返し出てくるものをまとめてパターンにし、
保守しやすい、再利用可能なCSS？を書きましょうということみたいです。
（詳しくは書籍なりgoogle先生で！）
SMACSSではcssを5つのカテゴリに分けます。
- ベース：スタイルのデフォルト、リセットなど
- レイアウト：ヘッダー・フッターなどの枠組み、頻出するGridなどのレイアウト関連
- モジュール：再利用可能なパーツ(ボタンとか)
- 状態（ステート）：状態変化した時のデザイン(クリックした、押せなくなった等)
- テーマ：テーマによって色などが変わる時の設定
書いてみて思ったこと
・モジュールが9割を占める。こんなもんなのか？
スマホ向けに作ったので比較的多そうなレイアウトのコードもあまり増えなかった。
・モジュールもいくつかのファイルに分けたのだけど、「button」「form」みたいなコンポーネント単位、みたいな分け方だけでは収まらず「search」とか「event」みたいな機能での分け方も入ってきちゃって、これ混ざっちゃっていいのかなぁみたいな…
（理想は全部UIコンポーネント単位で分けるなのか？？）
・でもなるべく再利用を意識した作りにしようと思うので、気がついたら似たようなモジュールにCSSの上書き上書き上書きでimportant頻出…みたいな事態は避けやすくなるかもとは思った。
はじめてSass(Compass)を使ってみた
Sassが便利そうだったので初めて使ってみた。
Railsではsass-railsを使うだけなので簡単だってのもあって。
あとCSSスプライト用の画像を作るのがCompassだと簡単にできるようだったので
Compass(compass-rails)も使ってみることにした。
参考にした書籍↓
使う前に読めたら読んでおいたほうが良いかも。
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
- 作者: 平澤隆,森田壮
- 出版社/メーカー: インプレスジャパン
- 発売日: 2013/09/13
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (1件) を見る
使ってみて思ったこと
・Sassはネストが使えるというだけで十分メリットがある。mixinやextendなど使えてcssの無駄な重複を省けるし同じことの繰り返しが無くなって( ・∀・)ｲｲ!!
・Sassは記法が2つ(sassとscss)あるけど、cssとの互換？もあるし後発ということもあってscssのがおすすめな気がする。
・Compassは便利mixinがたくさん用意されているので、使用前に一度公式？リファレンスや書籍等目を通しておくといいかも(そんなんできんの！？って後で気がつく)。
・今回Compassを利用した目的だったCSSスプライト画像作成機能、めっちゃ便利。複数画像をくっつけたスプライト画像を自分で作る必要がなくなる。
・2014年8月15日時点では、sass-railsはsass 3.3に未対応のよう
CSS書くのも大変ですよね〜