En İyi CSS Uygulamaları: Kötü CSS'nin Dokuz İşareti

CSS veya Basamaklı Stil Sayfaları - Bir web sayfasının nasıl görünmesi gerektiğini ve bazen nasıl davranması gerektiğini tanımlayan dil. Genellikle web geliştiricileri tarafından çok fazla dikkat gerektirmeyen "kolay" bir dil olarak göz ardı edilir. En yaygın özelliklerden bazılarını ezberlemek, genel akışı ve daha belirsiz özellikleri araştırmak, gidilecek yoldur. Ancak, daha deneyimli geliştiricilerin bildiği gibi, bir şeyler yapmanın her zaman iyi ve kötü yolları olduğu için hiçbir dil gözden kaçırılmayı hak etmez.

CSS ile işleri yanlış yapmak çok kolaydır, çünkü hata atan bir derleyici yoktur, kötü uygulamalar için uyarılar veya bildirimler yoktur. JavaScript gibi bir programlama dili, iyi kod kalitesini izleyen bir ton araca sahiptir, hatta bazıları geliştiriciye belirli bir işlevin doğru şekilde uygulanmadığına dair mesajlar atar.

Bu nispeten kısa gönderide, geliştiricilerin karşılaştığı bazı yaygın sorunlara ve bunların nasıl düzeltileceğine bakacağız. Bu, belirli bir görsel bileşen için belirli uygulama ayrıntıları ile ilgili değildir. Bunun yerine liste, düşünce süreçlerine, mimariye ve yaklaşımlara odaklanır.

CSS Karmaşıklığı

CSS zor mu? Hayır! Kesinlikle hayır, birkaç çok temel yapısal kurala sahiptir. Seçicileriniz var (sınıf, id, eleman), özellikleriniz var ve kapsamınız var. C, Java veya PHP gibi bir dilden çok daha az. Bir geliştirici, tüm fikri birkaç dakika içinde okuyabilir ve şekillendirmeye başlayabilir. Tabii ki, kenar boşluğu ve dolgu arasındaki farkı bilmek için, w3schools'a bir göz atabilirsiniz, ancak hangisinin ne zaman kullanılacağı biraz deneyim gerektirecektir. Ama bu roket bilimi değil.

Şimdi, işleri biraz daha karmaşık kılan şey, seçicilerin bir sonrakinin üzerine yazmak için yarıştığı tüm yollar ve bir özelliğin diğerini nasıl etkilediğidir (örneğin, ekran: blok vs görüntüleme: satır içi). Ardından, kenar boşluğu daraltma, z-endeksi yığınlama, GPU ve CPU performans özellikleri, kutu modeli ve tipografi özellikleri gibi daha küçük ayrıntılara sahibiz.

Hepsinden öte, tarayıcılarda her zaman aynı şekilde uygulanmayan yeni CSS özellikleri, hatta bazıları hiç uygulanmaz ve diğerleri farklı özellikler gerektirir.

Yukarıdaki iki paragrafa bakarsak, front-end geliştiricilerin CSS ile çalışırken vurdukları iki ana aşamayı göreceğiz - Biri " Oh, hepsi bu mu? "Ve ikincisi" Oh ****, hepsi bu değildi ". "CSS Karmaşıklığı" budur

Ölçeklendirilmesi zor, iç içe geçmiş birçok küçük şey var. Yalnızca bir bileşen oluşturursanız, bu kolaydır - gördüğünüz her şeyi şekillendirirsiniz ve işe yarar. Ancak bu tek bileşeni daha büyük bir uygulamaya koyun ve ek stiller uygulanacaktır. Başka bir şeyle aynı sınıfa sahip olabilirsiniz (.button gibi) ve stilleriniz tüm uygulamaya uygulanarak her şeyi bozar. Stresli!

WordPress CSS: Yeni Başlayanlar İçin Temel Kılavuz

CSS Nasıl Yazılır: Karmaşıklığıyla Mücadele

Akıllı insanların ortaya çıkardığı birkaç çözüm var, genel bir bakış şöyle olacaktır:

• Çakışma olasılığını azaltacak sınıf adlarının kurallarını tanımlayan BEM, SMACSS ve diğerleri gibi CSS Adlandırma kuralları.
• JS'de CSS, JS dosyalarında CSS bileşenleri yazmanıza pratik olarak izin veren daha yeni bir yöntemdir (kulağa kötü geliyor, kötü görünüyor, ancak en azından biraz mantıklı geliyor). Çoğunlukla React, Vue ve diğerleri için geçerlidir.
• CSS Modülleri, tüm stilleri tek bir dosyada tamamlayan biri için JS'de CSS'ye daha mantıklı bir yaklaşımdır. CSS Modülleri, diğer bileşenlere sızmamaları için her bileşenin stilini kapsayarak yeniden kullanılabilirliği kolaylaştırır. Ayrıca stresi çok azaltır!

İlk Adlandırma Kuralları , size yardımcı olacak hiçbir araç içermediğinden muhtemelen uygulanması en zor olanıdır. Bir geliştirici olarak kuralı anlamak ve uygulamak her şeyi size bırakıyor. Yine de sınıf isimlerini düşünmelisiniz, yine de çatışmamalılar ve sonra tüm takımın onu takip etmesini sağlamalısınız. Oldukça zor!

JS'deki CSS ve CSS Modülleri , uygulamaya yönelik düzeltmelerdir. Kod çıktısını bir bütün olarak değiştirirler, bu da stilleri sızdırmayı pratik olarak imkansız hale getirir. Ancak tamamen farklı düşünme ve inşa kurulumları gerektirirler, bu her zaman mümkün olmayan veya istenmeyen bir şeydir.

Buradaki en iyi tavsiye şu olabilir: En yaygın ve başarılı adlandırma kurallarını inceleyin, şirketinizin veya ekosistemin kodlama standartlarına uyanı kullanın. Bileşen ayrımını anlayın ve kapsam ve büyük bir uygulama oluşturan tekil birimler açısından düşünmeye başlayın. Başından beri büyük bir uygulama değil, yönetimi imkansız olurdu.

React gibi bir kitaplık veya Vue gibi bir çerçeve içeren bir yığın üzerinde çalışıyorsanız, stillerinizi onlarla birlikte yönetmenize izin veren ek araçlara bakın. Yeni başlayanlardan orta seviyeye kadar CSS geliştiricileri için harika bir yardımcı olacaktır! Ve yolunuza daha iyi bir şey gelmedikçe, onları asla terk etmek istemeyebilirsiniz.

Yeni araçlara açık olun! Bizi geliştirici topluluğunun bulduğu, düzelttiği ve bunlarla başa çıkmanın bir yolunu sağladığı sorunlarla savaşmaktan alıkoyuyorlar.

Artık CSS Karmaşıklığının ne anlama geldiğini ve onunla savaşmak için bazı başlangıç ​​ipuçlarını ana hatlarıyla belirttik, şimdi daha ayrıntılı bir genel bakışa geçelim ve doğrudan örnekler sunalım.

Web Sitesi Tasarımı İpuçları: Web Tasarımında Oyununuzu Nasıl Yükseltebilirsiniz?

Kötü CSS'nin Dokuz İşareti

Bu liste kesinlikle tamamlanmadı, uzun bir mil değil. Ne yazık ki, sayısız başka sorunla karşılaşacaksınız ve umarız Stackoverflow gibi sitelerde belirli bir soruna doğrudan çözümler bulursunuz.
Ancak, oyununuzu ilerletmek istiyorsanız, birkaç satırlık bir css ile bir sorunu çözdüğünüzde, ne yaptıklarını anlamanız gerekir. İşaretlemenizi neden değiştirmek zorundaydınız ve neden birkaç seçiciyi, özelliği değiştirmek zorunda kaldınız?

Kenar boşlukları garip davranıyor

Geliştiricilerin karşılaştığı yaygın bir sorun, iki öğenin kendi marjlarını (üst / alt) toplamamasıdır. Örneğin, marjlı iki <p> ​​öğemiz var: 20px 0 ;. Aralarındaki toplam boşluk 40 değil, 20 pikseldir. Bu, kenar boşluğunun daralmasından kaynaklanmaktadır. Elemanların yüzmesi veya kesinlikle konumlandırılması dışında. Bu "Hariç" hemen hemen her tanım için neredeyse her yerdedir.

Z-endeksi: 9999999 ve hala z-endeksi: 1'in üstünde değil

Her şeyden önce, nadiren bu kadar yüksek z-indeksleri yazmaya ihtiyaç vardır. 99999999999999 veya daha fazla gibi değerler bile gördüm. İlk olarak, z-endeksi maksimum değeri 2147483647'dir, bu nedenle yukarıdaki hiçbir şey işe yaramaz. İkincisi, böyle çalışmıyor. Hangi öğelerin en üstte olduğu, yalnızca z-endeksi değeriyle değil, yığın bağlamıyla tanımlanır. Aşağıdaki grafiğe bakın:

Doğru Özellikleri Canlandırmama

Bu oldukça basit bir soru, ancak bazı geliştiriciler animasyon ve izlenecek yaklaşım söz konusu olduğunda mücadele ediyor. İlk olarak ne canlandırılabilir? Başlangıç ​​değeri, bitiş değeri ve ikisinin arasında olan herhangi bir şey. Opaklık böyle bir özelliktir, 0'dan başlayabilir, 1'de bitebilir ve 0,3, 0,6758, 0,9875 gibi sonsuz adımlar ekleyebilirsiniz. Satır içi ve ızgara arasında orta adımlar olmadığından "gösterimi" canlandıramazsınız.

Verimsiz Animasyonlar

Animasyonlarda kötü FPS'nin en yaygın nedeni, animasyonun yanlış özelliklerinden kaynaklanmaktadır. Mutlak bir elemanın "left" özelliğini değiştirirseniz, hesaplamak için CPU'dan yararlanacaksınız. Ancak, dönüşümü kullanırsanız, o zaman GPU olacaktır. Ve hepimizin bildiği gibi GPU, grafik yapmak için daha iyidir.

Ama sol / dönüşüm gibi bir alternatifi olmadığında gölgeyi nasıl canlandırırsınız? Opaklığı canlandırın! Biri başlangıç, durum, biri bitiş durumu olmak üzere iki öğeye sahip olun. Sonra başlangıcı ve sonu karartın. Bu, gölge genişliyormuş gibi görünmesini sağlar, aslında sadece soluyor.

Mümkünse düzeni etkileyen öğeleri canlandırmayın. Düzen hesaplamaları pahalıdır ve bir CPU yalnızca sınırlı miktarda hesaplama yapabilir. Genellikle, her 16 ms'de birden azdır ve bu, 60'ın altında FPS ile sonuçlanır.

Çok Derin Seçiciler

Değiştirici nedir? Başka bir sınıfa ekleyebileceğiniz ve bazı özelliklerini değiştirebileceğiniz bir sınıf. Örnek: .düğmesinin rengi: kırmızıdır. .button-birincil, rengi vardır: mavi. Bu nedenle, .button'a .button-primary'i eklediğinizde, sonunda mavi bir renk elde etmek istersiniz. Basit. Yine de her seferinde bu kadar kolay değil. Ve her seferinde bunun gibi bir bileşen değil.

Bazen, belirli bir sayfadaki başka bir bileşenin alt öğesi olan bir bileşenin üzerine yazmak isteriz. Sonuç olarak şuna benzer bir şey elde ederiz: .page-name .section-name .component-1 .component-2 {…} Zaten dört seviye derin. Ancak ortaya çıkan, basitçe .page-name .componen-2 {…} yapabileceğimizdir. Daha kısa, daha iyidir! Çünkü eğer bir sebepten ötürü bu yeni stilin üzerine yazmanız gerekiyorsa, 5 seviye, sonra 6, sonra daha fazla derine inmeniz gerekmez.

Derin seçiciler korkutucudur ve insanlar sonunda kullanır! Önemli. Önemli kontrolünüz olmayan satır içi stillerin üzerine yazmak istediğinizde kullanılmalıdır. Aksi takdirde, bir şeyi doğru yapmadığınızı gösteren kırmızı bir bayraktır.

Dosya çok büyük

Şimdi, elbette, büyük bir uygulama için çok sayıda stil olacaktır ve bu tamamen anlaşılabilir bir durumdur. Ama her zaman bu kadar büyük mü? SASS'de sınıfları genişletmenin kötü bir yolu (mixins aracılığıyla), hepsini görmek için kaydırmak birkaç saniye süren büyük seçici zincirler oluşturacaktır. Uygun bir uzantı bu dosyayı çok azaltır. Hatta boyutu ikiye katlayabilir.

Yalnızca birkaç özelliğin kullanımda olduğu dahil edilen çerçeveler de büyük dosyalar için ortak bir nedendir. Bootstrap / vakıf, font-awesome, animate.css ve diğer birkaç benzer çerçeve / kitaplığı bir araya toplayın ve yaklaşık% 2'sini kullandığınız büyük bir dosya elde edin. Temizleyin, düzenli tutun ve yalnızca gerçekten gerekli olanı kullanın. Çoğu zaman bir çerçeveye ihtiyaç bile yoktur.

Gerekli olmadığında çerçeve

Bootstrap, Foundation, UIKit ve diğer tüm çerçeveler harika! Gerçek bir sorunu çözerler ve web geliştirme topluluğu için son derece değerlidirler. Panolar ve siteler oluşturmak için HTML veya CSS'yi bu kadar iyi bilmenize gerek yoktur. Ancak bu vakadan uzaklaşın, biraz CSS yazmaya başlayın ve birkaç problemle karşılaşırsınız.

• Onları nasıl inşa edeceğinizi ve nasıl dahil edeceğinizi doğru bir şekilde anlamalısınız
• Sağladıkları özel ayarları ve karışımları bulmak için belgelerini okumanız gerekir.
• İşaretlemelerini takip etmeli ve ekibinize bunu yapmayı öğretmelisiniz.
• Eşsiz bir görünüm oluşturmak için nasıl genişletileceğini ve stilini gerçekten anlamalısınız.

Bunları doğru şekilde dahil etmek, yalnızca ihtiyacınız olanı kullanmanız anlamına gelir. Böyle bir çerçevenin size özel bir şey inşa etmenizi yasaklamak yerine yardımcı olması için, iç işleyişini ortalamadan daha iyi bilmeniz gerekir. Ve herhangi bir özel tasarım elde etmek için, ayarları ve özellikleri değiştirmeniz gerekecektir. Ve sonra biraz özel CSS yazın. Ve çerçeve ne verirse verilsin üzerine yazmak için özel CSS.

Öyleyse, böyle bir CSS çerçevesine gerçekten ihtiyaç yoksa, ancak hala bir tane varsa ve bu düzgün kullanılmadıysa, bu bir şeylerin yanlış olduğuna dair kırmızı bir bayraktır. Ve onunla bir kez başladığınızda, büyük olasılıkla projenin yaşam döngüsünün sonuna kadar onu kullanmaya başlayacaksınız. Yani bu önemli bir karar.

İçeriğin boyutu tanımlamasına izin vermemek

Bu daha çok başlangıç ​​seviyesindeki bir sorundur, ancak çok yaygın bir sorundur. İçeriğe hak ettiği özgürlüğü vermelisiniz.

Örneğin, sitenin genişlik özelliğini 1200px olarak ayarlamak istemiyorsunuz. Maksimum genişliği 1200 piksel olarak ayarlamak istiyorsunuz. Bu şekilde, görüntü alanı sitenizin duyarlı kalmasına izin verecektir.

Daha sonra, bir giriş alanının yüksekliği 40px olmamalı, 1em dolgusu olmalıdır. Şimdi, yazı tipi boyutu, boyutu tanımlayan içeriktir. Ve içindeki içerik büyürse, eleman kırılmaz.

Boyutları tanımlarken bu düşünme şekli tüm uygulama boyunca önemli olmaya devam etmektedir. Ve her mülk bunu dikkate almak zorundadır. İdeal olarak, içerik alanındaki genişlik için% ayarlamayın, çünkü o zaman medya sorguları da yazmanız gerekir.

Maksimum genişliğe sahipseniz, tarayıcınız bu maksimum genişliğin altında küçüldüğünde, içerik tarayıcı genişliğini dolduracak ve ardından normal olarak küçülecektir. Aksi takdirde, bu boyut için bir medya sorgusu yazmanız gerekir. Ve sonra sitede yazılan diğer herhangi bir özel boyut için. Bu, kötü yaklaşım nedeniyle eklenen karmaşıklıktır. Daha önce tartıştığımız diğer tüm noktalar ile hemen hemen aynı.

JavaScript hack'leri

JavaScript harikalar yaratabilir! Ancak her zaman gerekli değildir. İyi desteklenen, işlevsellik gerektirmeyen (daha sonra en iyi otomatik olarak test edilen) ve diğer FE üyelerinizin de JS'yi bilmesini gerektirmeyen CSS ile çok şey yapabilirsiniz.

Elbette, aşağıdaki durumlarda stilleri değiştirmek için bir onay kutusu girişi kullanabileceğiniz standart geçiş işlevi vardır: işaretlendiğinde, kolayca tetiklenebilen arka plan kaplaması vardır ve basit <ol> listelerinden daha fazlasını oluşturmak için sayaç gibi özellikler vardır. .

Buradaki tavsiye, önce CSS çözümlerine bakmaktır. Diyelim ki bir pop-up oluşturmak istiyorsunuz. Ortada görünür (konum: sabit). Ardından [X] simgesinden veya etrafına tıkladığınızda kapatmak istersiniz. JS'de, pop-up içeriği dışında herhangi bir şeyi tetikleyecek olaylar yazmanız gerekir. Ancak yine de pop-up içeriğindeki [X] üzerinde tetiklenir.

Bunun yerine, CSS'den, pop-up'ın hemen altında 100vw, 100vh boyut ve z-endeksi olan başka bir <div> yazabilirsiniz. O zaman bu div'i JS'de hedefleyebilirsiniz, ki bu tek satırlıktır.

Başka bir örnek - içeriğe yerleştirebileceğiniz ve onu izleyen herhangi bir içeriği "genişletecek" bir düğme istiyorsunuz. CSS ile basit, JS ile biraz daha karmaşık. CSS ile şunun gibi bir şey yapabilirsiniz:

 Label.button - düğmeyi görsel olarak şekillendirir.

 Girdi: değil (: işaretli) ~ * {display: none} - ondan sonraki her şeyi aynı kapta gizle.

Bu bit "aynı kapta", JS'de özel mantığa ihtiyacınız var. Ayrıca, DOM ağacının çapraz geçişini gerektiren tüm öğeleri seçmeniz gerekir. Ve sonra onlara CSS stilleri uygulayın, bu da style = ”” etiketine dönüşür, bu da karşılığında! Herhangi bir nedenle bunları ele almanız gerekiyorsa önemlidir. CSS İÇİNDE, neyse ki, son derece basit.

İyi Bir Web Tasarımcısı Olmanın Yolu

Sonuç

Gördüğünüz gibi, bunlar çok az yaygın sorun. Hepsini kapsamak için bir kitaba ihtiyaç vardır. Ama umarım, size iyi bir başlangıç ​​noktası verirler ve yanlış yaklaşım nedeniyle ortaya çıkabilecek olası herhangi bir sorunu düşünmenizi hatırlatırlar. Bu tür sorunları bulmak, çok fazla deneyim ve bol miktarda okuma ile birlikte gelir. Ve burada sonuca vardıysanız, okuma ile doğru yoldasınız, şimdi pratik yapma zamanı!