--年--月--日 --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

cleancssの日本語訳

2008年05月19日 00:22

Clean CSS - A Resource for Web Designers - Optmize and Format your CSS
↑のサイトは英語で、専門的なことになるとさっぱりなので、このサイトを参考に日本語訳と、意味、説明を書いてみる。

先に、少し言葉を説明します。
要素:a{ hogehoge; }の、a。対応させるタグ。
属性:a{ hogehoge; unyaunya; }の、hogehogeやunyaunya。あとはwidthとか。

Code Layout:コードの可読性を設定します。
レベルが高くなるほど、可読性とサイズが下がります。
Compression(code layout):
・Highest:最高。全てを1行に書きます。
・Hight:高。それぞれのタグや要素ごとを、1行に書きます。
・Normal:標準。これがオススメ。それぞれの要素の、それぞれの属性ごとに改行。普通の人はコレ。
・Low:低。インデントまでやるが、ここまでやる必要ない。
可読性を失わせたくないなら、Normal。可読性がいらないなら、Highest。ほかのはあまりいらない。


Options:設定です。
・Sort Selecters:タグや要素を、五十音順にします。可読性アップ。ただし、動作が変わることがある。(二重定義の際は、後に定義されたものを優先するため)
・Sort Propaties:要素内の属性を五十音順にします。可読性アップ。動作は滅多に変わらない。
・Optimise selectors and their properties:同じ属性な要素どうしを、くっつけるか。0なら気にしない、1なら敢えてくっつけない。2なら敢えてくっつける。くっつければ軽量化するし、くっつけなければ可読性があがるときもある。
・Merge shorthand properties:ショートハンド表記できるプロパティをまとめる。(参考)たとえば、border-bottom-widthとborder-top-widthなんかをまとめる。
・Only safe optimisations:チキる。動作が変わらないようなものだけ、最適化する。
・Compress colors:カラー表記を圧縮する。#000000→#000など。
・Compress font-weight:font-wightを、数値表記する。normal→400など。動作は変わらないが、標準と、400(標準)では、可読性が大きく変わるし、たかだか3文字だし、非推奨。
・Lowercase selectors:大文字を小文字に変える。XHTML対策だが、普通のhtmlでも推奨。
・Remove unnecessary backslashes:不要な\を削除。どんなのだろ。
・convert !important-hack:!importantうまく削除する。importantは、二重定義の際、これをつけられたものを優先する、というもの(参考)。要するに順番を変えれば、不要なものですが、可読性に難が出る可能性あり。
・Remove last ;:要素内最後の;を削除する。特にいらない;なので、推奨。
・Save comments:コメントを残す。消せば大幅な容量ダウンにつながる可能性があるが、当然可読性が損なわれる。
・Discard invalid properties:CSSバージョン(プルダウンメニューで設定)によって無効になる属性を削除。
・Output as file:糞ご丁寧にファイルとして渡してくれる。code layoutがhigestだったりすると便利。



こんな感じでどうでしょう。
手元に原本を残しておき、webにアップするものだけ変えたいなら、Highestにして、Sort SelectersとSave comments以外を全チェックしておくと良いでしょう。
可読性を残したいなら、normalにし、Sort SelectersとCompress font-weightとDiscard invalid properties以外をチェックすると良いでしょう。



追記:Sort Selectersについてですが、paddingが指定されているdiv要素の、widthのハックを使っているとバグが発生します。

スポンサーサイト


コメント

    コメントの投稿

    (コメント編集・削除に必要)
    (管理者にだけ表示を許可する)

    トラックバック

    この記事のトラックバックURL
    http://suiseidreaming.blog45.fc2.com/tb.php/42-ecd6c861
    この記事へのトラックバック


    最近の記事


    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。