Yaklaşık 15 yıllık deneyime sahip bir ön uç geliştirici olarak web geliştirmenin evrimine ilk elden tanık oldum. Benim için, değiştirilmiş dosyaların FTP aracılığıyla yüklendiği günlerden (evet, GitHub 15 yıl önce piyasaya sürüldü, ancak ben onu yalnızca 2011'de keşfettim) duyarlı arayüzlerin, kullanıcı arayüzü kitaplıklarının ve doğrudan buradan oluşturulan web sitelerinin modern çağına kadar çok uzun bir yol kat etti. Figma. Ancak yine de aşağıdaki gibi iç içe geçmiş stiller kullanan projelerle karşılaşıyorum: .some-class ul li div a { /* some style */ } veya, #nav .nav-link svg { /* some style */ } Şok edici görünebilir, ancak bu tür kodlama uygulamaları multimilyon dolarlık, hızla büyüyen projelerden mütevazi girişimlere kadar her şeye yayılıyor. Bu yaklaşımın neden sorun yaratabileceğini inceleyelim. İç İçe Stillerin Çatışması Derinlemesine iç içe geçmiş stiller, özellikle büyük bir projeniz varsa, genellikle stil çatışmalarına yol açar. Basamaklı bir stil sayfası olarak CSS, aşağıya doğru basamaklanır ve özelliklerine bağlı olarak öğelere uygulanır. Derinlemesine iç içe geçmiş stiller, özgüllükleri nedeniyle istemeden diğer stilleri geçersiz kılabilir. Bu örneği düşünün: .some-class ul li div a { color: red; } ... .some-class a { color: blue; } dosyasındaki tüm bağlantıların mavi olmasını bekleyebilirsiniz. Bununla birlikte, ilk kuralın daha spesifik olması nedeniyle içinde yer alan herhangi bir bağlantı mavi değil kırmızı olacaktır. Bu, beklenmedik görsel tutarsızlıklara ve hata ayıklamada çok fazla zaman kaybına neden olabilir. .some-class ul > li > div Özgüllüğün Karmaşıklığı CSS'deki özgüllük kavramını (veya stillerin 'ağırlığını') anlamak, derin yuvalamanın neden sorun yaratabileceğini anlamak açısından çok önemlidir. Belirlilik, tek bir öğe için birden fazla kuralın rekabet etmesi durumunda hangi CSS kuralının uygulanacağını belirler. Seçicilerin türüne ve miktarına göre hesaplanır. Özgüllük dört kategorili bir ağırlıklandırma sistemine göre hesaplanır: Satır içi stiller Kimlikler Sınıflar, nitelikler ve sözde sınıflar Elemanlar ve sözde elemanlar Burada kuralı göz önünde bulundurun: body #content .data img:hover { /* some style */ } Spesifiklik . Bu bir kimlik ( ), iki sınıf ( ve ) ve iki öğedir ( ve ). 0 1 2 2'dir #content .data :hover body img Şimdi kuralı düşünün: #nav .nav-link svg { /* some style */ } Buradaki özgüllük . Bu bir kimlik ( ), bir sınıf ( ) ve bir öğedir ( ). 0 1 1 1'dir #nav .nav-link svg Özgüllük, geleneksel ondalık sayılar gibi "aktarma" sisteminde çalışmaz. Örneğin, özgüllüğüne sahip bir seçici, ondalık sistemde ve eşdeğer olsa da özgüllüğüne eşit değildir. 0 1 0 11 11 1+1 0 1 1 1 Son olarak, evrensel seçicinin ( ), birleştiricilerin ( , , , ' ') ve olumsuzlama sözde sınıfının ( ) özgüllük üzerinde hiçbir etkisi yoktur. Ancak argümanının içinde seçiciler her zamanki gibi sayılır. * + > ~ :not() :not() Görsel öğrenenler için CSS Özgüllüğü ile ilgili öneriyorum. bu videoyu CSS özgüllüğünü ve bunun nasıl hesaplandığını anlamak, daha iyi, daha öngörülebilir CSS yazmanıza ve stiller beklendiği gibi uygulanmadığında sorunların hatalarını ayıklamanıza olanak tanır. Kural ve Özellik !important Bazen geliştiriciler, CSS özgüllüğü çatışmalarıyla ilgili zorluklarla karşılaştıklarında kuralını kullanmaya başvururlar. Bu kural bir CSS özelliğini son derece spesifik hale getirir, yani hemen hemen tüm diğer bildirimleri geçersiz kılacaktır. !important Örneğin: #nav .nav-link svg { color: blue; } .nav-link svg { color: red !important; } Kimlik seçici nedeniyle ilk kuralın özgüllüğü daha yüksek olmasına rağmen, ikinci kuraldaki nedeniyle rengi kırmızı olacaktır. !important svg !important'ı Aşırı Kullanmanın Riskleri belirlilik sorunlarıyla uğraşırken hızlı bir çözüm olsa da, bunun kapsamlı bir şekilde kullanılması önerilmez. Aşırı kullanım sürdürülebilirliği, öngörülebilirliği ve performansı etkileyebilir. Daha büyük projelerde aşırı kullanımı genellikle CSS özgüllüğünün yönetilmesinde zorluk yaşandığını gösterir. başvurmak yerine, CSS'nizi yeniden düzenlemek ve aşırı spesifik seçicilerin kullanımını azaltmak için zaman harcamak genellikle daha iyidir. !important !important !important Hemen ürününüzü kontrol edebilirsiniz 🙂. Benimkini kontrol ettim: cazip bir hızlı çözüm olsa da; fındık kırmak için balyoz kullanmaya benzer. Daha sürdürülebilir bir yaklaşım, seçicilerinizi olabildiğince basit ve düz tutmaktır; bu, CSS'nizin gelecekte anlaşılmasını, yönetilmesini ve genişletilmesini kolaylaştırır. Ve unutmayın, bir savaşı kazanmanın en iyi yolu, ilk etapta bir savaş başlatmamaktır. !important !important CSS Ağacını Geçmek Derinlemesine iç içe geçmiş stillerle ilgili diğer bir sorun, tarayıcı oluşturma üzerindeki performansın etkisidir. Bir tarayıcı, bir öğeye stiller uyguladığında, anahtar seçiciden (örneklerimizde ve ) başlayarak ve bir eşleşme bulana veya en üste ulaşana kadar atalar arasında ilerleyerek DOM'u sağdan sola doğru hareket ettirir. Stil ne kadar iç içe olursa bu geçiş o kadar uzun sürer; bu da büyük ölçekli projelerde performansı etkileyebilir ve sayfa yükleme sürelerini yavaşlatabilir. a svg Aşağıdaki gibi bir CSS kuralı belirttiğinizde: .some-class ul li a { /* some style */ } Bu kuralı ağacın en altından ( etiketinden) başlayarak ve ağaç boyunca ( , ve yoluyla) yukarıya doğru çalışarak görselleştirebilirsiniz. a li ul .some-class Tarayıcı ilk önce (yani TÜM) elemanlarını arayacak, ardından bu etiketlerinin elemanlarının içinde olup olmadığını kontrol edecektir. Daha sonra bu elemanlarının içinde olup olmadığını kontrol edecek ve son olarak bu sınıfına sahip bir elemanın içinde olup olmadığını kontrol edecek. tüm a a li li ul ul .some-class Tarayıcılar CSS seçicilerini bu şekilde okur ve karmaşık seçicilerin sayfanın daha yavaş oluşturulmasına yol açmasının nedeni budur. Tarayıcının, belirtilen kurala uyup uymadığını görmek için her öğe için birden fazla kontrol yapması gerekir. Kural ne kadar derin olursa, tarayıcının o kadar fazla kontrol yapması gerekir ve bu da performansı etkileyebilir. Büyük Projelerde CSS Yönetimi İçin Daha İyi Uygulamalar CSS Modülleri CSS'yi üzerinde çalıştığınız bileşene göre yerel olarak belirlenen ayrı modüller halinde yazmanıza olanak tanır. Bu, bir CSS modülündeki stillerin yalnızca söz konusu modüle uygulanabileceği ve dışarı sızmayacağı veya sayfadaki diğer öğeleri etkilemeyeceği anlamına gelir. CSS Modülleri, Stil kapsüllemesini sağlamak için CSS Modüllerinin karma sınıf adlarını nasıl kullandığını keşfedelim. CSS Modüllerini kullanırken, CSS dosyanızda tanımladığınız sınıf adlarına derleme zamanında karma işlemi uygulanacaktır. Bu karma, bileşeninize karşılık gelen benzersiz bir sınıf adı oluşturur. Bir örneğe bakalım: Şu şekilde tanımlanmış bir CSS Modülünüz olduğunu varsayalım: /* Button.module.css */ .button { color: white; background-color: blue; } Ve bunu bileşeninizde şu şekilde kullanırsınız (styles nesnesini yerine olarak içe aktarmayı tercih ederim; yazma süresinden tasarruf sağlayan ve kodlama verimliliğini artıran hızlı bir ipucu): styles s import React from 'react'; import s from './Button.module.css'; const Button = () => { return ( <button className={s.button}>Click me</button> ); }; export default Button; Uygulamanız derlendiğinde, oluşturulan HTML'niz şunun gibi görünebilir: <button class="Button_button__3FQ9Z">Click me</button> Bu durumda , CSS Modülünüzden oluşturulan karma sınıf adıdır. Hash'in tam yapısının ve uzunluğunun proje yapılandırmanıza göre değişebileceğini unutmayın. Button_button__3FQ9Z Bu benzersiz sınıf adı, tanımladığınız stillerin yalnızca bu düğmeye uygulanmasını ve uygulamanızdaki diğer öğeleri etkilememesini sağlar. Ayrıca, karma sınıf adını açıkça hedeflemediği sürece başka hiçbir stilin bu düğmeyi etkilememesini de sağlar. Stillerin bu şekilde kapsüllenmesi CSS Modüllerinin ana faydalarından biridir. Button.module.css JS Kitaplıklarında CSS CSS'yi kullanmanın bir diğer popüler yolu, veya gibi JS'de CSS kitaplıklarını kullanmaktır. Bu kitaplıklar, CSS'nizi doğrudan JavaScript'inizin içine yazmanıza olanak tanır; bunun birçok avantajı vardır: styled-components duygu : CSS Modüllerine benzer şekilde stillerin kapsamı, tanımlandıkları bileşene göre belirlenir. Kapsamlı stiller : Bileşeninizdeki aksesuarlara veya duruma göre dinamik stiller oluşturmak kolaydır. Dinamik stiller : JavaScript mantığını doğrudan stillerinizde kullanabilirsiniz ve bir bileşenle ilgili her şey tek bir yerde bulunur; bu, kodunuzun anlaşılmasını ve üzerinde çalışmasını kolaylaştırabilir. Geliştirilmiş geliştirici deneyimi Styled-component'leri bir React uygulamasında nasıl kullanabileceğinize dair bir örnek: import React from 'react'; import styled from 'styled-components'; const Button = styled.button` color: white; background-color: ${(props) => props.primary ? 'blue' : 'gray'}; `; const App = () => { return ( <div> <Button primary>Primary Button</Button> <Button>Secondary Button</Button> </div> ); }; export default App; Bu örnekte bileşeni, özelliğine göre değişen dinamik stillere sahiptir. Button primary BEM Metodolojisi CSS Modüllerini veya benzerlerini destekleyen bir JavaScript çerçevesiyle çalışmıyorsanız, BEM (Blok, Öğe, Değiştirici) gibi adlandırma yöntemlerini kullanarak CSS'nizi yine de etkili bir şekilde yönetebilirsiniz. BEM, "Blok Öğe Değiştirici" anlamına gelir ve CSS'de yeniden kullanılabilir bileşenler ve kod paylaşımı oluşturmanıza yardımcı olan bir metodolojidir. BEM'i kullanarak CSS'nizi şu şekilde yapılandırabilirsiniz: /* Block */ .top-menu { } /* Element */ .top-menu__item { } /* Modifier */ .top-menu__item_active { } BEM'de, 'Blok' kendi başına anlamlı olan bağımsız varlıktır, 'Element', Bloğun bağımsız bir anlamı olmayan ve Bloğuna anlamsal olarak bağlı olan bir parçasıdır ve 'Değiştirici', üzerindeki bir bayraktır. görünümü veya davranışı değiştirmek için kullanılan bir Blok veya Öğe. BEM gibi tutarlı bir metodoloji kullanmak, özellikle büyük projelerde CSS'nizin anlaşılmasını ve bakımını kolaylaştırabilir. Sonuç olarak Daha büyük projelerde CSS'yi yönetmenin, CSS Modülleri ve JS'deki CSS kitaplıklarından BEM gibi adlandırma metodolojilerine kadar çeşitli yolları vardır. Önemli olan ekibinize ve projenize uygun bir yaklaşım bulmak ve bunu tutarlı bir şekilde uygulamaktır. CSS yazmanın, verimli ve performanslı kod yazmanın yanı sıra anlaşılır ve bakımı yapılabilir kod yazmakla da ilgili olduğunu unutmayın. Mutlu kodlama!

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Bu ses hikayenin orijinal dilinde üretilmiştir!

Yıl 2023 Ama Hala CSS'deki İç İçe Stiller Hakkında Konuşmamız Gerekiyor

Çok uzun; Okumak

@lastcallofsummer

Credibility

İLGİLİ ÖYKÜLER