Mevcut olmayan CSS sınıflarını kullanabilir miyim?

Ben göstermek / jQuery tarafından olmayan bir CSS sınıfı aracılığıyla tam bir sütun gizlemek bir tablo var:

<table>
   <thead>
      <tr>
         <th></th>
         <th class="target"></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
   </tbody>
</table>

Bu DOM ile bunu jQuery ile bir satırda yapabilirsiniz: $('.target').css('display','none');

Bu mükemmel çalışıyor ancak tanımlanmamış CSS sınıflarını kullanmak geçerli mi? Bunun için boş bir sınıf oluşturmalı mıyım?

<style>.target{}</style>

Herhangi bir yan etkisi var mı veya bunu yapmanın daha iyi bir yolu var mı?

"CSS sınıfı" yanlış adlandırmadır; classHTML öğelerine atadığınız bir özelliktir (veya komut dosyası oluşturma açısından bir özelliktir). Diğer bir deyişle, bu durumda sizin "hedef" sınıfı yüzden, HTML değil CSS sınıfları beyan yapar bu belirli elemanlarında aslında varoldukları için 'da ve biçimlendirme olduğu gibi mükemmel geçerlidir.

Bu, CSS'de kullanabilmeniz için önce HTML'de bir sınıfın olması gerektiği anlamına gelmez. Ruakh'ın yorumuna bakın. Bir seçicinin geçerli olup olmadığı tamamen seçici sözdizimine bağlıdır ve CSS ayrıştırma hatalarını ele almak için kendi kurallarına sahiptir; bunların hiçbiri işaretlemeyi hiç ilgilendirmez. Temel olarak bu, HTML ve CSS'nin geçerlilik açısından birbirinden tamamen bağımsız olduğu anlamına gelir. ¹

Bunu anladıktan sonra .target, stil sayfanızda bir kural tanımlamamanın herhangi bir yan etkisi olmadığı anlaşılmaktadır . ² Öğelerinize sınıf atarken, bu öğelere stil sayfasında, komut dosyasında veya her ikisinde birden bu sınıflara başvurabilirsiniz. İkisinin de diğerine bağımlılığı yoktur. Bunun yerine, her ikisi de işaretlemeye (veya daha doğrusu DOM temsiline) atıfta bulunur. Bu ilke, jQuery tekli astarınızda yaptığınız gibi stilleri uygulamak için JavaScript kullanıyor olsanız bile geçerlidir.

Sınıf seçicisiyle bir CSS kuralı yazdığınızda, tek söylediğiniz "Bu sınıfa ait öğelere stiller uygulamak istiyorum." Benzer şekilde, öğeleri belirli bir sınıf adına göre almak için bir komut dosyası yazdığınızda, "Bu sınıfa ait öğelerle bir şeyler yapmak istiyorum" diyorsunuz. Olsun ya da olmasın orada olan söz konusu sınıfa aittir ayrı bir konu tamamen olduğunu unsurlar.

¹ _{Bu nedenle, bir CSS Kimlik seçici , kimliğin tam olarak bir kez mi yoksa birden çok kez mi görünmesine bakılmaksızın (E uygun olmayan bir HTML belgesi ile sonuçlanır) bağımsız olarak verilen tüm kimlikle eşleşen tüm öğelerle eşleşir .}

² _{Bunun gibi boş bir CSS kuralının nerede gerekli olduğunun farkında olduğum tek durum, bazı tarayıcıların bir hata sonucu diğer bazı kuralları düzgün bir şekilde uygulamayı reddetmesidir; boş bir kural oluşturmak, diğer kuralların bir nedenle uygulanmasına neden olur. Böyle bir hata örneği için bu cevaba bakınız . Ancak bu CSS tarafındadır ve bu nedenle işaretleme ile ilgisi yoktur.}

Stilleri olmayan sınıfları kullanmanın kötü bir etkisi yoktur. Gerçekten de, CSS'nin kullanışlılığının bir parçası, işaretlemeden ayrılması ve stil öğeleri / sınıflar / vb. ihyaç olduğu gibi.

Bunları "CSS sınıfları" olarak düşünmeyin. Bunları CSS'nin gerektiğinde kullanacağı "sınıflar" olarak düşünün.

HTML5 spesifikasyonuna göre :

Sınıf özniteliği, öğenin ait olduğu çeşitli sınıfları temsil eden, boşlukla ayrılmış belirteçler kümesi olan bir değere sahip olmalıdır. ... Yazarların sınıf özniteliğinde kullanabileceği belirteçlerde ek kısıtlamalar yoktur, ancak yazarların içeriğin istenen sunumunu tanımlayan değerlerden ziyade içeriğin doğasını tanımlayan değerleri kullanmaları önerilir.

Ayrıca, sürüm 4'te :

Sınıf özelliğinin HTML'de birkaç rolü vardır:

• Stil sayfası seçici olarak (bir yazar bir dizi öğeye stil bilgisi atamak istediğinde).
• Kullanıcı aracıları tarafından genel amaçlı işlem için.

Kullanım durumunuz ikinci senaryoya girer ve bu da onu sınıf özniteliğini kullanmanın meşru bir örneğidir.

Stili olmayan bir sınıf kullanabilirsiniz, bu tamamen geçerli HTML'dir.

CSS dosyasında başvurulan bir sınıf, bir sınıfın tanımı değildir, stil verme amacıyla bir seçici kural olarak kullanılır.

Eğer JavaScript bir sınıfadı kullandığınızda, etmez o sınıfı bulmak için CSS bak. Doğrudan HTML koduna bakar.

Gereken tek şey, sınıf adının HTML'de olmasıdır. CSS'de olması gerekmez.

Aslında, birçok kişi , tasarımcıların ve kodlayıcılarınızın birbirlerinin sınıflarını kullanarak birbirlerinin yoluna girmeden bağımsız olarak çalışmalarına izin verdiği için, ayrı sınıfların CSS ve Javascript ile birlikte kullanılmasının iyi bir fikir olduğunu düşünüyor .

(not, yukarıdaki paragraf daha büyük projeler için açıkça daha geçerlidir, bu yüzden kendi başınıza çalışıyorsanız bu uç noktaya gitmeniz gerektiğini düşünmeyin; İkisinin tamamen ayrı olabileceği noktasını belirtmek için bahsetmiştim. )

CSS sınıflarını kullanmadan kullanabilirsiniz , ancak yalnızca JavaScript / jQuery kodu için CSS sınıfları ekliyorsanız js-YourClassName, ön uç geliştiricilerin öğeleri stilize etmek için bu sınıfları asla kullanmamalarını öneririz . Bu sınıfların herhangi bir zamanda kaldırılabileceğini anlamalıdırlar.

Sınıfı HTML'nize eklediğiniz an Sınıf tanımlanır, böylece çözümünüz tamamen iyi olur

Stil sayfanızda CSS sınıflarını tanımlamanız gerekmez . Sadece iyi çalışmalı. Ancak, eklemek zarar vermez.

Burada kimsenin tam olarak bahsetmediği bir şey, JavaScript'in (bu durumda jQuery tarafından desteklenmektedir) bir belgenin basamaklı stil sayfasını doğrudan değiştirememesidir. jQuery'nin css()yöntemi yalnızca eşleşen öğelerin styleözelliğini değiştirir. CSS ve JavaScript bu açıdan tamamen ilişkisizdir.

$('.target').css('display','none');.target { }CSS bildiriminizi hiç değiştirmez . Bunun yerine burada olan class, "target" olan herhangi bir öğenin şimdi şuna benzer olmasıdır:

<element class="target" style="display:none;"></element>

Bir CSS stil kuralını önceden tanımlamamanın herhangi bir yan etkisi var mı? Hiçbiri.

Bunu yapmanın daha iyi bir yolu var mı? Performans açısından, evet var!

Performans nasıl geliştirilebilir?

Bunun yerine style, her öğeyi doğrudan değiştirmek yerine, yeni bir sınıf önceden tanımlayabilir ve bunuaddClass() (başka bir jQuery yöntemi) kullanarak eşleşen öğelerinize ekleyebilirsiniz .

Dayanarak bu önceden var olan JSPerf karşılaştırır css()ile addClass(), bunu görebiliyorum addClass()çok daha hızlı aslında:

Bunu kendimiz nasıl uygulayabiliriz?

Öncelikle yeni CSS bildirimimize ekleyebiliriz:

.hidden {
    display: none;
}

HTML'niz aynı kalacak, bu önceden tanımlanmış sınıf daha sonra kullanılmak üzere basitçe yerinde.

Artık addClass()bunun yerine kullanılacak JavaScript'i değiştirebiliriz :

$('.target').addClass('hidden');

Bu kodu çalıştırırken style, eşleşen "hedef" öğelerinizin her birinin özelliğini doğrudan değiştirmek yerine , bu yeni sınıf şimdi eklenecek:

<element class="target hidden"></element>

Yeni "gizli" sınıfla, bu öğe CSS'nizde bildirilen stili devralır ve öğeniz artık görüntülenmeyecek şekilde ayarlanır.

Diğer pek çok kişi tarafından belirtildiği gibi, evet, atanmış CSS'si olmayan sınıfları kullanmak tamamen geçerlidir ve bunları 'CSS sınıfları' olarak düşünmek yerine, sınıf ve kimliğin anlambilimini sırasıyla gruplar ve bireysel öğeler olarak tanımlamanız gerekir.

Örnek vermek gerekirse önemli bir noktanın ortaya çıkmadığını hissettiğim için içeri girmek istedim. Değişken uzunluktaki öğelere görsel manipülasyonlar yapmanız gerekiyorsa (bu durumda tablo satırlarını kullanıyorsunuz), Javascript aracılığıyla bunu yapmanın maliyetinin potansiyel olarak çok pahalı olabileceğini fark etmek her zaman mantıklıdır (örneğin, binlerce satır).

Bu durumda, sütun 2'nin her zaman gizlenme potansiyeline sahip olduğunu biliyoruz (tablonuzun bilinçli bir işlevi), o zaman bu kullanım durumunu ele almak için bir CSS stili tasarlamak mantıklıdır.

table.target-hidden .target { display: none; }

Daha sonra, DOM bulma N öğelerinde gezinmek için JS kullanmak yerine, bir sınıfı (tablomuzda) değiştirmemiz gerekir.

$("table").addClass("target-hidden")

Tabloya bir kimlik atayarak bu daha da hızlı olur ve hatta :nth-childişaretlemenizi daha da azaltacak seçici kullanarak sütuna başvurabilirsiniz, ancak verimlilik hakkında yorum yapamam. Bunu yapmanın bir başka nedeni, satır içi stilden nefret etmem ve onu ortadan kaldırmak için büyük çaba harcayacağım!

Bir HTML öğesine bir sınıf uygularsanız ve bu sınıf CSS'de tanımlanmamışsa bunun bir etkisi olmaz. Bu yaygın bir uygulamadır ve Aamir afridi'nin sınıfları sadece js için kullanıyorsanız, bunları js- ile öneklemek iyi bir uygulamadır.

Yalnızca calsses için değil, aynı zamanda html öğelerinin id özelliği için de geçerlidir.

Sadece öğeleri sorgulamak için sınıfları kullanmanın hiçbir problemi yoktur. Bu tür sınıf isimlerine stil için kullanılan sınıflardan ayırmak sys-için önek (örneğin, sınıfınıza ad vereceğim sys-target) verirdim. Bu, geçmişte bazı microsoft geliştiricileri tarafından kullanılan bir sözleşmeydi. Ayrıca js-bu amaçla öneki kullanma konusunda artan bir uygulama fark ettim .

Stilleri şekillendirme dışında amaçlarla kullanmaktan memnun değilseniz, roleözniteliği kullanarak aynı amaca ulaşmanızı sağlayan Role.js jQuery eklentisini kullanmanızı öneririm , böylece işaretlemenizi olarak yazabilir <td role="target">ve kullanarak sorgulayabilirsiniz $("@target"). Proje sayfasının iyi açıklaması ve örnekleri vardır. Bu eklentiyi büyük projeler için kullanıyorum çünkü sınıfları sadece şekillendirme amaçlı tutmayı seviyorum.

JQuery doğrulama motoruna bakın . Orada bile HTML niteliklerine doğrulama kuralları eklemek için var olmayan sınıfları da kullanıyoruz . Dolayısıyla, aslında bir stil sayfasında bildirilmeyen sınıfları kullanırken yanlış bir şey yoktur.