Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

CodeGrid 書いてる人たちは楽しそうだ。LT してきた

Dev

酔ってる。

CodeGrid二周年記念パーティー良かった。
気になってたけど Twitter でリプライ送るの恥ずかしくて話ができなかった人、そんな人達と話せてよかった。

特に難しい話、新しい話はしてないけど、LT してきた。

CSS の構造化、その目的 - slideshare
OOCSS, SMACSS, BEM などの CSS の構成案に手を出す前に、これらが出てきた背景と目的を理解しとくことが大事

スライドの例で言いたかったこと

予測しやすい

BAD)

  • .container とか .wrapper という名前が抽象的すぎる。
  • 一番最後の .img+p は HTML の変更に弱過ぎる。

GOOD)

  • 抽象的すぎる名前は変更する。
  • それでも自分以外に伝わらないと感じたらドキュメントに残す。

再利用しやすい

BAD)

  • ニュースページのリスト、 質問ページのリスト、ブログのリスト、こんなふうにスタイルを振っていくと同じようなプロパティを指定するクラスがどんどん増えちゃう。

GOOD)

  • モジュールでまとめよう。
  • ちょっと変わったスタイルはベースのモジュールの応用で!

保守しやすい

BAD)

  • not セレクタわかりにくい。
  • クールなセレクタ指定に酔いしれてると !important 祭りになるぞ!

GOOD)

  • クラスで定義しておきましょう。

拡張しやすい

BAD)

  • 一個のクラスにスタイルを指定しすぎ。
  • もうこういうのは重複するプロパティがいっぱいあっても別クラスを作るしか無いね。

GOOD)

  • モジュールで分けましょう。
  • 拡張性という話では、チームメンバー全員がコードを理解できるように、ドキュメントがとても大事だね。

CSS ちゃんとやろう

LT 作るとき、CSS の悪い例(あくまで自分にとって)がすぐ浮かばなかった。
それは CSS が抱えている問題を理解できてないということだと思う。

自分が理解したと思ったことは人に伝えるように。伝えた後、実は理解できてなかったということもあると思うけど、粘り強く頑張れ。俺よ。

Sass ちゃんとやろう

CSS もまともに書けないのに Sass に手を出すなんて.. と思ってたけど、そろそろ取り組みだしてもいいはずだ。

酔っててごめんね

酔った勢いで書いたようにみえるかもしれないけど、そういうのも大事だと思うよ。