<button"> <button"> <button" />

CSS sınıfı adlandırma kuralı

Bir web sayfasında, çoğu insanın hangi sınıf adlarını kullanacağı iki kontrol bloğu (birincil ve ikincil) var mı?

Seçenek 1:

<div class="primary controls">
 <button type="button">Create</button>
</div>

<div class="secondary controls">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

Seçenek 2:

<div class="primary-controls controls">
 <button type="button">Create</button>
</div>

<div class="secondary-controls controls">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>
62
katma yazar Adrien Be, kaynak

4 cevap

Sorunun doğrudan yanıtı, Curt tarafından bunun hemen altında .

CSS sınıfı adlandırma kurallarıyla ilgileniyorsanız, BEM adlı bir çok kullanışlı sözleşmeyi ( Blok, Öğe, Değiştirici ) düşünmeyi öneririm.

GÜNCELLEŞTİRME

Lütfen bu konuyla ilgili daha fazla bilgi edinin - http://getbem.com/naming/ - bu daha yeni bir sürüm. aşağıdaki cevabı geçersiz kılar.


Ana ilkeler:

  • Bağımsız Bloklardan bir sayfa oluşturuldu. Blok, sınıf adının "b-page" veya "b-login-block" veya "b-controls" gibi bir "b-" ön ekine sahip olduğu bir HTML öğesidir.

  • Tüm CSS seçiciler bloklara dayanır. "B-" ile başlatılmamış hiçbir seçici olmamalıdır.

İyi:

.b-controls .super-control { ... }

Kötü:

.super-control { ... }
  • Zaten sahip olduğunuz bloğa benzer başka bir bloğa (başka bir sayfada belki) ihtiyacınız varsa, yeni bir tane oluşturmak yerine bloğunuza bir düzenleyici eklemeniz gerekir.


Example:

<div class="b-controls">
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

Değiştirici ile:

<div class="b-controls mega"> <!-- this is the modifier -->
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

Daha sonra CSS'de herhangi bir değişiklik belirleyebilirsiniz:

.b-controls { font: 14px Tahoma; }
.b-controls .super-control { width: 100px; }

/* Modified block */
.b-controls.mega { font: 20px Supermegafont; }
.b-controls.mega .super-control { width: 300px; }

Herhangi bir sorunuz varsa, sizinle tartışmaktan memnuniyet duyarım. İki yıldır BEM kullanıyorum ve bunun şimdiye kadar tanıştığım en iyi kongre olduğunu iddia ediyorum.

76
katma
@IvanIvanov JS için kimlikler kullanıyorum. Bu durumda akılda tutulması gereken bir şey var mı?
katma yazar 0fnt, kaynak
@ClaudioLudovicoPanetta ids (doğru olması için html id özniteliği), aynı şekilde, sınıflardan daha spesifiktir, yani başka bir kimlik kullanmazsanız stil sayfasında nerede olduklarından bağımsız olarak aşırı sürüş yapacaklardır, ya da! veya 256 yuvalanmış sınıflar - CSS hakkında anlayabileceğiniz en önemli şeylerden biri, özgüllük ve bu tuzaklardan nasıl kaçınılacağıdır - biraz gelişmiş bir blog varsa, istisnai bir yazı: csswizardry.com/2014/07/hacks-for-dealing-with-specificity
katma yazar Toni Leigh, kaynak
Ne hakkında id = ""? Onlar için herhangi bir adlandırma kuralı var mı?
katma yazar Claudio Ludovico Panetta, kaynak
@IvanIvanov bana dezavantaj hakkında daha fazla bilgi verir misiniz? Ben css'de gerçekten kötüyüm. Buradan öğrenebileceğim bazı linkler: D
katma yazar Claudio Ludovico Panetta, kaynak
@IvanIvanov ifadeniz ile katılıyorum teşekkür ederim: D
katma yazar Claudio Ludovico Panetta, kaynak
mükemmel Ivan Ivanov
katma yazar Omar Faruq, kaynak
@ClaudioLudovicoPanetta bu özel sözleşmede CSS stilleri için ids kullanmamanız tavsiye edilir. Onları kullanmanın hiçbir avantajı yok ama büyük bir dezavantaj var.
katma yazar Ivan Ivanov, kaynak
@ClaudioLudovicoPanetta dezavantajı, kimliklerin benzersiz olması ve stillerin benzersiz olması için belirli bir neden yoktur.
katma yazar Ivan Ivanov, kaynak
@ kullanıcı247077, sizin için CSS yazmadığınız sürece her şey yolunda.
katma yazar Ivan Ivanov, kaynak

Ben giderdim:

<div class="controls primary">
 <button type="button">Create</button>
</div>

<div class="controls secondary">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

CSS'niz doğru bir şekilde yapılandırıldığı sürece, primary ve ikincil , uygulamanızda başka bir şeyle çakışmamalıdır:

.controls.primary {}

Ayrıca, ana sınıfınızdaki kodda primary / ikincil 'in önüne kontroller koydum.

Bence ilk setin altından çok daha okunabilir olduğunu düşünüyorum:

.controls.primary {}
.controls.secondary {}


.primary.controls {}
.secondary.controls {}
24
katma
Cheers @bobo, ve bu Ivan'dan iyi, iyi bir cevap. Ben kendim +1
katma yazar Curt, kaynak
Cevabınız için çok teşekkürler. Çözümünüzü projeme uyguladım, ancak Ivan'ın cevabı, aynı sorunu yaşayan diğer insanlar için oldukça yararlı olabilecek BEM adlandırma kuralı getiriyor. Cevabınız için tekrar teşekkürler.
katma yazar bobo, kaynak

NCSS adlı harika bir alternatif var.

Basamaklı Stil Sayfaları, adlandırma kuralı ve yönergesidir.   semantik CSS.

Neden:

Muazzam CSS, farklı geliştiricilerden oluşan projeler üzerinde çalışırken bir kabus olarak kullanılıyordu. Sözleşmelerin ve kılavuzların eksikliği, sürdürülemez bir topun çamuruna yol açacak.

Hedef:

HTML şablonu hakkında semantik bilgi sağlayan CSS için öngörülebilir bir dilbilgisi.

  • Hangi etiketler, bileşenler ve bölümler etkilenir
  • Bir sınıfın diğerine olan ilişkisi nedir?

Sınıflar:

Adlandırılmış Basamaklı Stil Sayfaları şu şekilde ayrılır:

  • İsim alanları
  • Yapısal Sınıflar
  • Bileşen Sınıfları
  • Sınıflar
  • Değiştirici Sınıfları
  • İşlevsel Sınıflar
  • İstisnalar

Further reading: https://ncss.io/documentation/classes

Örnekler:

<!-- header -->



<!-- main -->

<!-- content -->

Headline

<div class="foo-box-content">Box</div>
<!-- sidebar -->
<!-- footer -->
<div class="foo-box-footer">Powered by NCSS</div>

Further reading: https://ncss.io/documentation/examples

Araçlar:

Kurulum:

npm install ncss-linter

Bir HTML dizesini doğrulayın:

bin/ncss-linter --html='<div class="box-content"></div>'

Yerel yolu doğrula:

bin/ncss-linter --path=templates/**/*.html --namespace=foo

Uzak URL'yi doğrula:

bin/ncss-linter --url=https://redaxmedia.com --namespace=rs --log-level=info

Further reading: https://ncss.io/documentation/tools

3
katma
1
katma