CSSの速記と長短 - どちらを使用するか

ショートハンドとロングハンド - 一つは簡潔でもう一つは正確です。 1つは簡潔さへの欲求から生まれましたが、もう1つは明快さを保つためにしっかりしています。いずれにせよ、彼らは彼らの目的、長所と短所を持っています、いわば.

この記事ではCSSの速記表記と速記表記の両方にいくつかの光を当てます。.

速記プロパティとは?

速記プロパティ CSSプロパティの他のセットの値をとるプロパティです。たとえば、次の値を割り当てることができます。 ボーダー幅, ボーダースタイル そして ボーダの色 を使用して 境界 財産だけ.

基本的に,

 ボーダー：1px純青色。 

と同じです。

 ボーダー幅：1px。ボーダースタイル：ソリッド。ボーダーカラー：青。

これにより、個々のプロパティ値を別々に宣言する必要がなくなります（冗長で、時間とスペースがかかります）。また、宣言内で除外されているプロパティもリセットされます。.

どのように動作しますか?

前述のように、他のプロパティ値のセットを速記で記述します。短縮形のすべてのプロパティ値がその順番に関係なくても問題ありません。 種類が違う のように 境界. のプロパティの 同種の値 余白のように, 順序は重要です. 疑問がある場合は、時計回りに覚えておいてください!

さて、宣言で1つか2つのプロパティを見逃した場合はどうなりますか？上記の例では、無視したとしましょう ボーダースタイル.

 ボーダー：1pxブルー。 

省略形のプロパティが機能しなかったためではなく、境界線が見えなくなります。 ボーダースタイル 省略した、デフォルト値 無し. これはどのようにその速記された特性がレンダリングされたかです.

 ボーダー：1pxなし青。 

それではドロップしましょう 1px にとって ボーダー幅 そして他の二つを守る：

 ボーダー：青一色。

私たちはより広い幅だけで境界線を見ることができるでしょう。 ボーダー幅 プロパティはデフォルト値を取得しました 中.

 ボーダー：ミディアムソリッドブルー。 

これで次のようになります。 プロパティ値が省略されたとき 速記宣言で, そのプロパティはデフォルト値を取ります （たとえそれが以前に割り当てられた同じ値を上書きしなければならないとしても）.

もしあるなら ボーダー幅：1px。 前のどこかの要素 ボーダー：青一色。 同じように、ボーダー幅は 中 （デフォルト値） 1px.

言及する価値があるもう一つのことはそれです のような値は使えません 受け継ぐ, 初期 または 未設定, これは、すべてのCSSプロパティに使用できます（簡略表記）。これらを使用すると、ブラウザはその値がどのプロパティを表しているのかを正確に知ることができなくなります。 - 宣言全体が削除されます.

の すべて 財産

1つのCSS短縮プロパティがあります。 すべてのCSSプロパティに値を設定します. CSS全体の値 受け継ぐ, 初期 そして 未設定 はすべての特性に適用可能であり、したがってこれらが唯一の許容値です。 すべて 財産.

 div all：initial

これにより、 div 要素はそれが持っていたCSSプロパティ値のすべてを捨てて、それぞれのデフォルト値をリセットします.

⚠警告

悪用しないようにしましょう すべて 財産。このプロパティを適用したい要素の以前のCSSコードに触れることができない場合、それが必要になることは非常にまれな状況でのみ起こるかもしれません。.

注意： CSSプロパティ 色 各カラーチャンネルの2つの16進数値が同じである場合は、簡略表記で16進値を取ります。例えば, 背景：＃445599。 と同じです 背景：＃459;.

速記性とは?

の 個々のプロパティ 簡略表記のプロパティに含めることができるものは、省略表記のプロパティと呼ばれます。いくつかの例があります。 背景画像, 余白, アニメーション期間, 等.

なぜそれを使うべきか?

省略形の代替方法は便利ですが、欠点があります。初めに覚えておいてほしいのですが、省略されたプロパティがデフォルト値でどのように簡略化されて上書きされるかを見てください。リセットが望ましくない場合、これは問題になる可能性があります。.

を取る フォント 例えば速記のプロパティ。で使用しましょう h4 要素（デフォルトのブラウザスタイルを持つ フォントウェイト：太字）

 フォント：20px "courier new"; 

上記の簡略コードでは、値はありません。 フォントの太さ したがって、 フォントウェイト：太字（ブラウザのデフォルトスタイル）はデフォルト値で上書きされます フォントの太さ：普通 を引き起こす h4 意図されていなかったかもしれないその大胆なスタイルを失う要素.

したがって、上記の例では単純な2つの手書きプロパティ, フォントサイズ そして フォントファミリー 完璧です.

また、短縮形を使う 1つか2つのプロパティ値だけを割り当てるのはあまり役に立ちません. 1つのプロパティだけが必要なときに、省略されたものも含めてすべてのプロパティを簡単に解釈するための追加の作業をブラウザに与えます。?

プロダクションはさておき、開発段階の間、何人かの開発者（特に初心者）はのための速記よりもはるかに簡単に長表記を使うことを見つけるかもしれません 読みやすさと明確さの向上.

結論

今日では（Emmetのようなツールの助けを借りて）速いコーディングと縮小の可能性があり、速記での高い信頼性は必要ではありませんが、同時にタイプするのは論理的です マージン：0。. CSS表記法を好む文脈はさまざまです。 そして、私たちがしなければならないのは、どんな記法が私たちにとっていつ最良に機能するかを理解することです.