1

マークアップの例を次に示します。

<div class="document">
  <div class="main">
    <div class="title" />
    <div class="description />
  </div>
  <div class="sections">
    <div class="section">
       <div class="title" />
       <div class="description" />
    </div>
    <div class="section">
       <div class="title" />
       <div class="description" />
    </div>
  </div>
</div>

私のスタイルシートでは、ルールは次のようになります。

.document .main .title { ... }
.document .sections .section .description { ... }

私はこれが好き。このアプローチは私にとって常にうまく機能しており、ますます具体的なセレクターにより、何が何であるかが非常に明確になると思います (ほとんど文章を読むように)。

しかし、最近、このアプローチは良くないと言われ、代わりに次のようなことを行う必要があります。

<div class="document">
  <div class="main">
    <div class="mainTitle" />
    <div class="mainDescription />
  </div>
  <div class="sections">
    <div class="section">
       <div class="sectionTitle" />
       <div class="sectionDescription" />
    </div>
    <div class="section">
       <div class="sectionTitle" />
       <div class="sectionDescription" />
    </div>
  </div>
</div>

その理由は、クラスの「タイトル」が参照する内容のあいまいさを回避するためです。

ここの人たちはどう思うのか気になる 私のアプローチは悪いですか (つまり、紛らわしい、問題があります) ? 複雑なマークアップ用に css をフォーマットするための推奨される方法はありますか?

4

2 に答える 2

4

私はLESSスタイルシートを使い始めましたが、あまりお勧めできません。ネストされたセレクターは、コードを HTML のように構造化することで、コードを非常に読みやすくします。

.document {
    .main {
        .title {
            ...
        }

        .foo {
            ...
        }
    }

    .sections {
        .section .description {
            ...
        }

        // Same as `.sections.hidden`
        &.hidden {
            ...
        }
    }
}

HTML に関しては、冗長にする必要はありません。クラスはtitleタイトルとして機能する要素を参照し、タイトルのタイプは親要素を見ることで推測できます。魅力的でない場合、長い名前を使用しても何のメリットもありません。

于 2013-03-30T03:31:18.997 に答える