CSS の話

CSS 最近ちょっと勉強していたので.

CSS を モジュール式で分ける

(S)CSSの書き方メモ
CSSでHTML要素の基本的な装飾を行う時にジャンルごとに分けて仕様書順に書いていくようにした。これはそのためにシンプル化した目次。
これがかなり良かったなと思う。
これまでよくわけわからない分け方見たし, 自分自身, どうするのが適切なのか把握できないでいた。
ただ, 上記エントリにあるように現実は思うようにいかないこともある.

HTML+CSS Templating
自分的HTMLテンプレートの組み方
こっちのスライドには上のに比べて複数人でやるときに適していると感じた.
詳細度を気にしなくていい設計とか, 要素に直接スタイルを指定しない(あとからどういう時にその要素を使うか分からない), トップレベルは必ずモジュールでそれを起点にスタイルを書くとか, 余白は下に統一するとか.
あと, このへん参考になった.

具体的なページをコーディングしながら
CSSの設計を行ってはいけない。
具体的なページは、テンプレートから
パーツをコピって作るものである。そういうものである。
たとえ1ページしか作らなくても、再利用性を意識する。
紙デザインのようなビジュアル満載のページでもない限り、
パーツが増えないわけがないと考える。
既に作られたパーツなのか知る方法が無い。
同じものを2度作るハメになる。
モジュールごとの余白の設計を怠らない。
具体的なページをいきなり作ってしまうと、
これがやりづらい。

CSS の @import は使わないほうがいい

複数のCSSを読み込む場合, @importを使うくらいならHTMLのlinkタグを使ったほうが良くて,
それは並列にダウンロードできない(ブラウザがある) みたい。
linkならべるよりは結合したほうが良いと思うし, css書く人も(糞簡単な)Makefileを書く必要があるのか。

もしくは SCSS とかの @import を使うとか. SCSSいいね

これを書いてるブログの CSS で @import 使ってたり, 大量の CSS 読んでたら面白いなと思ったけど, そんなことはなかった。
don’t use @import

float vs inline block vs absolute positioning

基本floatは色々あんまり好きじゃない.
Twitter: floatEvernote: absolute positioingGoogle+: inline blockという感じだった.inline block便利だなと思うんだけど

<ul>
     <li>hoge</li><li>hoge</li><li>hoge</li><li>hoge</li>
</ul>

みたいにしないとwhite spaceの影響が出るのはウザいかな(下記エントリ参照)
どれがベストなのか判断しきれてない.
CSS display: inline-Block: Why It Rocks, And Why It Sucks

他良かったエントリとか

Sass、そしてSassy CSS >>(SCSS)

それはせっかく長い時間をかけてテーブル・レイアウトのようなゴミを駆逐して構造とデザインの分離が一歩進み、HTML5とCSS3でなんとか満足行く程度には達成されそうになったのにも関わらず、またHTMLをゴリゴリいじるのが流行るのかというような嘆息からそうなるのだと思う。

この言葉はCSSフレームワークに関するものだけど, CSSフレームワークそういうものを使っていなくともスタイルの変更にHTMLが大きく影響されるみたいなことは現実にあって, 個人的には好ましくないとおもっていて, そういうの少なくしたいなとか思っている.

CSSLintのRulesの超訳
雰囲気つかむのにとても良かった.
CSSLintといえば id でセレクタ指定すると怒られるけど, あれはどうなんだろう.
正直本当に好ましくないのかとか判断しかねる. みなさんどうしてるんですかね.

まとめ

HTML も CSS も奥が深い.
それをおざなりにして HTML5 やら CSS3 やら騒いでも意味ない というような趣旨の発言がよくわかると感じた.