Hatena::ブログ(Diary)

技術日記@kiwanami

2013-09-05

CSSガイドラインを翻訳してみた

Harry Roberts氏によるCSSガイドライン(High-level guidelines from writing manageable, maintainable CSS)のドキュメントが素晴らしすぎたので、勢いで翻訳してみました。(ロシア語、中国語、フランス語に引き続いて4番目...)

個人的な主観で見所を選んでみると、以下のような感じです。

  • クラスの名前付け方法(ネーミングルール)
  • セレクターの設計、考え方
  • !importantの使い所

最近見るようになって来たBEM命名法についても説明してあります。

そもそもWebのデザインをどうするかという問題は置いておくと、CSSを書くという事は、どうやってそのデザインを実現するかというHowTo的なものと、どうのように名前付けやエレメントの設計を行なってメンテナンス可能にするかというノウハウ的なものという技術が必要とされると思っています。

前者のコーディングHowTo的なものは山のように記事や本があるのですが、後者のドキュメントはあまり見たことがありません。枝葉的なCSSコーディング規約だと、以下のようなものがあります。

これらよりも、もっと設計レベルのノウハウをずっと探していたのですが、著名なデザイナーから盗めみたいな感じでしかなかったので(自分がCSSコミュニティにあまり詳しくなかったというのもあるかもしれません)、CSSの設計は確立されてないみたいなので難しいなと思っていました。

そんな時、このドキュメントとSMACSSを見て大変感動しました。

まさにこれが欲しかったものでした。待ってたらそのうちネタ帳みたいな人が翻訳してくれるかなと期待していたのですが、BEMについても一向に広まる気配がなかったので、出張の移動時間などで適当に翻訳してみました。

low specificity など適当な日本語が見つからないものもあったり、日本語の変なところもあると思いますので、ご意見やプルリクをいただけると大変嬉しいです。(原文チェック用に日本語・英語併記のものもあります)

コメントでspecificityについて教えてもらいました。 (2013/09/05 追記)

konitterkonitter 2013/09/05 17:02 はじめまして!
記事からリンクしていただいているGoogleのガイドラインの和訳記事を書いたkonitterといいます。

「specificity」はCSSで言うところの「詳細度」と訳せるのではと思います。

IDを使わず、クラスを使って詳細度を低く保つことで、再利用しやすくなる、というような感じです。

kiwanamikiwanami 2013/09/05 18:31 なるほど。詳細度ですね。ちょっと直して試してみます。
ありがとうございます!

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/kiwanami/20130905/1378353853