6

いくつかの異なるサイトに含まれるお問い合わせフォームを作成しています。

お問い合わせフォームのスタイルとサイトのスタイルの両方が含まれますが、サイトのスタイルはよくわかりません。連絡先フォームのスタイルがサイトのスタイルによって簡単に上書きされることを望んでいますが、連絡先フォームのスタイルが誤って上書きされることは望ましくありません。

たとえば、サイト開発者が送信ボタンの色を変更したい場合、!important過度に特殊な#id #id element .class #id element.classタイプのセレクターを使用せずに簡単に行う必要があります。

しかし、一方、サイト開発者がセレクターを使用してスタイルを作成した場合、input { background: yellow; }または#site-wrapper input { background: yellow; }クラスを参照するコンタクトフォームのスタイルを上書きしたくない場合は、.contact_input { background: white; }

私の質問は、この状況でのベストプラクティスは何ですか? フォームにIDを付けて、それをすべてのセレクターに追加することを考えていたので、セレクターはなり#contactform .contact_input { background: white; }、競合を回避するという点ではうまくいくと思いますが、それを行うためのより良い方法があるかどうか疑問に思っています。ページのレンダリングに関しては、少し効率が悪いようです。大したことではないかもしれませんが、私はそれをそこに投げ出して、人々がどう思うか見てみようと思いました.

4

7 に答える 7

4

That's a quite hard cause both, the selector itself and its location in sheet do matter. Also the fact that there is no only one, true way of writing CSS doesn't help.

I guess it would be the best if you use ID and tag selector. Additionally use attribute selector:

#contact-form input { ... }
#contact-form input[type=email] { ... }
#contact-form select { ... }

However you should mention that it's strongly recommended to put that sheet on the top of others, eg:

<link type="stylesheet" href="/styles/contact-form.css" />
<link type="stylesheet" href="/styles/main.css" />

Why that approach?

Usually a developer will want to forms look the same all over the website, that's why he will use tag name selector:

input  { ... }
select { ... }

These selectors are weaker that #contact-form input so they won't override anything. However sometimes it's necessary to override some rules so the developer will use #contact-form input selector which is pretty natural in such case.

If sheets has been attached as a recommendation says developer's styles will override yours, despite the fact that both have selectors with exactly same strength. That's why the location of the rules matter.

于 2010-12-19T14:45:57.957 に答える
1

私はあなたがこれについてあなた自身の質問に答えたと思います：

#contactform .contact_input { background: white; }

CSS！

于 2010-12-23T13:59:18.627 に答える
0

あなたの最善の策は、次のようなスキーマを使用することです。

input.JSCF_formInput{
   color: white !important;
   ...
}

そうすれば、あなたのスタイルはユニークな{Josiah Sprauge Contact FormのJSCF}であり、具体的で重要なものとして指定されます...

于 2010-12-15T17:42:07.523 に答える
0

#site-wrapper input { background: yellow; }[...] クラスを参照するコンタクトフォームのスタイルを覆したくありません。.contact_input { background: white; }

これらのセレクターを使用する場合、基本的にはできません。s はes#idよりも具体的であり、それだけです。ジェネリックであることを意図しているため、最初のルールからセレクタービット.classを削除することをお勧めします。#site-wrapper

于 2010-12-19T14:31:00.960 に答える
0

BEM方法論の使用を検討することもできます。BEMには、特異性の問題をさまざまな方法で解決する非常に優れたクラス命名スタイルがあります。

于 2016-09-24T22:29:04.293 に答える
0

一種の「名前空間」パターンを採用する必要があると思います。

たとえば、すべてのスタイルを で開始し#ds_contactform、コードのセマンティクスや便利なメンテナンスを台無しにすることなく、できるだけ具体的にします。

特定のセレクター (#id または複数の ID を使用) を使用することが非効率的だとは思いません。

PS Andy Clarke の素晴らしい記事CSS: Specificity Warsもお勧めします。

于 2010-12-19T15:09:35.843 に答える
-2

!important を使用すると、ID またはクラスに関して常にスタイルがオーバーライドされます。詳細については、このリンクをご覧ください。
http://www.electrictoolbox.com/using-important-css/

特異性の詳細については、このリンクを参照してください。 http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

于 2010-12-24T07:07:10.487 に答える