components ที่ซ้อนกัน

<div class='article-link'>
  <div class='vote-box'>
    ...
  </div>
  <h3 class='title'>...</h3>
  <p class='meta'>...</p>
</div>

บางทีมันจำเป็นที่ต้องให้ components ซ้อนกัน มาลองดูแนวทางการเขียน

Variants

แต่ละ component อาจจะต้องแสดงผลต่างออกไปเมือนมันไปอยู่ใน component อื่น ให้ระวังการแก้ไข component นั้นโดยการอ้างอิงผ่าน component ที่อยู่ด้านนอก

.article-header {
  > .vote-box > .up { /* ✗ ระวังแบบนี้ */ }
}

แทนที่จะทำแบบนั้น ให้ใช้วิธีเพิ่ม variant เข้าไป แล้วใช้มันที่ component ด้านใน

<div class='article-header'>
  <div class='vote-box -highlight'>
    ...
  </div>
  ...
</div>

.vote-box {
  &.-highlight > .up { /* ... */ }
}

การทำให้ components หลายชั้น ดูง่ายขึ้น

บางครั้ง การซ้อน components จะทำให้ HTML ดูรก

<div class='search-form'>
  <input class='input' type='text'>
  <button class='search-button -red -large'></button>
</div>

เราสามารถทำให้มันอ่านง่ายขึ้นได้ด้วยการใช้เทคนิค @extend ใน CSS preprocessor ของเรา

<div class='search-form'>
  <input class='input' type='text'>
  <button class='submit'></button>
</div>

.search-form {
  > .submit {
    @extend .search-button;
    @extend .search-button.-red;
    @extend .search-button.-large;
  }
}

แล้ว element ที่ซ้ำกันเยอะ ๆ เช่นการสร้างรายการละ? ลองศึกษาการเขียน Layouts

อ่านต่อ →