HTML/CSS はシンプルなゆえに、きちんとした設計や記述方法でコーディングを行わないと、大規模な Web サイトではすぐに破綻してしまいます。
もしコードのルールが決められてない場合は、それぞれが独自の命名規則で CSS の ID 名やクラス名などを名前付けしてしまったり、HTML が複雑な構造になってしまったりしています。
今回は、より可読性や拡張性の高い HTML/CSS を記述する方法が解説されているスライドを紹介します。これらのスライドを参考により品質の高いコードの書き方を学びましょう。
悩まないコーディングをしよう！
主流な CSS の設計手法である OOCSS, BEM, SMACSS の特徴について、例を用いながらわかりやすく解説されています。
また、設計方針を立て方や、実際に CSS 設計を実践したときに発生した課題やその解決方法などについても紹介されており、CSS の初心者にもおすすめのスライドです。
2016年版 フロントエンド開発フォーマット
チームで HTML/CSS 開発するときには、特にフォーマットは重要になってきます。
HTML の記述方法や CSS の ID や クラス の命名規則など詳細なフォーマットの具体例が掲載されています。プロジェクトのルール決めの際に参考になるスライドです。
ブラウザにやさしいHTML/CSS
HTML や CSS を記述するときは人間に対してだけでなく、ブラウザに対しても読みやすいコードを記述する必要があります。
このスライドでは、ブラウザがページを表示する仕組みについて詳細に解説されており、よりパフォーマンスの高い HTML/CSS の記述方法を学ぶことができます。
大規模サイトにおける本当は怖いCSSの話
小規模のサイトでは問題無くても、規模が大きくなると特に CSS に関するバグ発生の可能性が大きくなってきます。
このスライドでは、大規模サイトのコーディングを行うときに、どのような CSS 設計をすべきか、その勘所について解説されています。2013年に公開されたものですが、今でも参考になる内容です。
メンテナブルでありつづけるためのCSS設計
Web サイトは一度作ったら終わりではなく、リリース後も日々運用・改善していかなければなりません。このスライドでは、OOCSS, SMACSS, BEM といった手法がサンプルコードと共に解説されています。
なんでCSSすぐ死んでしまうん
CSS は簡単に記述できるがゆえに、適当な設計でコーディングしていると大規模な Web サイトではすぐに破綻してしまいます。より拡張性、保守性が高い CSS 設計をするにはどうすれば良いのか具体的に解説されています。
CSSの歩き方
適当な CSS を記述していると、コードが肥大化してしまいどこを修正すれば良いかわからなくなってしまいます。このスライドでは OOCSS, BEM などの CSS 設計の手法を解説する前に、CSS が適用される優先順位などの基本的な事項について解説されています。非常にわかりやすく、HTML/CSS の初心者におすすめのスライドです。
ヒューマンリーダブルな CSS 記述法（異次元編）
このスライドでは人間に読みやすい CSS のセレクタの命名規則について考察されています。異次元編とタイトルにあるように少しトリッキーな手法が紹介されていますが、非常に参考になる内容です。
