Akhir-akhir ini saya lagi sering pakai penamaan class seperti di Blogger, platform blogging Google. Kira-kira seperti ini:

[ .widget-Post
    [ .title
      Post title
    ]
]

Di Blogger ada yang dinamakan widget (atau gadget). Widget adalah fitur blog tambahan yang bisa ditambahkan oleh admin blog, seperti LinkList, BlogList, Text, dan kode HTML.

Kalau ditarik kesimpulan, widget itu adalah elemen blog dengan fungsi tunggal. Konsep yang mirip: Atomic Web Design.

Setiap widget biasanya bisa berpindah-pindah tempat, misalnya dari header ke footer, atau dari sidebar ke footer. Wadah yang menampung widget ini disebut juga sebagai section. Kalau kita coba adopsi ke desain web umum, kira-kira jadi seperti ini :

[ .section-Header

  [ .widget-Post
      [ .title
        Post title
      ]
  ]

]

Dengan melihat elemen-elemen di website sebagai widget, ini bisa mengurangi nama container yang generic seperti container-header, sidebar, footer, dll.

Selain itu, dengan adanya CSS nesting, styling elemen widget jadi lebih mudah.

.widget-Post {
  .post-title {
    background: yellow;
  }
}