CSS設計の重要性

「中長期にわたって運用していく中で、コードを無駄に肥大化させずに、思いもよらないバグを招かないようなコードを書く」のが難しい。そのために、誰にでも理解しやすいコードを書く。

デザインカンプ：Design Comprehensive Layout, デザインの完成見本図。

Backbone.js, Knockout.js MCV, MVCC

Webでは構造そのものを大きく変更したり、予想外の要素を差し込む、もしくは差し引かなければいけなかったりする。いかにしてメンテナンス効率を下げずに、少ない工数で改修ができるようにするための設計をするか。

より良いCSS

• 予測しやすい
  • 追加したルールが予想外に他のルールに影響することがない
• 再利用しやすい
  • 抽象的で機能ごとに分離されている
• 保守しやすい
  • ルール追加の際にリファクタリングが必要ない
• 拡張しやすい
  • 誰にとってもメンテナンス・管理しやすい

破綻しやすいCSS

HTML構造へ依存している

サイトやアプリケーションの機能仕様やデザインが変わると、HTMLの構造に依存しているCSSやJavascriptも変更する必要がある

CSSを要素名ではなくクラス名でしていれば、HTMLに変更があっても、CSSは変更せずに済む。

セレクタをHTML要素で深く指定してしまうと、HTMLに変更があった際にセレクタも変更しなければいけなくなる。手間が増える。HTML要素の深いセレクタにしてしまうこともある。

学習したことのメモです。

スタイルを取り消している

H1要素のborder-bottomを取り消すためのクラスを追加するのではなく、下線を追加するためのルールを作る。.headlineをつければ下線を引けるし、.headlineを消せば下線が消える。

プロを目指す人のためのRuby入門

本日で１周することができた。アプリ制作と並行して学習したことで、覚えたことを制作で使う場面が何度もあった。
その中で成長した点は、
- StackOverflowを理解しやすくなり、解決策を自作中のアプリの状況に合わせながら組み込む経験を何度もできた
こと

だと考えている。