CSSガイドラインを翻訳してみた
Harry Roberts氏によるCSSガイドライン(High-level guidelines from writing manageable, maintainable CSS)のドキュメントが素晴らしすぎたので、勢いで翻訳してみました。(ロシア語、中国語、フランス語に引き続いて4番目...)
個人的な主観で見所を選んでみると、以下のような感じです。
- クラスの名前付け方法(ネーミングルール)
- セレクターの設計、考え方
- !importantの使い所
最近見るようになって来たBEM命名法についても説明してあります。
そもそもWebのデザインをどうするかという問題は置いておくと、CSSを書くという事は、どうやってそのデザインを実現するかというHowTo的なものと、どうのように名前付けやエレメントの設計を行なってメンテナンス可能にするかというノウハウ的なものという技術が必要とされると思っています。
前者のコーディングHowTo的なものは山のように記事や本があるのですが、後者のドキュメントはあまり見たことがありません。枝葉的なCSSのコーディング規約だと、以下のようなものがあります。
- http://www.cyberagent.co.jp/recruit/techreport/report/id=7926
- 「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN
これらよりも、もっと設計レベルのノウハウをずっと探していたのですが、著名なデザイナーから盗めみたいな感じでしかなかったので(自分がCSSコミュニティにあまり詳しくなかったというのもあるかもしれません)、CSSの設計は確立されてないみたいなので難しいなと思っていました。
そんな時、このドキュメントとSMACSSを見て大変感動しました。
- 参考 : SMACSS 読んだ - CHROMA (2013/09/05 追記)
まさにこれが欲しかったものでした。待ってたらそのうちネタ帳みたいな人が翻訳してくれるかなと期待していたのですが、BEMについても一向に広まる気配がなかったので、出張の移動時間などで適当に翻訳してみました。
low specificity など適当な日本語が見つからないものもあったり、日本語の変なところもあると思いますので、ご意見やプルリクをいただけると大変嬉しいです。(原文チェック用に日本語・英語併記のものもあります)
コメントでspecificityについて教えてもらいました。 (2013/09/05 追記)