Desain Nested Widget

tmp7
Feb 14

Ini adalah bagian kedua dari posting Desain Web: Adopsi Sistem Nama Class Widget Blogger.

Kalau kita terapkan konsep section dan widget Blogger ke desain web umumnya, ada kemungkinan widget yang satu bisa berada di dalam widget yang lain. Misalnya, widget untuk komentar berada di dalam widget postingan.

html
[ .widget .widget-Post
  
  [ .title
    Post title
  ]
  
  
  [ .widget .widget-Comment
    [ .title
      First comment
    ]
  ]
  
]

Tantangan di contoh ini adalah kita harus memikirkan bagaimana memisahkan styling .title di .widget-Post dengan .title di .widget-Comment.

Tapi itu solusinya mudah saja dengan CSS @scope:

css
.widget-Post {
    
  @scope (&) to (.widget) {
    .inner {
      background: yellow;
    }
  }
    
}

Ini memastikan styling .inner tidak diterapkan ke sub-widget.

Komentar