SMACSS, BEM ve OOCSS taşınabilir değil mi?

Question

OOCSS ile ilgili bir sorunum var. Daha taşınabilir olması gerekiyordu, ama genellikle nasıl şeyler yaptığımla kıyaslandığında, onu daha az buluyorum.

Benim örnek:

Ben bir widget Yorum var. Ana içerik gövdesinde (beyaz bir arka plana sahip), referansın siyah bir yazı tipi vardır. Ancak altbilgisinde (mavi bir arka plana sahip), referansın beyaz bir yazı tipine ihtiyacı vardır.

OOCSS önce, böyle bir şey yapacağını: Bu "eski" yaklaşımıyla

#main-content .testominial { 
    color: #000000; 
} 
#footer .testominial { 
    color: #FFFFFF; 
} 

, ben altbilgisine içerik alandan benim widget'ı sürükleyebileceğinizi ve renkleri işe basitçe olur - İstemem widget'in CSS veya DOM sınıflarımı değiştirmem gerekiyor. Yeni OOCSS/BEM ile

, ben kimliği (veya yere) için çift .testimonial sınıf gerekiyordu DEĞİL am ziyade ben şöyle alt sınıf olmalıdır:

.testominial { 
    color: #000000; 
} 
.testominial--footer { 
    color: #FFFFFF; 
} 

sorun Artık DOM'a gitmeden ve referans widget'ındaki sınıfları değiştirmeden, referans alanımı içerik alanından altbilgiye sürükleyemem. - Bir geliştirici tarafından manuel müdahale gerektirdiğinden, LESS taşınabilirdir; Bir editör önce onu sürükleyebilir ve stil otomatik olabilir.

Bir şey mi eksik? Orada gerçek bir gerçek dünya örneği yok mu?

Answer 1

testimonial adının yanı sıra footer işaretini de dikkate almanız gerekir.sınıflar kendi sayfa bağlamı tamamen bağımsızdır örnekte

.primary-box { } 
.primary-box--reduced { } 
.primary-box--standout { } 

:

Bu örneği ele alalım. Sonuç, sınıfların tamamen yeniden kullanılabilir olmasıdır. Sayfadaki herhangi bir kutu, yukarıdaki sınıfları alabilir ve tam olarak tanımlandığı şekilde biçimlendirilmesini bekleyebilir.

Örneğin, olabilir:

<header> 
    <div class='primary-box primary-box--reduced'></div> 
</header> 
<div class='content-box'> 
    <p class='primary-box primary-box--standout'></p> 
</div> 
<footer> 
    <div class='primary-box primary-box--reduced'></div> 
</footer> 

tasarımcı, kendine güvenen geri gelir ve çarpıcı kutularının dolgu bunları bu stilleri doğrudan gitmek ve ince ayar yapabilirsiniz tweaks Şimdi zaman o sadece olacak alanlar Etkilenenler, HTML'de bu sınıflara sahip alanlar olacaktır. Ayrıca, <header> numaralı telefondan, .primary-box--reduced numaranızdan hareket ettirmeye karar verdiğinizde, bunun üstüne ya da altbilgiye yerleştirilen menü çubuğuna, stillerin tamamen geleceğinden emin olabilirsiniz. Eğer bir yere başka bir öğe, belki bir primary-box--standout veya başlığında sadece bir varsayılan primary-box gerektiğinde

, şunu oluşturmak ve sınıfları eklemek, bunlar stilleri tamamen izleyecektir.

Beklenmeyen stilleri hiçbir zaman devralmayacaksınız.

Bu çok gerçek bir dünya örneğidir, yakın zamanda inşa ettiğim bir site neredeyse böyle inşa edilmiştir, hemen hemen hepsini söylüyorum çünkü hala öğreniyorum, ama en az sorunla karşılaştığım bitleri garanti edebilirim. Çok akışkan tasarımları ile hızlı hareket eden proje, spesifik olmayan içerikli projelerdi. Önemli olan, bağlam eksikliğidir. İlk örnekte, .testimonial--footer çok bağlam bağımlıdır, gerçekten yalnızca altbilgideki referanslarda kullanmanız gerekir.

Ve sihirli CSS Wizardry cover this exact topic

DÜZENLEME tarafından sanki

: benim cevap yapılan bir yorum ile yardımcı olmak için bu örneği eklendi. Bu, BEM veya OOCSS değil, ancak the SMACSS approach'a biraz daha yakın. Ben css ile sorunların üstesinden nasıl ve melez BEM/SMACSS yaklaşımdır:

sırayla Loaded:

• modül dosyaları gibi .primary-box
• sayfa bölümü dosyaları gibi .header veya .call-to-action
Her dosya daha sp alır böyle

.about-us olarak veya .contact

sayfa dosyaları, ecific, aynı anda daha karmaşık ve modüller inşa ederken. Daha spesifik bir iç içe sınıf gösterimi kullanılarak modül stilleri aşırı binmek hangi

.header { 
    .primary-box { 
    color: #000; 
    } 
} 

: Yukarıdaki örneklere Bina ve umarım OP yardımcı sen gibi stilleri görebiliyordu.Hala .header gibi bir sınıf adını kullanarak önleyeceğini unutmayın - bu yeniden kullanılabilir oluyor gibi her yerde karışıklık

Sonraki olmadan daha iyi olurdu .banner-standout, hatta görebiliyordu:

.about-us { 
    .header { 
    .primary-box { 
     color: #f00; 
    } 
    } 
} 

bulduğum bu çok iyi çalışıyor BEM'in bağlam özgürlüğünü korurken bağlam için gerçek projelerde, bu zinciri de modüllere itmek için mümkün olduğunca çok teşvik ediyorum. Yeni bir genel sayfa bölümü veya modülü tanıyıp isimlendirmeyi ve dosyaları uygun şekilde yeniden düzenlerseniz hayat daha kolay olur. Kodun özenle düzeltildiği bir projede, sayfa dosyalarında hiçbir şeyim yok.

Answer 2

Bu "eski" yaklaşımla, widget'ımı içerik alanından altbilgiye sürükleyebilirim ve renkler basitçe çalışır - Widget'ın CSS veya DOM sınıflarımı değiştirmem gerekmez.

siz "sürükle" konteyner .main-footer için konteyner .main-content den eleman .testominial, yani sen DOM değiştirmek ise

. Böylece, değiştiriciyi CSS sınıflarında da güncelleyebilirsiniz, ek bir ücret yoktur.

BEM'in amacı, CSS sınıflarını tekrar kullanılabilir hale getirmektir. Aşağıdaki değiştiriciler çeşitli ortamlarda yeniden kullanılabilir.

CSS:

.testominial { 
} 
.testominial--darkFg { 
    color: #000; 
} 
.testominial--lightFg { 
    color: #FFF; 
} 

HTML: Eski yaklaşımla

<main class="main-content"> 
    <div class="testominial testominial--darkFg">...</div> 
</main> 
<footer class="main-footer"> 
    <div class="testominial testominial--lightFg">...</div> 
</footer> 

, CSS kodunu yeni bir kapta yeni bir blok .testominial gerektiği her defasında değiştirmek gerekecek. HTML ve CSS güçlü bir şekilde birleştirilmiştir ve bazı CSS kodları çoğaltılacaktır.

BEM yaklaşımıyla, tasarımcı her defasında yeni bir blok görünümünün varyasyonunu ekleyeceği zaman bir miktar CSS kodu eklemeniz gerekecektir. HTML ve CSS daha az birleştirilmiştir ve CSS daha iyi yeniden kullanılır.