CSSのスタイルガイドを紹介しているサイト 8選


この記事はCSS-TRICKSに掲載された CSS Style Guides の内容を日本語訳したものです。

CSSプロパティを書く私たちの最近の意見をまとめたとき、CSSスタイルガイドの大きな問題点が持ち上がる。
プロパティを1つ選択することは、完璧なスタイル戦略をつくり上げるための1つの選択です。
ネーミングはそのパーツのうちの1つです。セクション分けもそのパーツのうちの1つです。
コメントやインデント、その他全てのファイル構成。これらはすべて完全なCSSスタイルガイドを作り上げます。

既存のCSSスタイルガイドを列挙しましょう。

しかし最初はパターンライブラリではありません。

私はパターンライブラリが大好きです。Twitter BootstrapGELを考えてみてください。これらは特に大きなサイトやウェブアプリを作るときに素晴らしい方法だと考えます。この記事はこれらの方法に関することではありません。それらのいくつかは非常に貴重だと思うので私たちはいくらかそれらを探しまわります。
この記事はCSS自体のスタイルガイドについてまとめています。

私は上記のことから、いくつか抜粋したCSSスタイルガイドをリストアップしていきます。

GitHub


GitHub CSS Style Guide →

経験則として、ネストは3レベル以上しないでください。あなた自身がそのようなコードを見つけたときは必要に応じてその特異なコードや入れ子のレイアウトを再構成することを考えてください。

Google


Google HTML/CSS Style Guide →

必要な限り、かつ出来るだけ短いIDやクラス名を使うべきだ。

例)#navigationではなく、#nav.authorではなく.atr

理解や一覧性を高めるために、ハイフン以外の全ての文字によってセレクタ内の単語や略語を連結しないでください。

例).demoimage.demo_imageではなく、.demo-image

Idiomatic CSS


Nicolas Gallagher’s Idiomatic CSS →

「不可視文字を表示」するようにエディタを設定します。これは、空白行の終わりを取り除くようになり、意図しない空白行を取り除き、コミットを汚染することを防ぎます。

CSS Wizardry


Harry Robert’s CSS Style →

Smashing Magazine


Vitaly Friedman’s “Improving Code Readability With CSS Styleguides”

大規模プロジェクトや大規模な開発チームにとって、簡単なアップデートのための資料を作っておくと便利です。

ThinkUp


ThinkUp CSS Style Guide →

幅、または高さの値が0である場合、単位を指定しない。

セレクタのブロックを参照するコメントは、参照するブロックの直前に別々の行で指定する必要があります。

WordPress


WordPress CSS Coding Standards →

セクションブロックの間にあるセクションや一つの空白には2行の空白行を追加します。

SMACSS


Jonathan Snook’s Scalable and Modular Architecture for CSS →

この記事はCSS-TRICKSに掲載された CSS Style Guides の内容を日本語訳したものです。

CSSをチーム内でどのように規約を決めたらよいか決めかねたのでこの記事に頼りました。
CSSスタイルガイドはたくさんの企業や団体が作成しているのでこれらを参考にそれぞれの規約を作っていけばよいと思います。

更新情報はFacebookページで!

ブログの更新、読んで役立つ他ブログの記事などを更新しています。




関連のある記事


質問があればこちらからどうぞ