CSS プロトタイピングを高速化するための html5 アプローチ
または:<style>タグはもはや頭だけのものではありません!
CSSのハッキング
デバッグ中で、page-css を変更したい、特定のセクションのみを改善したいとしましょう。スタイルをインラインで作成するのに手っ取り早く面倒でメンテナンスの難しい方法を使用する代わりに、私が最近行っているように、段階的なアプローチを取ることができます。
インライン スタイル属性なし
css をインラインで作成しないでください。 <element style='color:red'>つまり<img style='float:right'>、非常に便利ですが、後で実際の css ファイルに実際のセレクターの特異性が反映されません。それを保持すると、後でメンテナンスの負荷がかかって後悔することになります。
<style>代わりにプロトタイプ
インライン CSS を使用する場所では、代わりにページ内<style> 要素を使用します。それを試してみてください！すべてのブラウザーで正常に動作するため、テストに最適ですが、必要なときにいつでもそのような css をグローバル css ファイルに適切に移動できます! ( *セレクターは、サイトレベルの特異性ではなく、ページレベルの特異性しか持たないことに注意してください。一般的すぎることに注意してください) css ファイルと同じようにクリーン:
<style>
.avatar-image{
float:right
}
.faq .warning{
color:crimson;
}
p{
border-left:thin medium blue;
// this general of a selector would be very bad, though.
// so be aware of what'll happen to general selectors if they go
// global
}
</style>
他の人のインライン CSS のリファクタリング
場合によっては、自分自身が問題でなくても、他の人のインライン CSS を扱っていて、それをリファクタリングする必要がある場合があります。これは<style>ページ内のもう 1 つの優れた使用法です。インライン css を直接削除して、リファクタリング中にクラス、ID、またはセレクターのページにすぐに配置できます。セレクターに十分注意を払っていれば、コピー & ペーストするだけで、最終結果を最後にグローバル css ファイルに移動できます。
css のすべての部分をすぐにグローバル css ファイルに転送するのは少し難しいですが、ページはめ込み<style>要素を使用すると、代替手段が得られます。