CSS！重要：それは何であり、いつそれを使用するか

公開: 2020-06-27

CSSの最も有用で論争の的となる要素の1つは、 ！importantプロパティです。すべての設計者は、ある時点でCSSコードのタグに出くわします。それが起こったときに浮かび上がる本当の質問とジレンマは、「それは正しく使用されたか」です。 CSS ！importantは非常に強力なツールであるため、開発者と設計者は、CSSを使用する際のベストプラクティスに注意する必要があります。 CSS！importantは、あらゆる種類のスパゲッティコードにつながる可能性があり、それは誰にとっても良くありません。

CSSは何が重要ですか？

CSSの！importantプロパティは、それがアタッチされているルールが他のルールよりも優先されることを示します。これは、使用される要素とセレクターの最優先事項であるため、開発者と設計者は、サイトの個々の部分のスタイルを特定の方法で制御できます。ほとんどの場合、これは、 styles.cssまたはcustom.cssに含まれているサイトのデフォルトのスタイルを上書きすることを意味します。

！importantの各インスタンスは、それが表示される特定の行にのみ適用されます。したがって、スニペットのすべてではありませんが、一部でプロパティを使用できます。 ！importantのCSSコードは次のようになります。

.example-class {
	color:#fff!important;
}

！importantで覚えておくべき主なことは、次の2つです。

重要な単語の前には、常に感嘆符（！）を付ける必要があります。
セミコロンは、！important宣言の後、常に行末にある必要があります

！importantは、必要に応じて、ページごとまたはモジュールごと（Diviのようなページビルダーの場合）で使用することもできます。ただし、これにより、どの要素をオーバーライドするかについてのスパゲッティコードを取得できます。どのページとどの順序で？

すべての設計者は、ある時点でCSSの重要なタグに遭遇し、決定を下す必要があります。 これは、サイトのデフォルトのスタイルを上書きする価値がありますか？

時々、答えは確かにイエスです。他の時には、それは難しいと速いです。現在または将来、CSSが何も壊さない可能性がある時期を知るために重要な、CSSのいくつかのベストプラクティスを見てみましょう。

CSSを使用する場合重要

！importantの主な（そして最も広く受け入れられている）使用法は、一次セレクターと相互作用するクラスのスタイルを変えたい場合です。ブログのタイトル見出しとメタ情報を、サイトの他の部分とは異なるフォントと色にしたい場合があります。これらの要素のデフォルトのスタイルは、CSSファイルのh1セレクターとpセレクターから継承されます。 .cssファイルまたはWordPressテーマカスタマイザーのいずれかでサイトのデフォルトに設定したものがすべて表示されます。

p {
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1.7;
	color: #111;
	font-family:'Roboto';
}

h1 {
	margin-top: 30px;
	margin-bottom: 15px;
	color: #000;
	font-family:'Lato';
}

クラスを使用して、必要な個々の要素（ブログ投稿のタイトルとメタ情報）を変更できます。 entry-titleおよび.post-meta。 また、親h1とpからいくつかのスタイルを継承させたいので、 h1.entry-titleとp.post-metaを使用してこれらを具体的に呼び出します。

h1.entry-title, p.post-meta {
	color: white!important;
	font-family:'Poppins'!important;
}

これらのスニペットを同じスタイルシートに含めると、投稿タイトルと投稿メタが表示されている場合を除いて、すべての場合にトップコードが有効になります。 CSSの重要なプロパティはデフォルトを上書きし、それを細かく制御できるようにします。

この種の個別のカスタマイズは、 ！importantの主な用途です。しかし、それだけではありません。

クラス、ID、および要素を保護するために重要なCSSを使用する

また、 ！importantを使用して、ページのさまざまな要素を将来にわたって保証することもできます。これにより、サイトでのさらなる開発が予期しない方法で微調整される可能性があります。たとえば、サブスクライブボックス、メールオプトイン、またはYouTube埋め込み用に特定のスタイルを開発できます。これらはそれぞれ、さまざまな場所のスタイルシートからさまざまなスタイルを継承する場合があります。 ！importantタグを使用すると、フォームやボタンのスタイルを慎重に変更する必要があります。

要素にクラスまたはIDで名前を付けてから、すべての行に！importantを付けます。

.youtube-embed {
	font-family:'Exo'!important;
	font-weight: 700!important;
	line-height:1.4rem!important;
	margin-top:25px!important;
	margin-left:auto!important;
	margin-right:auto!important
	color:#449928!important;
	padding:11px!important;
	background:#998899;
}

出来上がり！スタイルシートの定期的な変更により、将来性が保証されます。

インラインスタイルの使用

これは、多くの人に思い浮かぶかもしれないし、出ないかもしれないユースケースの1つです。以前は非常に一般的でしたが、投稿やページを手動でコーディングすることから離れたため、現在では少なくなっています。ただし、GutenbergブロックのHTMLまたはWordPressクラシックエディターのテキストビューを掘り下げたことがあれば、インラインCSSスタイルで！importantを絶対に使用できます。

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now!</p>
</div>

これはいくつかの理由で重要です。 1つ目は、特にstyle =” x：y！important;”を使用して、ページ内の任意のコード行を制御できることです。 2つ目は、そのページにすでに適用されているCSSを上書きできることです。その値に！importantがある場合でも。例えば：

<style> 
	p { 
	    color:#313373!important;
	    font-size:2rem; 
	} 

    </style> 

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now, even though there's another !important tag
		applied to the paragraph selector on this page!</p>
</div>

同じセレクターで！importantを使用する<style> </ style>を使用した埋め込みHTMLスタイルがある場合でも、特定の段落を対象とするインラインCSSがレンダリングされます。

重要なタグの積み重ねに注意してください

これらの最後のいくつかの例を取り上げて、注意を促しましょう。これらのタイプの使用は、少量で問題ありません。あなたはそれらを一回限りの状況で使うことができます、そしておそらく誰もそれで問題を抱えることはないでしょう。なぜなら、1回限りとして、 ！importantを使用して個々の要素のスタイルを設定したからです。 それが意図されているものです。

ただし、 ！importantを松葉杖として、スタイルシートを頻繁に編集しないようにする方法として、または同じサイトでの複数の問題のクイックフィックスとして使用し始めた場合、それがスパゲッティコードの始まりです。特にあなたではない将来の開発者のために。 ！importantがレンダリングされる順序を理解するのに苦労するかもしれませんが、将来の開発者はそれが不可能であることに気付くかもしれません。

最終的に起こることは、複数のスタイルシート、ページ、およびモジュールと相互作用する非常に多くの積み重ねられた！importantがサイト全体にあり、通常のCSSがレンダリングすることはめったにないということです。また、 ！importantのフラグが付けられたものでもレンダリングされない場合があります。さらに悪いことに、サイトのスタイルを破棄して再度構築する場合を除いて、その後のすべての変更には、表示するためだけに重要なフラグを立てる必要があります。

まとめ

重要なCSSは、正直なところ、デザイナーのツールキットの中で最も強力なツールの1つです。部下や同僚に影響を与えることを心配せずに、サイト上の要素を簡単に調整できます。しかし、使いすぎると、効果が連鎖してページや要素が相互に上書きしようとする悪夢に陥り、かつて重要だったものがデフォルトになりますが、デフォルトとして設定することはできません。したがって、 ！importantは慎重に使用するようにしてください。そうすることで、目立つものや将来を見据えたものが必要になったときに、正しい方法でそれを実行できます。

プロジェクトでCSS！importantを使用することについてどう思いますか？

wan wei /shutterstock.comによる記事特集画像