佈局 (Layouts)

避免定位相關的屬性

所有元件都應該被設計成可重複使用在任何內容上,因此要避免將下列屬性寫進 CSS 類別中。

  • Positioning (position, top, left, right, bottom)
  • Floats (float, clear)
  • Margins (margin)
  • Dimensions (width, height)

例外

除了那些本應該具有固定長寬的物件,如頭像、標誌。

從父元件定義上述屬性

請試著從父元件定義這些屬性,如下面範例中,width & float 都是寫在 list 元件上,並在非 card 元件本身。

.article-list {
    & {
        @include clearfix;
    }

    > .article-card {
        width: 33.3%;
        float: left;
    }
}

.article-card {
    & { /* ... */ }
    > .image { /* ... */ }
    > .title { /* ... */ }
    > .category { /* ... */ }
}

該如何定義佈局外的 margin?使用輔助類別(Helper) Continue →

results matching ""

    No results matching ""