佈局 (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 →