SaveCSSLintのRulesの超訳CSSLintのRulesの超訳csslint-rules.mdcontent_copyfile_downloadRenderedSource訳注これは超訳です。CSSLintは「なんでこんなルールなんだ...」とイラっとすることが多いですけど、それぞれにそれなりに理由があります。無視するべきなルールとかもあります。見出し要素の再定義禁止とかはHTML5に対するCSSなら無理な話です。そんなわけでどんな理由なのかを簡単に訳しました。無視するかどうかは自分で決めましょう!この訳はCSSLintと同じライセンスで提供されます。size枠線とパディングはwidthやheight等に含まれないので、同時に指定すると多分君が思ってもみない結果になるよ。displayもちろんあるセレクタに対してどんなCSSプロパティを一緒に指定してもOKだ。幾つかのプロパティ同士は同時に指定しても無意味なことがあるんだよ。propertiesまぁわざと同じプロパティを重ねて指定することはあるよね。続けて書くならまぁ勘弁してやるよ。0.5);}だけど、次の例みたいに離して書いたら...勘弁することはできないな...。rules次みたいなプロパティを何も書いてないルールがあったとするぜ。{}まぁ消し忘れとかそういうのもあるよな。削除してサイズを抑えてやろうぜ。propertiestypoはよくする方?このルールはCSSプロパティとして名前がおかしい奴を警告するんだ。ベンダー拡張プリフィックス付きのは無視する。hoversこのルールは:hoverが<a>と一緒に使われてるかチェックして、そうじゃなかったらエラーだ、エラー!アンカーと一緒に使われていない:hoverがあると、IE7でパフォーマンスが落ちる。IE8ではちょっとマシだけど。non-link-hoverCompatibility各種ブラウザでの互換性チェックのルールだ。classesIE6以前では.foo.barのようにクラス名を続けて書く絞り込みに対応してないんだ。最後の一個、つまり.barしか見てくれない。思っているよりも多くの要素にマッチしてしまうセレクタになっちまう。box-sizingbox-sizingプロパティーを使うと警告するんだけど、それは君がわざとやってるってことを思い出させるためなんだ。IE6と7を無視することになるよ?良いの?ってこと。prefixesCSS3のプロパティの多くはベンダー拡張プリフィックス付きで多くのブラウザが対応しているよね?-moz-とか-webkit-とか-o-、そして-ms-だ。definitionsCSSグラデーションはまだ標準に則った実装がない。text-indentマイナス方向にtext-indentするのはよく使われてるんだけど、アラビア語みたいに右から左に読む言語だとまずいことになる。RTLな言語をサポートする必要があるなら別の方法を利用したほうがいいよ。colorsなるべく多くのブラウザーできちんと色が表示されて欲しいはず。以下のようなケースで警告する。hackもうスターハックなんて使うなよ。faceWebフォント使いたいよね?でも単に標準に従って書くとIE8で404エラーになっちまう。Syntaxってのがあるので是非これを使ってくれ。bulletproof-font-facePerformanceCSSのパフォーマンスに関するルールだぜ。サイズのこととCSSの適用における速度の両方ある。fontsWebフォントは良く使われるようになったよな。結構なサイズだったりするし、ダウンロード中にブラウザのレンダリングが止まっちまう。5つ以上使っている場合は警告するぞ。@import@importは使っちゃぁダメだ。@importに書いてあるよ。expressionsCSS3では属性セレクタで正規表現に似たやつが使えるようになった。~=とかそういうやつだ。selector全称セレクタ(*)は全要素にマッチするんだけど、実はセレクタの最後の方で使うと遅くなるんだ。次の例みたいに使うとヤバイね。0.5);}この場合ブラウザはまず全ての要素を取り出して、そこから親に.fooを持つものを探すんだ。単純に全称セレクタは使わないって決めちゃったほうがいいと思うぜ。valuesCSSのサイズを抑える手段で一番簡単なものは値が0の時に単位を省略することだ。0pxと0はまったく一緒に解釈されるからな。elementsli.activeとか書く必要はないだろ?削除してもだいたい動くと思うぜ、多分だけどな。CSSのサイズも抑えられるし、セレクタを適用する時のパフォーマンスも向上するはずだ。propertiesまとめとけ。marginやpaddingはまとめとけ。images少しでも転送量を減らすのがパフォーマンスにおける君たちの使命だ。そのためには、URLはCSSで一回だけ使うのが望ましい。同じURLを複数回使っちゃうと、ファイルサイズが増える。同じ背景画像を参照するのなら、クラスを上手く使って、うまく節約してやるとベストだ。floatsfloatはレイアウトのために多用されてるけど、必要以上に使ってしまっていることがよくある。10回以上使ってたら...警告だ!ま、グリッド・システムでも使うといいね。performanceを読むのが良いと思うよ。declarations大抵ののWebサイトはフォント・サイズも含めてフォントに関する指定は僅かなもののはずだ。selectorsIDによるセレクタは使わない方がいいはずだ。アイツらはHTMLと密接に関わるものだし、そもそも再利用できないしな。クラスに置き換えてHTMLも書き換えてしまえ。それにIDを使うと継承絡みでセレクタが煩雑になるきらいがあるのも見逃せない。selectors?を読んでくれ。!important継承絡みで問題が起こりやすいのは!importantもそうだ。importantAccessibilityアクセシビリティーの問題は引き起こしたら致命的。outline:noneCSSのoutlineプロパティーは要素の周りに線を引くやつだってのは知ってるよね。borderプロパティーと違ってレイアウトとかサイズが変わらない。そんなこともあって、ブラウザーはこいつをアクティブであることを示すために使うことがあるんだ。IEやFirefoxでは選択した要素が点線で囲まれる。醜いので消したくなる気持ちはわかるんだけど、アクセシなんとかがアレでアレなので......。outline-noneOOCSSOOCSSの主義からパクッたものもあるぞ。headings見出し要素はセレクタの先頭に書くべきだな。すりゃどこでも再利用可能だし、パフォーマンス的にもメリットがある。こんな感じに書いたりしたらアウトだ。110%;}ま、サイト全体で見出しの統一感を出した方がいいのは当たり前だよな。Reservedclear。