Bir JavaScript Projesinde CSS Sınıflarını ve Kimliklerini Adlandırmak İçin En İyi 8 Uygulama

CSS sınıfları ve kimlikleri için adlandırma kuralları, bir JavaScript projesinde kodun anlaşılmasında ve sürdürülmesinde önemli bir role sahiptir. Kullanılan adlar, kod tabanının netliğini, yeniden kullanılabilirliğini ve esnekliğini artırabilir. Bir JavaScript projesinde CSS sınıflarını ve kimliklerini adlandırırken en iyi uygulamaları takip etmek önemlidir.

1. Anlamsal Adları Kullan

Öğenin işlevini veya amacını tam olarak açıklayan adların seçilmesi çok önemlidir. Anlamsal adlar anlamlı bağlam sağlar ve kodun anlaşılmasını kolaylaştırır.

Örneğin, gibi geleneksel isimler kullanmak yerine kutu veya Kulp, gibi adlar kullanmayı deneyin başlık veya kenar çubuğu bileşenin özel rolünü yansıtır.

/* Anlamsal adlar örneği */
.başlık {}
.kenar çubuğu {}

2. Tutarlı Adlandırma Kuralları Kullanın

Tutarlılık, CSS sınıflarını ve kimliklerini adlandırırken önemlidir. Pano genelinde aynı adlandırma standardını kullanmak, kod tabanının yapısını korumayı kolaylaştırır.

BEM (Blok Öğe Değiştirici) ve OOCSS (Object-Oriented CSS) adlandırma kuralları en çok tercih edilen adlandırma kurallarıdır.

Modüler, yönetilebilir ve ölçeklenebilir CSS kodu yazmak için OOCSS adlandırma kuralını kullanabilirsiniz. İşte nasıl yapabileceğinizin bir örneği gezinme menüsü oluştur OOCSS'yi kullanarak:

/* Yapı */
.nav {
görüntülemek: esnek;
liste biçimi: hiçbiri;
}
.nav__öğe {
sağ kenar boşluğu: 1rem;
}
.nav__bağlantı {
metin dekorasyonu: hiçbiri;
renk: #333;
}
/* Dış görünüş */
.nav__bağlantı:vurgulu {
metin dekorasyonu: altını çizmek;
}

Bu örnekte gezinme menüsü için kodun iki farklı bölümüne sahipsiniz, biri yapı ve diğeri görünüm için. Görünüm bölümü, ona çekici bir görünüm kazandıran renkleri ve diğer stilleri tanımlarken, yapı bölümü, menü öğelerinin nasıl ve nerede konumlandırılacağını açıklar.

3. Ad Alanlarından Kaçının

CSS'de ad alanları, seçimleri için bir ad alanı öneki sağlamanıza izin veren semantik yapılardır. Çakışan sınıf adlarına sahip olabilecek modüller, kitaplıklar veya kod tabanının diğer bölümleri arasında ayrım yapmak için ad alanı öneki kullanılır.

Bu özellik yararlıdır, ancak özgüllük ve sürdürülebilirlik sorunlarına neden olabilir.

Ad alanlarının en büyük dezavantajlarından biri, seçici özgüllüğünü ele almanın zorluğudur. Bir ad alanı öneki, seçimi daha belirgin hale getirerek gelecekte stillerin geçersiz kılınmasını zorlaştırabilir.

Bu, kafa karıştırıcı ve zaman içinde sürdürülmesi zor olan CSS kod şişmesine yol açar.

Örneğin:

/* Ad alanı ile */
.my-modülüm.içerik {
arka plan rengi: mavi;
}
/* Ad alanı olmadan */
.modül başlığı {
arka plan rengi: kırmızı;
}
.modül içeriği {
arka plan rengi: sarı;
}

ad alanı öneki .my-modülüm Ve .içerik her ikisi de ana kod bloğunda kullanılır. Sonuç olarak seçim daha kesin hale gelir ve gelecekteki stili geçersiz kılmayı daha zorlayıcı hale getirir.

İkinci bölümde, ad alanı, tanımlayıcı sınıf adlarıyla değiştirilir. .modül başlığı Ve .modül içeriği. Bu, kodun anlaşılmasını kolaylaştırmanın yanı sıra bakımını da kolaylaştırır.

Ad alanlarını kullanmak, özellikle birçok kişi aynı projenin farklı bölümlerinde çalışırken, programınıza gereksiz bir karmaşıklık katar. Farklı ekipler farklı ad alanı önekleri kullanabileceklerinden, birbirlerinin kodunu anlamakta ve değiştirmekte zorlanabilirsiniz.

Örneğin, tanımlayıcı olan sınıf adlarını kullanın:

.başlık {
arka plan rengi: kırmızı;
}
.içerik {
arka plan rengi: sarı;
}

Tanımlayıcı sınıf adları kullanarak, ad alanları gereksinimini ortadan kaldırabilir ve kod tabanınızı iyi yapılandırılmış ve anlaşılması kolay tutabilirsiniz.

4. Küresel İsimlerden Kaçının

JavaScript projelerinde, CSS sınıfları ve kimlikleri için genel adlardan kaçınmak çok önemlidir. Global adlar, kod bakımını zorlaştırır ve riskleri adlandırma olasılığını artırır. Daha kalıcı ve ölçeklenebilir bir kod tabanı sağlamak için, bir bileşen veya modül kapsamında daha kesin adlar kullanmanız iyi olur.

Aşağıdaki örneği göz önünde bulundurun:

 Genel adların yanlış kullanımı 
<divsınıf="konteyner">
<divsınıf="kenar çubuğu">
 içerik burada 
div>
div>

Genel sınıf adları kenar çubuğu Ve konteyner yukarıdaki örnekte, proje içindeki diğer stil sayfaları veya JavaScript koduyla çakışmaya yatkındır. Örneğin, iki stil sayfası aynı şeyi belirtiyorsa .kenar çubuğu biri mavi, diğeri kırmızı arka plana sahip olan sınıf, kenar çubuğunun rengi en son yüklenen stil sayfasına bağlı olacaktır. Bundan beklenmeyen ve öngörülemeyen sonuçlar ortaya çıkabilir.

Bu sorunları en aza indirmek için ilgili bileşen veya modül içinde kapsam oluşturan daha kesin adlar kullanmak daha iyidir.

Gelişmiş bir sürüme bakın.

 Belirli adlarla geliştirildi 
<divsınıf="başlık__kapsayıcı">
<divsınıf="kenar çubuğu__içerik">
 içerik burada 
div>
div>

Değiştirilen sürümde, sınıf adları başlık__kapsayıcı Ve kenar çubuğu__içerik her bir öğenin ne için olduğunu ve ne işe yaradığını netleştirin.

Belirli adların kullanılması, adlandırma çakışmalarının riskini azaltır ve stillerin yalnızca ilgili bileşenleri veya modülleri içindeki beklenen bileşenleri etkilemesini sağlar.

5. BEM Adlandırma Kuralını Kullan

BEM (Blok Öğe Değiştirici) adlandırma kuralı, JavaScript projelerinde CSS sınıflarını ve kimlikleri adlandırmak için popülerdir. BEM, öğeleri adlandırmak için yapılandırılmış ve modüler bir yol sağlar, yeniden kullanılabilirliği teşvik eder ve kod tabanlarının bakımını kolaylaştırır.

BEM kuralları bloklardan, öğelerden ve değiştiricilerden oluşur. Üst düzey bir öğeye veya bağımsız bir bileşene blok denir. Öğeler, bloğun içeriğine dayanan bir bloğun bileşen parçalarıdır. Değiştiriciler, bir bloğun veya öğenin görünümünü veya davranışını değiştirebilir.

İşte BEM adlandırma kuralını kullanan bir örnek:

/* BEM Adlandırma Kuralı örneği */
/* Engellemek */
.başlık {} 
/* Bloğun elemanı */
.başlık logosu {} 
.header__menu {}
/* Elemanın değiştiricisi */
.header__menu--etkin {} 

Yukarıdaki resimde bir başlık ile blok logo ve bir Menü öğe. bu Menü öğe alır aktif aktif hale geldiğini göstermek için değiştirin.

Temel bileşenleri ve çeşitli bölümler arasındaki bağlantıları hızlı bir şekilde belirleyerek kod tabanının yapısını ve hiyerarşisini daha net hale getirebilirsiniz.

6. Önekleri veya Sonekleri Kullanın

Özellikle büyük projelerde, CSS sınıfına ve kimlik adlarına önek veya sonek ekleyerek ek ayarlar ekleyebilirsiniz. gibi bir önek kullanabilirsiniz. js- bir sınıfın veya kimliğin JavaScript yetenekleri sunduğunu belirtmek için. JavaScript adlandırma kuralları bu CSS adlandırma kurallarıyla birleştiğinde, uzun vadede zamandan ve emekten tasarruf edebilirsiniz.

 JavaScript ön ekli HTML 
<düğmesınıf="js geçiş">Değiştirdüğme>
<divİD="js-modal">modaldiv>

7. Açıklayıcı İsimler Kullanın

Tanımlayıcı isimlerle bir öğenin amacını, işlevini veya içeriğini daha iyi anlayabilirsiniz.

Aşağıdaki örneği göz önünde bulundurun:

/* Açıklayıcı olmayan adlar */
.Mavi kutu {
/* Stiller burada */
}
A {
/* Stiller burada */
}

sınıf isimleri Mavi kutu Ve A yukarıdaki örnekte referans aldıkları bileşenlerle ilgili hiçbir bilgi iletmezler. Açıklayıcı adlandırmanın olmaması, program içindeki belirli bileşenlerin amaçlarını veya rollerini hızlı bir şekilde anlamanızı zorlaştırabilir.

Öğenin rolünü doğru bir şekilde açıklayan tanımlayıcı adlar kullanın. kodun okunabilirliğini ve sürdürülebilirliğini geliştirin.

Aşağıdaki geliştirilmiş örneği göz önünde bulundurun:

/* Tanımlayıcı adlar */
.ürün kartı {
/* Stiller burada */
}
.navigasyon bağlantısı {
/* Stiller burada */
}

sınıf isimleri ürün kartı Ve navigasyon bağlantısı güncellenmiş sürümde, her bir öğenin hangi amaca hizmet ettiğini açıkça belirtin. Bu açıklayıcı adlarla kodu keşfetmeyi ve düzenlemeyi daha kolay bulacaksınız.

Açıklayıcı adların kullanılması, kod tabanı üzerinde çalışan mevcut ve gelecekteki potansiyel geliştiricilere fayda sağlar. Bir süre sonra kodu tekrar ziyaret ettiğinizde parçaların yapısını ve işleyişini kolayca anlayabilirsiniz.

8. Kısa ve Özlü İsimler Kullanın

Ayırt edici isimler gerekli olmakla birlikte, onları özlü tutmak da önemlidir. Uzun sınıf ve kimlik adları, kodun okunmasını ve bakımını zorlaştırabilir. Kısa olmakla ayrıntılı olmak arasında bir denge kurmaya çalışın. Ek olarak, proje bağlamında iyi bilinen kısaltmaları veya kısaltmaları kullanmayı düşünün.

Web sitenizdeki bir gezinme menüsünü özelleştirmek için CSS kullanmak istediğiniz durumu düşünün. gibi daha kısa, daha spesifik isimler kullanabilirsiniz. gezinme öğesi veya gezinme bağlantısı gibi uzun olanlar yerine navigasyon arayüzü veya ana navigasyon bağlantısı.

.nav-öğesi {
/* Gezinme menüsü öğeleri için stiller */
}
.nav bağlantısı {
/* Gezinme bağlantıları için stiller */
}

Proje bağlamında kısaltmalar veya popüler kısaltmalar kullanmak, örneğin gezinme için navigasyon, kodu diğer programcıların anlamasını çok daha kolaylaştırabilir.

CSS Sınıflarını ve Kimliklerini Adlandırmak İçin En İyi Uygulamalar

Bir JavaScript projesinde, kodun okunabilirliği, bakımı ve ölçeklenebilirliği için CSS sınıflarını ve kimliklerini uygun şekilde adlandırmak çok önemlidir.

Stil sayfalarını daha basit hale getirebilir ve kodun kalitesini artırabilirsiniz. İyi adlandırma kurallarını belirlemek için zaman ayırmak, sizin ve başkalarının kod tabanını anlamasını ve sürdürmesini kolaylaştırarak uzun vadede karşılığını verecektir.