12:24パーマリンク2011年12月時点でのCSSを書くときの自分内での決まりごとを書いておきます。いうのは自分(やチーム)が分かりやすければ何でもいいと思いますけどね。基本的に自分以外は編集することがないので、結構好き勝手に書いてます。セレクタはインデントなし。宣言(プロパティと値)の部分はセレクタの開始位置から半角スペース2つ分インデントする。@media内など、ネストされている場合はその中のセレクタはアットマークルールの開始位置から半角スペース2つでインデントする。セレクタが複数ある場合は基本的にカンマで改行するが、擬似要素・擬似クラスが違うだけの場合は同一行でもよい。(リセットCSSなどは除く)宣言ブロック開始の波括弧{は最後のセレクタと同じ行に書き、直後に改行を入れる。宣言ブロック終了の波括弧}の直前に改行を入れる。各宣言ごとに改行する。基本的にはセミコロン;の直後。値が複数ある場合(背景など)に、それが長すぎると感じたら各値ごとに改行する。そのとき、値の開始位置は揃える。複雑なグラデーションなど、1つの値が長い場合は分かりやすい位置で改行する。ルールセットの前後には1行の空白行を入れる。セレクタの+などの接続詞の前後には半角スペース1つ分の空白を入れる。宣言ブロック開始の波括弧{の直前には半角スペース1つ分の空白を入れる。プロパティと値の間にあるコロン:の直後に半角スペース1つ分の空白を入れる。宣言終了のセミコロン;の直前には空白を入れない。環境があるならば、保存する前にルールセットごとにコロン:の位置を揃える。(IDEなどで整形できる場合。宣言のセミコロン;を省略してはいけない。数値が0の場合、その単位は省略する。(書いてもよい)line-heightの値の長さの単位は書かない。fontプロパティは使わない。(色々と面倒くさいので)それ以外の短縮形は、そちらをメインに使う。<time>形式の単位は基本的にmsではなくsを使う。アニメーションなどの<identifier>はハイフンつなぎで書く。contentプロパティなどで挿入する文字列に英数以外があったらエスケープする。*/ルールセットではなく宣言にコメントをつける場合には、セミコロン;の後に半角スペース1つ分を空けてから「その他」スタイルで書く。「大見出し」の見た目は気分で変えてもいいが、統一すること。細かい理由のあるオーダーではないので気が付いたら適宜修正する。基本的には図書館方式。複雑なセレクタは書かない。可能な限りCSSハックは使わない。同じ宣言を持つセレクタはまとめてもよいが、全て1つにまとめるのではなく役割ごとにまとめておく。クオーテーションはダブルクオーテーションを使う。フォント名はダブルクオーテーションで囲む。実際に使うファイルは1つにまとめる。最近Sassを使い始めましたが、SCSSで基本的にこれと同じ感じで書いてます。CSSでもSassでも、実際に使うときには圧縮したりするので、これらのスタイルは表には出ないです。あと、いつも一人でやってるので自分が見やすいように書いてます。他にも何かあった気がするけど思い出せないということは、たいしたものではないのでしょう。書いてきましたが、どれもこれも深い理由があるわけではないので、これからも色々変更されていく感じです。Requestを送るIssueを作成するTwitterでメンションする記事を共有TwitterFacebookPocketはてなブックマークLINEコンテンツホームブログこのサイトについて。