7

テーブルを含むいくつかのページを生成する必要があると仮定します。元の要件は、すべてのテーブルが500pxであることです。

CSSを次のように記述します。

table
{
    width: 500px;
}

これは、すべてのテーブルに全面的に適用されます。さて、いくつかのテーブルが600pxになるように要件を変更した場合はどうなるでしょうか。CSSを変更する最良の方法は何ですか？私はテーブルにクラスを与えるべきですか

table.SizeOne
{
    width: 500px;
}

table.SizeTwo
{
    width: 600px;
}

それとも、このような変更に対処するためのより良い方法はありますか？

4

8 に答える 8

12

あなたの提案では、すべてのテーブル、既存のテーブル、および新しい幅の広いテーブルにクラスを追加する必要があります。「数ページ」と言うので、テーブルは数個しかないと思いますが。

500pxのテーブルを標準、600pxを例外と見なすことができる場合は、デフォルトを設定し続ける方がおそらくより便利です。

table
{ 
    width: 500px; 
} 

table.Wide /* or a more semantic class name */
{ 
    width: 600px; 
}
于 2010-06-17T12:35:59.443 に答える
6

個人的には、ナビゲーションやコンテンツなど、作業しているものにちなんで名付けられたクラスを使用するのが好きです。クラス名を使用してサイズを指定している場合は、インラインスタイルを実行する方法のラウンドアバウトのように感じます。入ってCSSを見ている人は、彼らが何を扱っているのか本当にわかりません。

于 2010-06-17T12:24:35.263 に答える
6

これは、要件とCSSの変更に関するものであるほど、CSSの質問のようには感じません...より具体的には、CSSのコンテキストでの要件のトレーサビリティ...

これは、すべてのテーブルに全面的に適用されます。ここで、一部のテーブルが600pxになるように要件を変更するとどうなりますか。

その要件は、「一部のテーブルの幅が600ピクセルである」とだけ言っているのではなく、もしそうなら、要件を引き出すためのより良い方法が必要です。

代わりに、おそらく「HRの「スタッフディレクトリ」ページのテーブルの幅は600ピクセルになります」のようになります。CSSルールにそれを具体的に反映させてください！

body#staff-directory table {
    width:600px;
}

...または「検索結果のテーブルの幅は600ピクセルになります。」：

table.search-results {
    width:600px;
}

目を転がして、「でも、似たようなCSSルールがたくさんある」と思うかもしれません。しかし、彼らはすでに一度気が変わったので、彼らが再びそれをしたとしても驚かないでください！

これらの「冗長」ルールは、クライアントが要件を再度変更し、「HRの「スタッフディレクトリ」ページのテーブルの幅は600ピクセル、検索結果のテーブルの幅は800ピクセル、他のすべてのテーブルの幅は500ピクセル）と言う場合に役立ちます。 「」
これで、これらの不格好でわかりにくいCSS属性「Size1」と「Size2」があなたを驚かせました。

于 2010-06-17T12:46:39.133 に答える
5

SizeOneやSizeTwoの代わりに意味のある名前のクラスを付けますが、それが最善のアプローチです。

于 2010-06-17T12:23:09.290 に答える
5

bodyクラス（bodyタグに指定されたクラス）などを使用して、基本設定をオーバーライドするクラスをさらに定義できます。たとえば、テーブルの一般的な幅が100に設定されていて、特定のページ（bodyclass'page2'）で、幅を50pxにする必要がある場合は、次のように行うことができます。

table{
 width: 100px;
}

.page2 table {
 width :50px;
}

したがって、2番目のクラスはbodyclass = "page2"を持つ唯一のページで前者を上書きし、それ以外の場合は幅が100になります。

セクションに基づいて本体のクラス名を設定することをお勧めします。

于 2010-06-17T12:32:51.453 に答える
1

ページ全体に複数の異なるレイアウトがある場合は、いくつかのレイアウトクラスを作成し、それらをボディ（または他の含むタグ）にアタッチすると便利な場合があります。

<body class="wide">
    <!-- stuff -->
    <table>...</table>
</body>

次に、CSSで：

table {width:500px} /* defaults for all tables regardless of class */
body.wide table {width:600px} /* overrides for specific layouts */
body.slim table {width:300px}

時間の無駄のように見え、テーブルだけの場合ですが、画像やdivなどのスタイルを変更する場合は、HTMLマークアップを大幅に節約できます。

#wrapper {width:500px;padding:20px 10px}
body.wide #wrapper {width:600px}
body.slim #wrapper {width:300px;padding:10px 5px}

table {width:500px} /* defaults for all tables regardless of class */
body.wide table {width:600px} /* overrides for specific layouts */
body.slim table {width:300px}

img {width:500px}
body.wide img {width:600px}
body.slim img {width:300px}

HTMLの99％は同じままであり（データベースからこれを取得していて、使用するたびにそれを適応させたくない場合に非常に便利です）、bodyクラスを変更するだけです。

于 2010-06-17T12:39:32.113 に答える
0

最良の方法は、親が誰であるかに基づいてテーブルを変更することです。たとえば、特定のページには異なるIDが必要です。例：

<body id="contacts">
  <table>
    <tr>
      <td>Content</td>
    </tr>
  </table>
</body>

したがって、CSSでは次のようになります。

table {
  width: 500px;
}

#contacts table {
  width: 600px;
}

このアプローチの利点は、HTMLファイルに何も追加することなく、完全にCSSで作業していることです。このようなクラスを追加すると、将来的にコードが管理しにくくなります。

HTMLが適切なカスケードを念頭に置いて作成されていない場合は、テーブルだけにクラスを追加するよりも、要素に適切なIDを追加する方がはるかに優れています。あなたが投入しなければならない仕事の見返りははるかに大きいです。

于 2010-06-17T12:39:59.927 に答える
-5

私はそれを書きます：

table
{
    width: 500px;
}

SVNのようなバージョン管理を使用します。あなたの提案が物事を信じられないほど複雑にしていること。またはバージョン管理なし：

 table
    {
        /*width: 500px;*/
         width: 600px;

    }

私の意見では、多くのクラスを追加すると、CSSのオブジェクトが無効になります。

于 2010-06-17T12:31:12.470 に答える