Eleman başına tek bir CSS sınıfı ile sınırlı değilsiniz.
Basamaklı Stil Sayfaları (CSS) , bir öğenin görüntüsünü, o öğeye uyguladığınız özniteliklere kancalayarak tanımlamanıza olanak tanır. Bu özellikler hem kimlik hem de bir sınıf olabilir ve tüm özellikler gibi ekli oldukları öğelere yararlı bilgiler ekler. Bir öğeye hangi niteliğe eklediğinize bağlı olarak, bu öğe ve web sitesi için bir görünüm ve his elde etmek için gerekli olan görsel stilleri uygulamak için bir CSS seçicisi yazabilirsiniz.
Kimlikler veya sınıflar, CSS kuralları ile bunlara girme amacıyla çalışsa da, modern web tasarım yöntemleri kısmen daha az spesifik olduklarından ve genel olarak daha kolay çalışabilmeleri için kimlikler üzerinden sınıfları desteklemektedir. Evet, kimlikleri kullanan pek çok site bulmaya devam edersiniz, ancak sınıflar modern web sayfalarını ele geçirirken, bu özellikler geçmişe oranla daha az uygulanmaktadır.
CSS'de Tek veya Çoklu Sınıflar?
Çoğu durumda, bir öğeye tek bir sınıf özniteliği atayacaksınız, ancak aslında kimliğinizle olan tek bir sınıfla sınırlı değilsiniz. Bir öğe sadece tek bir ID özelliğine sahip olsa da, bir öğeye birden çok sınıf verebilirsiniz ve bazı durumlarda, sayfanızı daha kolay ve daha esnek hale getirebilirsiniz!
Bir öğeye birden çok sınıf atamanız gerekiyorsa, ek sınıfları ekleyebilir ve bunları yalnızca özniteliğinizdeki bir alanla ayırabilirsiniz.
Örneğin, bu paragrafın üç sınıfı vardır:
pullquote öne çıkan "> Bu, paragrafın metni olur
Bu, paragraf etiketinde aşağıdaki üç sınıfı ayarlar:
- Alıntı yap
- Öne çıkan
- Ayrıldı
Bu sınıf değerlerinin her biri arasındaki boşluklara dikkat edin. Bu alanlar onları farklı, bireysel sınıflar olarak kılan şeydir. Bu aynı zamanda sınıf isimlerinin kendilerine yer açamamasıdır, çünkü bunu yapmak onları ayrı sınıflar olarak belirler.
Örneğin, bir boşluk olmadan "pullquote-feature-left" kullandıysanız, bir sınıf değeri olurdu, ancak yukarıdaki örnekte, bu üç kelimenin bir boşlukla ayrıldığı, bunları ayrı değerler olarak ayarlar. Web sayfalarınızda hangi sınıf değerlerinin kullanılacağına karar verdiğinizde bu kavramı anlamak önemlidir.
Sınıf değerlerinizi HTML'ye aldıktan sonra, bunları CSS'nizdeki sınıflar olarak atayabilir ve eklemek istediğiniz stilleri uygulayabilirsiniz. Örneğin.
.Alıntı yap { ... }
.featured {...}
p.left {...}
Bu örneklerde, CSS bildirimleri ve değerler çiftleri, küme parantezlerinin içinde olacaktır; bu, bu tarzların uygun seçiciye nasıl uygulanacağıdır.
Not - belirli bir öğeye bir sınıf ayarlarsanız (örneğin, p.left), bunu yine de bir sınıf listesinin parçası olarak kullanabilirsiniz; Ancak, yalnızca CSS'de belirtilen öğeleri etkileyeceğinin farkında olun. Diğer bir deyişle, p.left stili sadece bu sınıfa ait paragraflar için geçerli olacaktır, çünkü seçmeniniz bunu aslında "sol" sınıf değeri olan paragraflara uygulayacağını söylüyor. Buna karşılık, örnekte bulunan diğer iki seçici belirli bir eleman belirtmez, bu nedenle bu sınıf değerlerini kullanan herhangi bir öğeye uygulanırlar.
Çoklu Sınıfların Avantajları
Birden fazla sınıf, bu öğe için yepyeni bir stil oluşturmaya gerek kalmadan öğelere özel efektler eklemeyi daha kolay hale getirebilir.
Örneğin, öğeleri hızlıca sola veya sağa doğru kaydırabilme olanağına sahip olmak isteyebilirsiniz. Sadece float ile sol ve sağ iki sınıf yazabilirsiniz: sol; ve yüzdürme: sağ; onlar içinde. Daha sonra, bir öğeye sahip olduğunuzda, sol yüzmeniz gerektiğinde, sınıf listesine "sol" sınıfını eklemeniz yeterlidir.
Ancak burada yürümek için iyi bir yol var. Web standartlarının stil ve yapı ayrılığını dikte ettiğini unutmayın. Yapı, stil CSS'de iken HTML yoluyla işlenir.
HTML belgeniz, "kırmızı" veya "sol" gibi sınıf adlarına sahip olan öğelerle doluysa, bu öğeler öğelerin göründüklerinden ziyade nasıl görünmesi gerektiğini belirten adlar olan yapı ve stil arasında bu çizgiyi geçersiniz. Semantik olmayan sınıf isimlerimi bu nedenle mümkün olduğunca sınırlandırmaya çalışıyorum.
Birden Çok Sınıf, Semantik ve JavaScript
Birden fazla sınıf kullanmanın bir başka avantajı, size daha fazla etkileşim imkânı sağlamasıdır.
Mevcut sınıflara yeni sınıfları, başlangıç sınıflarından hiçbirini kaldırmadan JavaScript kullanarak uygulayabilirsiniz. Bir öğenin anlamlarını tanımlamak için sınıfları da kullanabilirsiniz. Bu, bu elemanın anlamsal olarak ne anlama geldiğini tanımlamak için ek sınıflar ekleyebileceğiniz anlamına gelir. Microformats böyle çalışır.
Çoklu Sınıfların Dezavantajları
Öğelerinizde birden fazla dersi kullanmanın en büyük dezavantajı, onları zamana bakmak ve yönetmek için biraz hantal hale getirebilmesidir. Bir stilin hangi unsuru etkilediğini ve herhangi bir betiğin onu etkilediğini belirlemek zorlaşabilir. Bugün mevcut olan çerçevelerin birçoğu, Bootstrap gibi, çok sınıflı öğelerin yoğun kullanımını sağlıyor. Dikkatli değilseniz, bu kod elden çıkabilir ve çok çabuk çalışmak çok zor olabilir.
Birden fazla sınıf kullandığınızda, bunun için niyetiniz olmasa bile, bir sınıfın stilini bir başkasının stilini geçersiz kılma riskini de kullanabilirsiniz. Bu, stillerinizin neden gerektiği gibi görünse bile neden uygulanmadığını anlamaya zorlaştırabilir.
Bu tek bir öğeye uygulanan özniteliklerle bile, özgüllüğün farkında olmanız gerekir!
Chrome'daki Web Yöneticisi araçları gibi bir araç kullanarak, sınıflarınızın stillerinizi nasıl etkilediğini daha kolay görebilir ve bu çakışan stiller ve özellikler sorununu önleyebilirsiniz.
Jennifer Krynin tarafından yazılmış orijinal makale. Jeremy Girard tarafından 8/7/17 tarihinde düzenlenmiştir