CSS genellikle anında başarısız olmaz. Bir yıl sonra, sistemin gerçekte kullanıldığı ve herhangi bir şeyi değiştirmek riskli hissettiği zaman başarısız olur. Styles ağır hissetmeye başlar. DevTools'i açın, kuralları atlayın ve bir şeyin nasıl çalıştığını anlamaya çalışın. Refactoring zihinsel olarak vergilendiricidir ve zaman harcıyor, bu yüzden biletini çıkarmak için başka bir override ekleyin. Kötü CSS sadece çirkin değil, pahalıdır.Bu yüzden basit UI güncellemeleri üç dakika yerine üç gün sürer. Kodu yapıyor . Çok fazla Çok fazla yerleştirme. Çok fazla spesifiklik. Çok fazla erken alınan kararlar, iptal etmek için çok zor ve pahalıdır. Bu makale bunun nedenlerini ve bunu nasıl önleyeceğinizi anlatıyor. hile veya araçlar aracılığıyla değil, bir proje büyüdükçe CSS'i basit, okunabilir ve ucuz tutan birkaç alışkanlık aracılığıyla. Daha önce öğrenmek istediğim şeyler bunlar. 1. CSS ile Başlamak İlk Hatadır Makalenin CSS hakkında olduğunu biliyorum, ancak gençlerin yaptığı en yaygın hatalardan biri, bir göreve atlamak ve her şeyi bir anda oluşturmaktır. Genellikle en komik kısmı ile başlarlar veya en komik kısmı ile başlarlar. CSS çekicidir çünkü işlevseldir. sonuçları hemen görebilirsiniz. Daha iyi bir yaklaşım, CSS'i bir kenara koymak, durdurmak, yavaşlatmak ve işaretleme ile başlamaktır. Tüm bir uygulama oluşturursanız, sayfa kabuğu ile başlayın. Anahtar kelimeler, başlık hierarşisi, ana bölümler. İlk üzerinde çalışın. Sayfayı bitirmek için okuyun. Anlamlı mı? Sadece yaparken stillere geçin. Eğer daha küçük bir özellik üzerinde çalışıyorsanız, aynı fikir geçerlidir. Önce işaretlemeyi yerleştirin ve uygulamanın geri kalanına nasıl uyduğunu görün. etiketler niyetle eşleşiyor mu? çevresindeki başlık sırasına saygı duyuyor musunuz? Markup ile başlamak, niyet hakkında düşünmenizi gerektirir, görünüşü değil. Onların yaptıkları değil HTML-first yaklaşımı ile, sistemin basit ve öngörülebilir olmasını sağlayan yapı, anlam ve kısıtlamaları tanımlarsınız. var mı gibi görünüyor CSS should adapt to that, not the other way around. Stil yapmaya koştuğunuzda, görsel ipuçları etrafında işaretlemeyi şekillendirme eğilimindesiniz. Ekstra ambalajlar. Yanlış etiketler. Genellikle iyi ama semantik olarak yanlış, ya da ölçeklenmek mümkün değildir. bakın Önce işaretlemeyi yaparak, sağlam bir temelde kilitlenirsiniz. Erişilebilirlik, belge tablosu, klavye akışı ve içerik hiyerarşisi çoğunlukla önceden çözülür. Ayrıca sizi iyi bir şekilde yavaşlatır. Erken kenar durumları yakalarsınız. Şeylerin nerede olmadığını görebilirsiniz. Bazı tasarım kararlarına geri dönebilirsiniz. Kısacası, HTML-first her şeyi anlamlı kılıyor. CSS Düşündüğünüzden Daha Fazla Yaparken Kod değerlendirmelerinde gördüğüm bir diğer yaygın hata, juniörler yapıyor Bazen farkında olmadan, sadece birkaç örnek verebilirim. Çok fazla İçerik sütunu yatay olarak merkezlemek istediğinizi söyleyelim: .entry-content { max-inline-size: 48rem; margin: 0 auto; /* ❌ Avoid this! */ } Maksimum genişliği ayarlıyorsunuz ve elementi otomatik marjları kullanarak merkezi yapıyorsunuz. Bununla birlikte, fark etmediğiniz şey, üst ve alt marjlarını da sıfır olarak ayarlıyorsunuz. eğer bu niyetli ise, iyi. çoğu zaman değil. Çoğu zaman kısaltma sadece daha kısa olduğu için kullanılır. bunun yerine muhtemelen istediğiniz şu: .entry-content { max-inline-size: 48rem; margin-inline: auto; /* ✅ Do this */ } Aynı sonuç. hiçbir yan etkisi. daha fazla niyet. Bir diğer yaygın örnek: .button--secondary { background: var(--color--dark-gray); } Bu şekilde, arka plan rengi kullanılarak Özelleştirilmiş mülkiyet.Ama aynı zamanda diğer arka planla ilgili mülkiyetlerin bir sürüünü de sıfırlar. --color--dark-gray Aslında pek çok şey var: Görüntüler - Hiçbir Arka plan %0 %0 Arka Boyut Araba Devamını Oku → Tekrarı Etiket Arşivi: padding-box Etiket Arşivi: border-box Arka Kapak - Scroll Çoğu zaman, bu istediğiniz şey değil.Bu kolayca daha sonra başa çıkmanız gereken sinir bozucu yan etkilere yol açabilir. Bunun yerine muhtemelen istediğiniz şey bu. .button--secondary { background-color: var(--color--dark-gray); } Aynı düşünce eskisi gibi. Ama cerrahi. Sadece değiştirmek istediğin şeyi değiştirmek istiyorsun. Aynı prensip diğer kısayolları için de geçerlidir, örneğin: ve ve ve Kısayol olarak kullanırken dikkatli olun veya kısayolları tamamen kullanmaktan kaçının. border transform transition font Çok fazla yapmanın daha yaygın bir örneği, çok erken çok spesifik olmaktır. a { text-decoration: none; background-image:linear-gradient(to right, currentColor, currentColor); background-position:0%100%; background-repeat: no-repeat; background-size:100%2px; transition: background-size 0.3s; &:hover, &:focus-visible { background-position:100%100%; } } Bu kısaltma, bağlantılara animasyonlu bir alt çizgi ekler. Sorun şu ki, her Etiket bir metin bağlantısıdır. resimler bağlantı olabilir. profil avatarları bağlantı olabilir. düğmeler genellikle anker olarak işaretlenir. <a> Aniden, bu “akıllı” küresel stil, logonuzun altına garip 2px çizgileri ekliyor ya da ana düğmelerin arka plan gradientlerini kırıyor. Şimdi, projenin geri kalanını, çalıştığınız her metin dışı bağlantı için "undo" stillerini yazarak kaskadaya karşı savaşacaksınız. visual debt Bunu birkaç şekilde çözebilirsiniz.Bir seçenek içerik içindeki metin bağlantılarını hedeflemektir. .entry-content:is(h1, h2, h3, h4, h5, h6, p, li) > a { /* styles here */ } Ancak bu bile, işaretlemeye bağlı olarak hala çok dar veya çok geniş olabilir. değişebilir belirli bir HTML yapısına dayanır. En sevdiğim yöntem bir utility sınıfıdır. .has-animated-underline { /* styles here */ } Bunu bir sınıfa taşıdığınızda, davranışınızı Açıkçası, kasıtlıdır ve - en önemlisi - ilk başta kırılmamış şeyleri düzeltmenizi gerektirmez. opt-in rather than opt-out 3. Mobil bir sonraki düşünce olduğunda Mobil web trafiği, 2016 yılında dünya çapında masaüstünü geçti - neredeyse on yıl önce. yine de, tasarımcıların masaüstü kompozisyonlar üzerinde çalışmak ve çalışmaları masaüstü öncelikle sunmak için vakitlerinin çoğunu geçirdiğini görüyorum, mobiller masaüstünün basit bir "toplanmış" versiyonu olarak değerlendiriliyor. Bu durum yine geriye dönük hissediliyor. Sevmek ya da sevmemek, ilk önce bir telefon aracılığıyla interneti deneyimliyoruz. İnternet için oluşturduğumuz şekil bunu yansıtmalıdır. Aslında şu anda bu tarz bir yaklaşım var: Markup'u açın (bu konuda konuştuk 😉 ) Tarayıcıyı yaklaşık 400px'e ayarlayın ve uygulamayı veya özelliği masaüstü yokmuş gibi şekillendirin. Bir kez mobilde çalışırsa, tarayıcıyı masaüstüne boyutlandırın ve stiller üzerinde ikinci bir geçiş yapın. Bu şekilde çalışmak, projeyi kolayca erişilebilir hale getirmek ve küçük ekranlar için hazır hale getirmek için doğal olarak %80'i (doğru hissedilen rastgele sayı) alır. Bu da bizi mobil-first uygulamaya götürüyor. Web geliştirmeye başladığımda, medya sorguları neredeyse hiç bir şey değildi. telefonlarda web'i taradık. Daha sonra iPhone çıktı ve medya sorguları yanıt verici düzenlemeler için ana araç haline geldi. web kapasiteli cihazların sayısı sınırlıydı, böylece katı bir dizi kırılma noktası ile uzaklaşabilirsiniz: /* phones */ @media (max-width: 480px) {} /* large phones and small tablets */ @media (max-width: 767px) {} /* tablets */ @media (min-width: 768px) and (max-width: 1024px) {} /* desktop */ @media (min-width: 1025px) {} Not: Bu mobil ilk değil. Bir yaklaşım. min-width Günümüzde gerçeklik farklıdır. Tek başına kesinti noktalarını kullanmak için tasarlamak için çok fazla cihaz ve ekran boyutu vardır. Genellikle tüm aralığa doğal olarak uyum sağlayan araçlara güvenmek daha akıllıdır. Örneğin : Grid veya Flexbox ile içsel düzenlemeler Şifre boyutları, aralıklar ve boyutlar için clamp() kullanan sıvı değerleri Konteyner İsteği Medya sorguları hala yararlıdır, ancak ulaşabileceğiniz ilk araç olmamalıdır. Bir düzen sadece kırılma noktaları nedeniyle çalışırsa, muhtemelen çok serttir.Onlar olmadan çalışırken, medya sorguları, temel değil, duyarlı yapıya yönelik küçük, kasıtlı ayarlamalar haline gelir. 4. Kaskayı kullanmak yerine savaşmak Genç mühendislerin sık sık karşılaştığı bir bölgedir. Birçok CSS çerçevesi ve çözümleri bir ana özelliği çözmek için var: kaskad. Ve neden olduğunu anlıyorum. Eğer çok fazla tecrübe olmadan CSS'e atlarsanız, kaos hissedebilir. Bir kural yazıyorsun ve hiçbir şey yapmaz. Onu ayarlıyorsun ve aniden başka bir şey kırılır. Buna ek olarak, kullanıcı ajansı stil sayfası arka planda kendi işini yapıyor. Bu hayal kırıklığına uğramaktadır çünkü CSS diğer dillerin çoğuna benzemez. JavaScript'te, bir modül oluşturabilirsiniz ve hiçbir şey sızmaz. CSS'e aynı şekilde yaklaşamazsınız. denerseniz, yüzünüze gerçekten sert bir şekilde ısırır. Her CSS değişikliği aynı anda iki alanda yaşar: stilize ettiğiniz şey ve içine aktarılan diğer sistem. Önceki örneğe dönersek, sadece şunu yazamazsınız: a { text-decoration: none; background-image:linear-gradient(to right, currentColor, currentColor); background-position:0%100%; background-repeat: no-repeat; background-size:100%2px; transition: background-size 0.3s; &:hover, &:focus-visible { background-position:100%100%; } } Bunu yaparsanız, arka planla ilgili özelliklere sayfanın her ankerine uygulanır, bu anker bir metin bağlantısı değilse bile. Çoğu zaman, istediğiniz şey bu değil. Bazı mühendisler bunu zor bir şekilde öğrenir ve bir çocukken sıcak bir fırına dokunmak ve bir daha asla yapmamayı öğrenmek gibi kaskadayı tamamen kaçırarak tepki verirler. Bence bu bir hata, çünkü çok fazla tekrarlanmaya yol açar. İşte son zamanlarda çalıştığım bir projenin bir örneği: @define-mixin focus-state { &:focus-visible { outline: var(--outline--color) var(--outline--style) var(--outline--width); outline-offset: var(--outline--offset); } } Daha sonra çeşitli bileşenlere dahil edilmiştir: .button { @mixin focus-state; } a { @mixin focus-state; } .pagination-link { @mixin focus-state; } ... ve böyle. Bunun için iyi bir nedeni düşünemiyorum.Fokus çerçeveleri, çok az istisna hariç, bir proje boyunca tutarlı görünmelidir. Bu ayarlamada, her mixin çağrısı aynı CSS'yi tekrar tekrar oluşturur. Daha zarif bir yaklaşım, kaskadaya dayanmak ve bunu küresel olarak tanımlamaktir: :focus-visible { outline-color:var(--outline--color); outline-offset:var(--outline--offset); outline-style:var(--outline--style); outline-width:var(--outline--width); } Şimdi, görünür bir odak durumunu alan her element varsayılan olarak aynı stil alır. Ve bir şeyin farklı olması gerektiği nadir durumlarda, yerel olarak üstlenebilirsiniz: .pagination-link { --outline--offset: -2px; } Basit, kompakt ve öngörülebilir. Aynı düşünce de böyle şeyler için geçerlidir. ve Marjinal dönüşümler, , ve uygulama boyunca tutarlı bir şekilde davranması gereken diğer stiller. box-sizing ::selection text-wrap Hızlı bir kontrol burada yardımcı olur. bir stil görünüyorsa Her bölümde aynı şekilde, Bazı istisnalar, muhtemelen küresel stillerinize aittir. exactly very few Çekiciyi ihmal etmeyin, kendi yararınıza kullanın. 5. Ayrıntılılık, her şeyin ayrılmaya devam ettiği yerdir Bu genellikle "CSS'imi yazdım ama işe yaramıyor" arkasındaki nedendir. Hangi özelliğin ne olduğunu derinlemesine kavrayamayacağım.MDN zaten Burada önemli olan, yüksek spesifiklik, üçüncü taraf kitaplıklarla veya başkasının koduyla çalıştığınızda acının ana kaynaklarından biridir. Bunu gerçekten iyi yapıyor Bu örneğini alalım: .layout > :not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide) { max-width: var(--content-width); margin-left: auto; margin-right: auto; } İşte bu noktada en yakın çocuklarımızı horizontal olarak ve maksimum genişliği uygulayın - çocuklar hariç tüm ve ve ve . .layout alignleft alignright alignfull alignwide Bu kokunun iki ana nedeni var. İlk olarak, bu bir kara liste desenidir. her şeyi stilize ediyoruz Sorun, “her şey”in zaman içinde her zaman değişmesidir. Proje büyüdükçe, neredeyse kesinlikle daha fazla istisna ekleyeceksiniz. Bir gün onu eklemeyi unutursunuz ve bir şey kırılacaktır. hariç İkincisi, eklediğiniz her seçici spesifikliği artırır. Bu sayede daha güçlü bir seçiciye ihtiyaç duyar. ve Ya da her şeyi içine çekerek Başka bir deyişle, karmaşıklığı daha fazla karmaşıklıkla düzeltirsiniz. 0.5.0 !important @layer :where() WordPress, CSS mimarisi olmadan başlamak ve kaosla bitirmek için iyi bir örnektir. body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; } Burada karışık sinyalleri alıyorum. Kötü bir fikir olduğunu anladım, geri döndüm Sonra... Uygulandı Marjları aşmak imkansız hale getirmek için? bunun bir nedeni vardı eminim, ama adam... o kadar hayal kırıklığı değil mi? :not() :where() !important Kesinlikle bunların hepsini yapabilirsiniz... Ya da daha niyetli olabilirsin ve kendine biraz barış alabilirsin: /* 0.1.0 */ .layout > * { max-width: var(--content-width); margin-left: auto; margin-right: auto; } /* 0.2.0 */ .layout > .alignleft, .layout > .alignright { --content-width: var(--content-width--narrow); } /* 0.2.0 */ .layout > .alignwide { --content-width: var(--content-width--wide); } /* 0.2.0 */ .layout > .alignfull { --content-width: var(--content-width--full); } Okumak daha kolay ve düşünmek daha kolaydır.Bazı kurallar Ancak istisnalar . 0.1.0 0.2.0 Öngörülebilir ve kasıtlı. İşte iyi bir sebep olmadan spesifikliği arttırmanın başka bir yaygın yolu: /* ❌ combine element with a class ❌ element nested inside the block ❌ modifier nested inside the block */ a.button { &.button__label {...} &.button--secondary {...} } Bu örnekte : Eğer a ve .button kombinasyonuna gerek yoksa, bunu yapmayın. Eğer .button_label .button altında yerleştirmek için bir neden yoksa, bunu yapmayın. Aynı şey değişik sınıflar için de geçerli. Yeni bir bileşen gönderiyorsanız, bu genellikle yerine istediğiniz şeydir: /* ✅ no element + class combination ✅ elements and modifiers stay flat */ .button {...} .button__icon {...} .button--primary {...} İşte takip ettiğim parmak izi kuralı: Varsayılan olarak tek bir sınıf seçicisi tercih edin. Seçicileri birleştirmek yerine yararlı varyasyonları kullanın. Kaynak siparişi burada size yardımcı olacaktır. Özelliği 0.1.0 veya 0.1.1 seviyesinde tutun. Gönderdiğiniz özelliklerde 0.2.0'in üzerinde gitmeyin. #id seçicilerinden ve uygulama kodundaki iç çizgi stillerinden kaçının. Daha yüksek spesifikliği yalnızca üçüncü taraf veya eski kodları yenilemeyeceğinizde kullanın. notları ve ve :where() @layer @scope Bu araçlardan tamamen haberdarım. ayrıntılılığı sıfıra indirebilirsiniz Yalnızlık tarzı ile ve seçeneklere göre . :where() @layer @scope Güçlüler ve yerleri vardır, ama kötü mimari düzeltmezler. Aynı özelleştirme kuralları her katman içinde ve her kapsamda hala geçerlidir. Önceki Önceki yazı: Gelecekte kendinize teşekkür edeceksiniz
