0

Bootstrap は、この慣行に気付いた多くのサイトの 1 つです。私には悪いように思えますが、十分に広まっており、私よりも経験豊富な人々によって行われているため、何かが欠けているに違いないと思います。Bootstrapの 2.1.0 バージョンを例にとると、ソースを表示すると、44 ～ 46 行目 (ページ メニューの上部) が次のようになります。

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">

各クラスに関連付けられている CSS プロパティと、できるだけ多くの人ができるだけ多くの状況で役立つように作成されたフレームワークを使用することの欠点を理解していますが、デザインをほぼ完成させたので、マークアップをクリーンアップしようとしています。（私が知る限り）2つで十分な場合に3つのdivを使用する理由はありますか？

「.container」には幅、クリア プロパティ、中央揃えのマージン設定が設定されていますが、「.navbar-inner」が親とは別の div にある理由がわかりません。親divにクラスとして追加し、ネストの1つのレイヤーを減らす方が理にかなっているようです。

この構造をそのままにしておく必要がある理由はありますか (または、将来のコーディング プラクティスに組み込む必要がある理由はありますか)。

4

3 に答える 3

3

div をネストすると、スタイルを設定して個別にアクセスできるので便利です。しかし、もちろん、それは実際のニーズに依存します。あなたが述べているように、余分な div なしで css を使用するだけで多くのことが達成できます。

于 2012-08-22T21:20:45.230 に答える
2

ほとんどの場合、次のようないくつかのクラスを組み合わせることで、マークアップの複雑さを軽減できます。

<div class="navbar navbar-inverse navbar-fixed-top navbar-inner container">

また

<div class="navbar-inverse-fixed-top-inner-container">

ただし、この種のマークアップを機能させるには、すべてのケースを満たすために非常に多くのCSSルールを生成する必要があります。

CSSとマークアップのほとんどのユースケースを分離することで、CSSとHTMLの両方の面で非常に読みやすく、それほど重くないものになります。

これにより、多くのユーザーの多くの組み合わせを満たすこともできます。

IMHO、その階層の背後にある主な原則はスケーラビリティです。を簡単に削除して別の.containerものを置くことができるため、または単に別の場所に移動することができます。これは、後でコードをもう一度読むときに、おそらく10年後に使用するためだけのものです。

私が指摘したいもう一つの原則はカプセル化です。オブジェクト指向言語（JS、C ++、C＃、Java、その他多数）でプログラミングする場合は、それに精通している必要があります。

あなたの例に基づいて：

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">

はそのコンテナを認識して.containerはいけません-あなたはそれに同意しているようです-しかし、それが固定されているか、逆であるか、またはナビゲーションバーでさえないかどうか、それ自体の状態を認識してはなりません。.navbar-inner.navbar

は.navbar-inner、子供たちに適切な動作を提供するためだけに役立つはずです。そのため、ナビゲーションバーと混ぜることができたとしても、分離しておくのが最善だと思います。

いくつかの新しいバージョンでは、またはデフォルトの動作を変更したい場合は、ナビゲーションバーとその内部で競合が発生する可能性があります。

それを避けて、意図した構造を維持してみましょう。とにかく散らかっているようには見えません...

于 2012-08-22T22:12:40.797 に答える
2

これが、さまざまなブラウザー (IE とその他のブラウザー) でスタイリング (この場合、幅/高さ、境界線、マージン、パディングなど) が最適に機能する方法です。

于 2012-08-22T21:16:44.620 に答える