Herkes HTML KİMLİĞİ ve sınıflar isimlendirme ve iyi olup olmadığını Kimlikleri ile önek için bir öğe türü ile yani btn veya benzer düğmesine açıklamak için iyi bir kaynak biliyor mu?

Sınıflar çoğul ya da tekil olmalıdır? Kimlikleri benzersiz olmaları nedeniyle, ama dersler ne olacak tekil olması gerektiğini anlıyorum?

Kimlikleri ve sınıfları isimler kullanmak gerekir, değil mi?

Ben kullanarak sayfaları enjekte diğer sayfalarda mevcut sayfaları gibi sayfaların ... dolayısıyla... merak ediyordum da ... herkes kadar öneki bir adım önünde Kimliği ve/veya sınıflar .. gibi bir ad ya da benzer?

Herhangi bir yorum ya da anlayış gerçekten takdir.

2015: mevcut adlandırma sistemleri odak ile taze bir cevap

Seçtiğiniz herhangi bir sözleşme, proje ihtiyaçlarını hedefleyen gereksinimleri almak öneririm.

Şöyle ki: proje, küçük ya da büyük? projeyi yeniden olacak veya tema bir tür işlemek için ihtiyacınız var? Bu geliştiriciler CSS/HTML çalışmaya istekli veya tecrübeli-yeterli kuralları ile sopa. .. ve bu yüzden

Eğer bunun farkında değilse ilk ortak (iyi?) uygulama:stil kanca gibi Kimlikleri önlemek için, yalnızca Sınıfları kullanmayı deneyin

Çünkü:

• sadece birkaç blok (örn. sayfa Başlığı, sayfa altbilgi) 100% başka bir yerde yeniden olmayacak gerçeğini yanında

• özgüllüğü düşük tutmak istiyorsanız, her zaman anlar olacak, geçersiz kılmak için gereken ekstra bir KİMLİK seçici kullanarak ya ! (olmadan önemli)

/Kuralları: ortak gereksinimleri vardır

• İsimler anlamlı/sezgisel olmalıdır
• Bir çok iyi bilinen kısaltması sürece kısaltmak isimleri (örn. Mesaj için msg, hesap için accnt
• Bilinen/yaygın adlar kullanın: .site-nav .kenara-nav .küresel kafa, .btn-primary, .btn-ikincil
• Yapısal hiyerarşi (yani. izin ver Sözleşme BEM)
• Kullanım - veya isim takmalar _: (geliştiriciler' görüş) & klavye dil kullanılan bağlı olarak. muhtemelen öznel CamelCase ben hiç bir kanıt bulmuş olsa da tarayıcı uyumluluk sorunları olduğuna inanıyorum için bir kenara bırakmış, unutmayın.
• Bu daha fazla esneklik sağlar, yani. hiç olağanüstü bir durum olmadıkça seçiciler öğeleri kullanın: sen düğmelerini kullanarak oluşturulan <input type="button"></input> ve istediğiniz geçmek için kullanarak <button></button> eğer kullanılan eleman tipleri bazı seçiciler sonra plan biraz rahatsız edici/zaman alıcı yeniden düzenleme/test/prod-hata-sabitleme, oysa kullanırsanız elemanı-daha az seçiciler sonra anahtarı olacak sonsuz daha kolay. SMACCS also has it in its conventions
• Devletler için, diğer dillerden bilinen kurallarına uyacak şekilde denemek (php, java, c#):, "etkin", "sağlam", ve benzeri . ıe kullanın
• En hassas yani. en genel soldan sağa: ad btn-bluetheme-create-accnt accordion-modrnlook-userlist
• sınıf veya kimlik adı her zaman bütün bir proje üzerinde aranması ve sadece ilgili sonuçları döndürmek için özel olmalıdır
• Tercih doğrudan soyundan kullanırsanız torunu seçiciler - .module-name > .sub-module-name vs .module-name .sub-module-name - kurtaracaksın kendini biraz baş ağrısı geleceği (basit CSS ama aynı zamanda daha fazla ölçülebilir, ancak dönem "CSS performans olabilir gülünç")

Bilinen kuralları:

Yapısal adlandırma kuralı:ne olduğu değil, nerede olduğunu ya da nasıl göründüğünü anlatarak elemanı sınıf adı. Aşağıdaki örneklere göz atın.

.page-container
     .page-wrap-header-n-content
     .page-header
          .branding-logo
          .branding-tagline
          .wrapper-search
          .page-nav-main
     .page-main-content
     .page-secondary-content
          .nav-supplementary
     .page-footer
          .site-info

Görsel adlandırma kuralı:yeri ve/veya görünümü tarif ederek öğesi sınıf adı. Aşağıdaki örneklere göz atın.

.theme-ocean-blue
.theme-apricot-orange
.skin-red-tango
.skin-darkness

Adlandırma anlam:onu alın ve içeriği ile adı. Gibi. Aşağıdaki örneklere göz atın.

.product-review
.notification
.language-switch
.currency-switch
.list-of-friends
.latest-status

Adlandırma kuralı BEM:açılımı "Blok, Eleman, Değiştirici". Sözdizimi <module-name>__<sub-module-name>--<modifier-or-state> gibi. Blok, "ana" ne çağrı konteyner, modül/bileşen bir tür. Eleman ana bileşenin sadece bir alt bileşeni (Blok). Değiştirici devlet bir tür.Özellikleri:sözdizimi (çift kişilik kullanım & dash çizgi çift kişilik), ve alt öğeleri en yakın bileşenin adını içermelidir. Aşağıdaki örneklere göz atın.

.nav-primary
.nav-primary__list
.nav-primary__item
.nav-primary__link
.nav-primary__link--is-active

.grid
.grid__item
.grid__description
.grid__img-wrap
.grid__img

.global-footer
.global-footer__col
.global-footer__header
.global-footer__link

Adlandırma kuralı OCSS:Nesne tabanlı CSS açılımı. Markalaşma amaçlar için kullanır derileri veya Tasarım tutarlılığı (yani. arka plan rengi, sınır renk, ...). Özet yapısal stilleri. Aşağıda soyut yapı tarzı örneği. Two main principles of OOCSS: separate structure & skin, secondly separate container & content.

 .global-width {
      min-width: 780px;    /* minimum width */
      max-width: 1400px;   /* maximum width */
      margin: 0 auto;      /* Centering using margin: auto */
      position: relative;  /* Relative positioning to create a positioning context for child elements */
      padding-left: 20px;
      padding-right: 20px;
      overflow: hidden;    /* Overflow set to "hidden" for clearfixing */
 }

Bazı CSS kuralları:

Oldu bir "trend" paylaşmak CSS styleguide, burada bir kaç okuyabilirsiniz pick & seçim ne olursa olsun görünüyor ihtiyacınız (adlandırma aynı zamanda çok daha fazla, bu olmayabilir kapsam soru):

• github.com/styleguide/css/
• cssguidelin.es
• css-tricks.com/sass-style-guide
• codepen.io/chriscoyier/blog/codepens-css

Önyargılı bence

Ben şu anda bir karışımı kullanınBEM,semantik&yapısaladlandırma kuralları ve oldukça iyi çalışıyor.

BEM&semantikbirlikte oldukça iyi (Evet, .list-of-friends__single-friend gibi derslerimi ben ad) çalışma. BEM şeyler özellikle daha basit hale getirir: CSS ve çok ayrıntılı kod no iç içe delilik.

Yapısaladlandırma kuralı da web sitesinin çıplak yapısı için geldiniz, ya da her "eğer bu web sitesi birkaç varsa" yapıları. şablon Bu, bence, yine, sadece çok genel unsurlar için kullanılmalıdır, dikkatli kullanın.

Görseladlandırma: gerçekten mi? teşekkürler, ama Hayır, teşekkürler. Özel durumlarda (örn. bunu da düşünebilirsiniz cilt farklı temalar koca bir sayfa).

OCSSadlandırma: itiraf etmeliyim ki, hala daha bu içine bakmak lazım. Daha fazla araştırmak için aşağıdaki kaynak bağlantıları sağladım.

Kaynaklar:

• http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
• http://getbem.com/
• http://bem.info/method/definitions/
• http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
• https://github.com/stubbornella/oocss/wiki
• https://css-tricks.com/semantic-class-names/
• http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html
• http://sixrevisions.com/css/css-tips/css-tip-2-structural-naming-convention-in-css/
• CSS class naming convention
• Can I use camel-case in CSS class names
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Underscores_in_class_and_ID_Names
• http://programmers.stackexchange.com/questions/141988/practical-considerations-for-html-css-naming-conventions-syntax
• http://smacss.com/book/type-module
• github.com/styleguide/css/
• cssguidelin.es