8 methods to bring your front end coding to rockstar levels | StylizedWeb.com

よいCSS開発を行うための８のＴＩＰＳとして、当たり前かなと思うことから、なるほどというものがあったので以下にご紹介。

・IDやクラス名にはより意味のあるものをつけよう
たとえば、boxとかwrapperとかcontainerとかは一般的ですね。
一般的なものをつけておけばそれが何なのかすぐに分かるし、協業の際にも便利。
全体のラッパー以外にも、headerとか、content とか footer とか固定で使っておくと一貫性が出ていい感じですね。

まあ当たり前の人には当たり前なテクニックかも。

・閉じコメントをつけて構造を分かりやすく
<div id="header" class="section">
  <div id="header-logo">
    <h1>HTMLiZER</h1>
  </div><!--/#header-logo-->
</div><!--/#header-->
こういうふうにしておけば、どこに対応する閉じdivタグかっていうのが分かりますね。

つけなくても動くし、面倒ですが、ちゃんとやっておくと、後で見たときに一目瞭然で助かります。

・CSSファイルを意味ごとに分割する
CSSフレームワークなんかを見ると、ファイルが分かれていて分かりやすいですね。
元記事の著者は以下のような構成を推奨しているみたい。

reset.css  - ブラウザごとの差異を吸収するもの
main.css - メインとなるCSSファイル
structure.css - ページの構成に関するCSSファイル
typography.css - タイポグラフィに関するCSS
print.css
helpers.css

こういう構成であれば、どういうケースにどのファイルを編集するというのが分かりやすくて開発効率を上げられそうです。

複数ファイルにするとそれだけHTTPコネクションが発生して重くなるということも考えられますが、小規模サイトの場合は１個にまとめる手間よりも、メンテナンス性について考えたほうがよさそうですね。アクセスの多いサイトでは１個に自動でまとめるような機構を入れればよさそうで、開発時にはこうした構成をもたせておくと開発がしやすそうです。

・CSSの目次をつけよう
これはちょっとなるほど、と思ったのですが、CSSのコメントに目次を書いておこうというもの。
長くなりがちなCSSですが、目次を見れば構成が一目瞭然というのはなかなか分かりやすいかもしれませんね。

/***********
TOC:
=1: Header
=2: Content
=3: Footer
=4: Navigation
=5: Portfolio
****************/

本で目次のある、ないを考えてみればこの利便性は大きいといえますね。

・ＣＳＳを圧縮＆１つにまとめる
HTTPコネクション＆転送量を考えて１個にまとめて圧縮化しよう、ということで過去に色々とツールを紹介しました。

• サイトのパフォーマンスを上げる、PHPでCSSファイルを圧縮転送する各種方法
• JavaScriptやCSSをWEB上で簡単圧縮するサービス「Compressor」
• PHPでCSSを圧縮して出力する方法
• JavaScriptとCSSを圧縮するPHPスクリプト「jscsscomp」
• JavaScriptとCSSの両方を圧縮できる「YUI Compressor 2.0」リリース

・ＣＳＳフレームワークを使おう
自身の経験から、フレームワーク化できるものはフレームワークにして開発効率を高めたり、既存のオープンソースのフレームワークなんかを使ってもいいですね

CSSフレームワーク、ラウンドアップ で色々と紹介しました。

とまあ、私自身もすべて実践できているわけではなく、こうした作業にもリソースが必要なわけでトレードオフと言えそうですが、便利な分は取り入れて開発の効率化が出来ればいいですね。