CSS yıllar içinde önemli ölçüde gelişti; son güncellemeler, ön uç geliştiricilere tüm önemli tarayıcılarda daha verimli, temiz ve karmaşık düzenler oluşturmaları için güçlü araçlar sunuyor .

Bunlar arasında son zamanlarda en çok kullandığım teknikler var ve bence 2024’te herhangi bir ön uç geliştiricinin cephaneliğinin bir parçası olmalılar.

CSS Yerleştirme

Geleneksel CSS genellikle uzun ve tekrarlayan kodlara yol açıyordu. 2023 yılına kadar stillerimizi yapısal bir şekilde yazmak için SCSS gibi araçlara ihtiyaç duyuyorduk ama artık bunu düz CSS ile de güvenle yapabiliyoruz .

CSS yerleştirmesi olmayan CSS

.container {
  display: flex;
}
.container .header {
  background-color: blue;
}
.container .header h1 {
  color: white;
}

CSS iç içe geçmeli CSS

.container {
  display: flex;
  .header {
    background-color: blue;
    h1 {
      color: white;
    }
  }
}

CSS iç içe yerleştirme, seçicileri birbiri içine yerleştirerek stil sayfasında daha doğal bir hiyerarşiyi taklit ederek daha temiz, daha düzenli stiller yazmamıza olanak tanır.

:has() Seçici

Seçici :has()bize yeni bir stil esnekliği düzeyi sunuyor; çocuk koşullarına göre ebeveyn seçicilerin kullanılmasına olanak tanıyor ve tüm önemli tarayıcılarda güvenle kullanılabiliyor .

Bu, alt öğelerin veya kardeş koşulların temel alınarak ana öğelerin seçilmesinin karmaşık seçiciler veya JavaScript gerektirdiği eski CSS’de bir zorluktu. Seçici :has()bu süreci kolaylaştırarak duyarlı ve dinamik tasarımlar için yeni olanaklar açar.

:has() seçicisi olmayan CSS

// JavaScript to add a class to divs containing a specific child
document.querySelectorAll('div > a.special-class').forEach(link => {
  link.parentElement.classList.add('has-special-link');
});

/* CSS targeting the dynamically added class */
div.has-special-link {
  border: 1px solid green;
}

Seçiciden önce :has()CSS, belirli alt öğelerin varlığına dayalı olarak ana öğeleri doğrudan hedefleyemiyordu. Bunun yerine, geliştiriciler genellikle üst öğeye dinamik olarak bir sınıf eklemek için JS’yi kullanırlar div.

:has() seçicili CSS

div :has (> a .special-class ) { 
  border : 1px düz yeşil; 
}

Seçici , ‘nin kenarlığını değiştirerek çocuğu olan :hasbir öğeyi doğrudan hedeflememizi sağlar . Ek JS koduna veya karmaşık kardeş seçicilere olan ihtiyacı ortadan kaldırarak CSS’mizi basitleştirir.diva.special-classdiv

:is() Seçici

Daha okunabilir CSS yazmamıza yardımcı olabilecek ve tüm önemli tarayıcılarda güvenle kullanılabilecek:is() bir diğer kullanışlı seçici de seçicidir.

Seçiciden önce :is(), stilleri paylaşan birden çok öğenin seçilmesi, genellikle uzun, tekrarlanan CSS seçicilere yol açıyordu.

:is() seçicisi olmayan CSS

.article > h1, .article > h2, .article > h3 {
  font-family: sans-serif;
  color: blue;
}

:is() seçicili CSS

.article > :is(h1,h2,h3) {
  font-family: sans-serif;
  color: blue;
}

Geleneksel olarak, birden fazla öğenin stillendirilmesi, ilk blokta gösterildiği gibi her seçicinin ayrı ayrı listelenmesini gerektiriyordu; burada h1, h2 ve h3içindeki öğeler .article aynı şekilde stillendirilir. :is() İkinci blokta gösterildiği gibi ile aynı etki, seçicilerin içinde gruplandırılması :is(), tekrarın azaltılması ve kodun okunabilirliğinin arttırılması yoluyla daha kısa bir şekilde elde edilir.

CSS gelişmeye devam ettikçe, iç içe yerleştirme gibi tekniklerin yanı sıra sözde sınıflar :has da :is stillerimizi ve genel olarak kullanıcı arayüzü kodumuzu geliştirmemizi sağlar.