Giriş / arka plan: CSS bileşenleri
Nispeten büyük bir web sitesi için SASS ile çalışıyoruz ve bileşenlerde CSS'yi yönetmeye çalışıyoruz. Bileşenlerin temel fikri, bir bileşenin DOM'daki kapsayıcı öğelerinden bağımsız olarak her yerde aynı görünmesi gerektiğidir.
Yani, böyle şeylerden kaçınmak istiyoruz (SASS):
// User picture component.
.user-picture {
img {..}
}
// Override user picture for the frontpage.
body.page-front .user-picture img {..}Bunun yerine, kullanıcı resminin ön sayfada farklı görünmesini istiyorsak, farklı bir bileşen olması gerekir. Örneğin, SASS mirası veya bir karışım ile:
// User picture component.
.user-picture {
img {..}
}
// User picture on frontpage.
.user-picture-front {
@extend .user-picture;
img {..}
}Ardından, ön sayfadaki html'yi ayarlamamız gerekir, böylece kullanıcı resminin farklı sürümünü kullanır.
Çok uzak çok iyi. Yukarıda, CSS bileşenlerinin ne hakkında olduğu hakkındaki mevcut anlayışımın bir örneği olarak yayınladım.
Soru: Değiştirici sınıflar - iyi uygulama?
Şimdi bir sorunla karşı karşıyayız: Bazı sayfalarda koyu (siyah) bir arka plan var ve bu nedenle metin, kenarlıklar ve sayfaların beyaz olması gerekiyor.
Bu bir şekilde bileşenlerin ötesine geçiyor: Aynı bileşen varsayılan olarak koyu renkli metne sahip olmalı, ancak koyu arka planı olan bir kapsayıcıdaysa beyaz metne sahip olmalıdır.
Bu harika fikrimiz var:
// Generic modifier class for all dark-background containers.
.white-on-black {
// Generic text color change.
color: white !important;
}
// Component.
.my-component {
border: 1px solid blue;
// Special for white-on-black.
.white-on-black & {
border-color: yellow;
}
}Dolayısıyla white-on-black, dahili öğelerin görüntülenme biçimini değiştiren harici bir "değiştirici" veya "bağlam" sınıfımız var.
Motivasyon, bileşenin kendisinin DOM'da bir kap öğesinin arka planından sorumlu olmamasıdır.
Bu çalışıyor. Tek sorun, koyu arka plan kabının içinde beyaz bir arka plan kabımız olması. Ama bu bir yana, iyi çalışıyor.
Soru, bunun bileşenleri mimari olarak birbirinden bağımsız tutmaya çalışmanın arka planı ile mimari olarak iyi bir uygulama olup olmadığıdır.
Alternatif, örneğin metin ve kenarlıklar için my-component-on-dark-bgmiras kalan my-componentve farklı bir renge sahip olan farklı bir bileşene sahip olmaktır . Ancak burada html bileşenini üreten (örn. PHP) kodunun dış hakkında, yani karanlık bir bg'nin kullanılıp kullanılmayacağını bilmesi gerekir. Bileşeni oluşturan PHP kodunun, kapsayıcıyı oluşturan PHP kodundan ayrı olduğu varsayılarak. Bu hala yönetilebilir, ancak yukarıda açıklandığı gibi bir değiştirici sınıflı model için bir argüman olabilir.
notlar
Aslında CSS sınıflarımıza projeye özgü bir önek önekini ekliyoruz. Bunu basitlik için burada bıraktım ve hangi projede çalıştığım kimsenin işi olmadığı için :).