Yeni Başlayanlar İçin En İyi 14 CSS Uygulaması

Web tasarımına başladığınızda, her şeyin düzgün çalışması ve nasıl görünmesini istediğinize dair önemli bir unsur CSS'nin eline geçer. Bu, Basamaklı Stil Sayfalarının kısaltmasıdır ve HTML öğelerine istediğiniz şekilde stil vermenizi sağlayarak çalışırlar.

Ve CSS'yi herhangi bir sayıda yolla (çoğunlukla satır içi) deneyebilirken, bunu yapmanın daha iyi bir yolu var. Ve bu, kodunuzun işlevsel, gereksiz yığınlardan arındırılmış ve iyi organize edilmiş olduğundan emin olmak için izlemeniz gereken bir dizi en iyi uygulama ile uyumludur.

Bugün, yeni başlayanlar için en iyi 14 CSS uygulamasını vurgulayacağız, ancak deneyimli profesyoneller bile bazen temel bilgileri tazelemelidir.

1. Stil Sayfasını Düzenleyin

CSS en iyi uygulamalarını uygularken ilk işiniz, stil sayfalarınızı düzenlemektir. Buna nasıl yaklaşacağınız projenize bağlı olacaktır ancak genel bir kural olarak aşağıdaki organizasyon ilkelerine uymak isteyeceksiniz:

Tutarlı olun

CSS'nizi nasıl organize etmeyi seçerseniz seçin, seçimlerinizi tüm web sitenizin yanı sıra stil sayfasının tamamında tutarlı tuttuğunuzdan emin olun.

Sınıfları adlandırmaktan satır girintilerine ve yorum yapılarına kadar her şeyi tutarlı tutmak, işinizi daha kolay takip etmenize yardımcı olacaktır. Ayrıca, daha sonra değişiklik yapmanın baş ağrısız olmasını sağlar.

Satır Sonlarını Serbestçe Kullanın

CSS görsel olarak çirkin olsa bile çalışsa da, her kod parçacığını ayrı ve okunaklı tutmak için çok sayıda satır sonu kullanırsanız, sizin ve kodunuzla çalışacak diğer geliştiriciler için daha iyidir.

Tipik olarak, her bir özellik ve değer çiftini yeni bir satıra yerleştirmek en iyisidir.

Mantıklı Olduğu Yerde Yeni Bölümler Yaratın

Yine, stil sayfalarınızı nasıl kuracağınız büyük ölçüde üzerinde çalıştığınız sitenin türüne bağlı olacaktır. Ancak genel bir kural olarak, stiller için kullanılacak bölümleri oluşturmak iyi bir fikirdir. Bu nedenle, metin stilleri için bir bölüm, listeler ve sütunlar için bir bölüm, gezinme ve bağlantılar için bir bölüm vb. Ayrıca, mağaza veya SSS gibi diğerlerinden farklı stillere sahip olabilecek belirli sayfalar için bölümler bile oluşturabilirsiniz.

Kodunuzu Yorumlayın

CSS'nizi bir gün görebilecek olsanız bile, yorumlarınızı eksiksiz yapmak yine de iyi bir fikirdir. Yorumlar aşağıdaki gibi görünecektir:

 /* This is what a standard CSS comment looks like */

Bu, daha sonra her satırı gözden geçirmek zorunda kalmadan her bölümün neyle ilişkili olduğunu bir bakışta anlamanızı kolaylaştırır.

Yorumlar, bölümleri tanımlamanıza yardımcı olabilir, ancak bunları, özellikle daha sonra unutabileceğinizi düşünüyorsanız, verdiğiniz kararlarla ilgili içgörü sağlamak için de kullanabilirsiniz.

Daha Büyük Projeler için Ayrı Stil Sayfaları Kullanın

Bu, her web sitesi için geçerli değildir, ancak çok sayıda belirli CSS'ye ihtiyaç duyan büyük bir siteniz varsa, birden çok stil sayfası kullanmak iyi bir fikirdir. Siz dahil hiç kimse, ihtiyacınız olan tek kod satırını bulmak için çok uzun bir süre kaydırma yapmak zorunda kalmamalıdır.

Zorluklardan kaçının ve farklı site bölümleri için ayrı stil sayfaları oluşturun - özellikle de tamamen farklı stilleri olacaksa.

Örneğin, ürün açıklamaları, başlıklar veya fiyatlandırma için özel stiller ile global stiller için bir stil sayfası ve çevrimiçi mağazanız için başka bir stil sayfası oluşturmak isteyebilirsiniz.

2. Satır içi CSS'ye karşı Harici CSS'ye karşı Dahili CSS'ye karşı

Bir web sitesi oluştururken ve stilini ayarlarken uğraşmanız gerekebilecek üç farklı CSS türü vardır. Her birinin ne olduğu ve ne yaptığı hakkında biraz konuşalım ve ardından projeleriniz için gerçekte hangisini kullanmanız gerektiğini tartışalım.

• Satır içi CSS. Bu, belirli HTML öğelerine stil vermenizi sağlar,
• Harici CSS . Bu, siteyi bir bütün olarak biçimlendirmek için stil sayfası gibi bir dosya kullanmayı içerir.
• Dahili CSS. Bu, belirli öğeler yerine tüm sayfaya stil vermenizi sağlar.

Çoğu geliştirici, genellikle önbelleğe alınamadığı için satır içi CSS'den kaçınılmasını önerir ve CSS'yi birden çok dosyaya bölmekten kaçınmanız önerilir. En azından az miktarda kullanılmalıdır.

Web sitenizin tek bir bölümü, biraz metni veya tek bir sayfasının alanı üzerinde biraz stil kullanacaksanız, buna gerçekten ihtiyaç olduğunu görebiliriz. Büyük olasılıkla satır içi CSS'nin uygulanabilir bir çözüm olduğu tek durum budur.

Bunun dışında, ihtiyaçlarınıza bağlı olarak harici CSS veya dahili CSS kullanmak, zamandan ve emekten tasarruf etmenizi sağladığı için daha iyi seçeneklerdir. Stilleri bir kez belirleyin ve web sitenizde uygulayın. Boom - bitti.

3. Stil Sayfanızı Küçültün

CSS en iyi uygulamalarından bir diğeri de stil sayfalarınızı küçültmektir. Doğrudan Kinsta CDN içinde de dahil olmak üzere, stil sayfalarınızın yükleme sürelerini hızlandırmak için kullanılabilecek çok sayıda küçültme aracı vardır.

Bu, web sitenizin tamamında kod küçültme ayarlarını yapmanızı sağlar.

4. Bir Ön İşlemci kullanın

Sass/SCSS gibi bir ön işlemci, değişkenleri ve işlevleri kullanmanıza, CSS'nizi daha iyi düzenlemenize ve zamandan tasarruf etmenize olanak tanır. Önişlemci sözdiziminden CSS oluşturmanıza izin vererek çalışırlar.

Bunun anlamı, ön işlemci, genellikle CSS'de kendi başına bulunmayan birkaç özelliği içeren bir “CSS +” gibidir. Bu özelliklerin eklenmesi genellikle çıktı CSS'sini daha okunaklı ve gezinmeyi daha kolay hale getirir.

Ön işlemcileri kullanmak için web sitenizin sunucusunda bir CSS derleyicisine ihtiyacınız olacak. En popüler ön işlemcilerden bazıları Sass, LESS ve Stylus'tur.

5. Bir CSS Çerçevesi Düşünün

CSS çerçeveleri bazı durumlarda faydalı olabilir, ancak özellikle web siteniz daha küçükse, birçok insan için gereksiz olabilir.

Çerçeveler, büyük projeleri hızlı bir şekilde dağıtmayı kolaylaştırabilir ve ayrıca hataları önleyebilir. Ve aynı anda birkaç kişi bir proje üzerinde çalışırken gerekli olan standardizasyon avantajını sağlarlar.

Herkes aynı adlandırma prosedürlerini, aynı yerleşim seçeneklerini, aynı yorumlama prosedürlerini vb. kullanacak.

Öte yandan, genel görünümlü web sitelerine de neden olurlar ve kodun çoğu kullanılmayabilir.

Muhtemelen daha önce CSS çerçeveleriyle karşılaşmışsınızdır. Bootstrap ve Foundation en popüler örneklerden ikisidir. Diğer çerçeveler arasında Tailwind CSS ve Bulma bulunur.

6. Sıfırlama ile Başlayın

Hızla uygulamaya koymanız gereken başka bir şey de geliştirme çalışmanıza bir CSS sıfırlaması ile başlamaktır. Normalize.css gibi bir şey kullanmak, tüm tarayıcıların, tarayıcı tutarsızlıklarını en aza indirmek için en güncel standartları takip ederken sayfa öğelerini tutarlı bir şekilde oluşturmasını sağlayabilir.

Bu sıfırlama aslında HTML öğelerinin stiline daha yüksek düzeyde tarayıcılar arası tutarlılık eklemek için web sitenize yüklediğiniz küçük bir CSS dosyasıdır ve bir CSS sıfırlaması gerçekleştirmenin güncellenmiş bir yolu olarak hizmet eder.

7. Sınıflar ve Kimlikler

CSS en iyi uygulamalarını takip ederken dikkat etmeniz gereken bir sonraki şey, sınıflara ve kimliklere nasıl davrandığınızdır. Eğer aşina değilseniz, ikisini de kısaca tanımlayalım:

• Sınıf. Sınıf seçici, sınıf özniteliğine sahip bir öğe seçerek çalışır. Class özelliğinde ne var, HTML öğesinin nasıl seçildiğini belirler. Kodda şöyle görünür: .classname
• İD. ID ise, ID özniteliğine sahip bir öğe seçerek çalışır. ID özelliğinin çalışması için seçicinin değeriyle aynı olması gerekir. CSS'de bir kimliği şu sembolle görebilirsiniz: # .

Tek bir öğeyi seçmek için bir kimlik kullanılırken, birden fazla öğeyi seçmek için bir sınıf kullanılır. Tek bir HTML öğesine stil uygulamak için bir kimlik kullanırsınız. Birden fazla HTML öğesine stil uygulamak için bir sınıf kullanırsınız. Bu genel kurala uymak, kodunuzu temiz ve düzenli tutmanıza yardımcı olur ve ayrıca gereksiz veya yinelenen kod örneğini azaltır.

Yukarıdaki satır içi ve harici CSS tartışmamıza benzer şekilde, tek bir öğeye stil uygulamak için bir kimlik kullanırsınız. Temel olarak, kimliklerin tüm sayfa veya web sitesi için geçerli olacak kapsayıcı stiller için değil, sayfadaki istisnaları biçimlendirmek için kullanılması amaçlanmıştır.

8. Fazlalıktan Kaçının

İzlenecek CSS en iyi uygulamalarından bir diğeri, ne zaman ve nasıl olursa olsun fazlalıktan kaçınmaktır. Bu uygulamayı iş akışınıza uygulamak için izlemeniz gereken birkaç genel ipucu:

KURU yöntemini kullanın

DRY yöntemi, “Kendinizi Tekrar Etme” anlamına gelir ve temel olarak CSS'de kodu asla tekrarlamamanız gerektiği fikridir. Çünkü en iyi ihtimalle, bu stilleri tekrar tekrar manuel olarak girmeniz zaman kaybı ve tekrarlayıcıdır, ancak en kötü ihtimalle web sitenizi aktif olarak yavaşlatabilir.

Fazlalıkları kaldırmak için kodunuzu gözden geçirmek iyi bir uygulamadır. Örneğin, aynı bölümde yazı tipi boyutunu iki kez tanımlamak için etiketlerin kullanılmasına gerek yoktur. Tekrarları kaldırın, kodunuz daha iyi okuyacak ve daha iyi performans gösterecektir.

CSS Steno Kullan

CSS steno, hala olması gerektiği gibi performans gösterirken kodunuzun kapladığı alan miktarını azaltmanın harika bir yoludur. Mantıklı geliyorsa, birden çok stili tek bir satırda birleştirebilirsiniz. Örneğin, belirli bir div'in stillerini ayarlıyorsanız, kenar boşluğunu, dolguyu, yazı tipini, yazı tipi boyutunu ve rengi tek bir satırda listeleyebilirsiniz.

Öğelerinize Birden Çok Sınıf Ekleyin

Uygun olduğunda, bir öğeye birden fazla sınıf ekleyerek fazlalıkları da önleyebilirsiniz. Örneğin, sayfanızın içeriği .left sınıfı sayesinde zaten sola kayıyorsa ancak sayfada bir sütunu sağa konumlandırmak istiyorsanız, karışıklığı önlemek ve CSS'ye özellikle hangi öğeyi istediğinizi söylemek için bunu öğeye ekleyebilirsiniz. standart sol hizalamanın üstünde sola doğru yüzmek istiyorum.

Ve en iyi yanı, bir boşlukla ayrıldığı sürece bir öğeye istediğiniz kadar sınıf ekleyebilirsiniz.

Öğeleri Mümkün Olduğunda Birleştirin

Öğeleri tek tek listelemek yerine, yerden ve zamandan tasarruf etmek için bunları birleştirin. Çoğu zaman, tek bir stil sayfasındaki öğeler aynı (veya benzer) stillere sahip olacaktır. Hepsi aynı stili paylaşıyorsa, sayfadaki her metin öğesinin yazı tipini, rengini ve hizalamasını listelemeye gerek yoktur. Bunun yerine, bunları aşağıdaki gibi tek bir satırda birleştirin:

 h1, h2, h3, p { font-family: ariel, color: #00000 }

Gereksiz Ekstra Seçicilerden Kaçının

Bazen, sitenizin tasarımını tamamlamaya çalışırken kodunuz biraz dağınık olabilir. Bu nedenle, olaydan sonra geri dönüp gereksiz seçicileri kaldırmak önemlidir. Aşırı karmaşık seçicilere de dikkat etmelisiniz. Örneğin, web sitenizde stil listeleri oluşturacaksanız, “gövde” veya “konteyner” gibi seçiciler veya bu türden herhangi bir şey kullanmanıza gerek yoktur. Sadece .classname li { yeterli olacaktır.

9. Yazı Tiplerini Düzgün Bir Şekilde İçe Aktarma

Yazı tiplerini doğru şekilde içe aktarmak ve kullanmak, CSS'nizin açık, özlü ve optimize edilmiş olmasını sağlamanın başka bir yoludur.

Fontları İçe Aktarmak için @font-face'i Kullanma

Web sitenize hemen hemen istediğiniz herhangi bir yazı tipini ekleyebilirsiniz, ancak düzgün çalıştığından emin olmak için belirli bir prosedürü izlemeniz gerekir.

1. Kullanmak istediğiniz yazı tipini indirin. Google ve Adobe dahil olmak üzere yazı tiplerini kaynaklayabileceğiniz birçok yer var. Seçtiğiniz yazı tipi için TrueType Yazı Tipi dosyasını (.ttf) indirdiğinizden emin olun.
2. Font Squirrel tarafından sağlanan Webfont Oluşturucu'ya kullanmak istediğiniz özel yazı tipini yükleyin. Web Font Kit'i oluşturulduktan sonra indirin. .ttf, .woff, .woff2 ve .eot gibi uzantılara sahip birkaç farklı yazı tipi dosyasını içeren birkaç dosya içermelidir. Ayrıca bir CSS dosyası da bulunmalıdır.
3. FTP kullanarak Web Yazı Tipi Kitini web sitenize yükleyin. Bunun için özel talimatlar web barındırma sağlayıcınıza bağlı olarak değişecektir, ancak genellikle sitenizin dosyalarına bir FTP istemcisi veya web barındırıcınızın cPanel gibi yönetici arayüzündeki dosya yöneticisini kullanarak erişebilirsiniz.
4. Bir metin düzenleyici kullanarak CSS dosyasını güncelleyin. Tercih ettiğiniz herhangi bir HTML metin düzenleyicisi NotePad veya Sublime gibi olacaktır. Bu dosyanın içinde bir "kaynak URL" listelenecektir. Web Yazı Tipi Setinin şu anda web sunucunuzda nerede barındırıldığını yansıtmak için bunu güncellemeniz gerekecektir. Her yazı tipi dosyasının web barındırıcınızda depolandığı dosya yolunu aşağıdaki gibi bu dosyaya kopyalayın:

 @font-face { font-family: "FontName"; src: url("https://sitename.com/css/fonts/FontName.eot"); src: url("https://sitename.com/css/fonts/FontName.woff") format("woff"), url("https://sitename.com/css/fonts/FontName.otf") format("opentype"), url("https://sitename.com/css/fonts/FontName.svg#filename") format("svg"); }

Ardından, yeni fontlarınızı font-family etiketiyle sitenizin CSS dosyalarına ekleyerek kullanmak üzere koyabilirsiniz.

Site performansını iyileştirmek ve yüklenirken sitenizin düzeninin garip yeniden ayarlanmasını önlemek için yazı tiplerini önceden yükleyebilirsiniz. Yazı tiplerini önceden yüklemek ve WOFF2 yazı tiplerini (veya aksi takdirde en küçük yazı tipi boyutunu) yüklemek öncelikle performansı önemli ölçüde artırabilir. Bunu, <head> etiketine bir kod satırı ekleyerek yaparsınız. Better Web Type kısa bir örnek sunar:

 <link rel="preload" as="font" href="/assets/fonts/3A1C32_0_0.woff2" type="font/woff2" crossorigin="crossorigin">

Yapabileceğiniz başka bir şey, özel yazı tipleriniz için karakter setini sınırlamaktır. Bir yazı tipinden yalnızca birkaç karakter kullanıyorsanız (belki bir başlık veya logo için), tüm karakter kümesini çağırmanız gerekmez, yalnızca birkaçına gerçekten ihtiyacınız vardır. Yeni koda göre, sadece “Merhaba” karakterlerini istemek için bunu aşağıdaki gibi yapacaksınız:

 <link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

Mümkün Olduğunda Kendi Kendine Barındıran Yazı Tipleri

Yukarıda açıklanan süreç, kendi kendini barındıran yazı tipleri içindir, ancak bunun en iyi yaklaşım olduğunu tekrarlamak önemlidir. Yükleme süresini önemli ölçüde hızlandırır ve sitenizin yükleme işlemini tamamlamak için başka bir sitenin hızına güvenmediğiniz anlamına gelir.

Yazı Tipi Varyasyonlarına Dikkat Edin

Yazı tipi varyasyonları, web sitenize eğlenceli stiller eklemek için çok yararlı olabilir. Ancak, kötüye kullanılırlarsa web sitenizi de bozabilirler.

font-variation-settings altında birden fazla stil atarsanız, bunlar büyük olasılıkla çakışacak ve biri diğerini geçersiz kılacaktır. İşleri basit tutmaktan ve bunun yerine burada gösterilen yazı tipi özelliklerini kullanmaktan çok daha iyisiniz:

 .bold { font-weight: bold; } .italic { font-style: italic; }

Bir Geri Dönüş Yazı Tipi Kullanın

Web sitenize özel bir yazı tipi eklemek ve onu CSS aracılığıyla kullanmak için çaba sarf etmenize rağmen, özellikle güncel olmayan bir web tarayıcısına sahip biri tarafından erişildiğinde, yine de %100 çalışmayacaktır. Ancak yine de bu site ziyaretçilerinin hoş bir tarama deneyimi yaşamasını istiyorsunuz.

Buna uyum sağlamak için, diğer yazı tiplerinizden hiçbirinin kullanılabilir olmaması durumunda kullanılabilecek bir yedek yazı tipi ayarlamak önemlidir. Bunu yapmak için, bir font-family atarken tercih ettiğiniz fonttan sonra yedek fontu listelemeniz yeterlidir. Bu şekilde, CSS önce tercih ettiğiniz yazı tipini, ardından ikinci seçiminizi, ardından üçüncü yazı tipinizi vb.

W3Schools'a göre, yazı tipi aileleri için beş ana kategori vardır. Aşağıda, her birine uyan popüler yedek yazı tiplerine sahip bu ailelerin bir listesi bulunmaktadır.

• Şerif: Times New Roman, Georgia, Garamond
• Sans-serif: Arial, Tahoma, Helvetica
• Monospace: Yeni Kurye
• El yazısı: Fırça Komut Dosyası MT
• Fantezi: Bakır levha, Papirüs

10. CSS'yi Erişilebilir Hale Getirin

Herkes web sitelerini erişilebilir hale getirmelidir. Ve bu, CSS'ye yaklaşımınız için de geçerli. Amacınız web sitenizi mümkün olduğunca çok insan için kullanılabilir hale getirmek olmalıdır ve erişilebilirlik önlemleri uygulamak bunu başarmanın harika bir yoludur.

CSS'nizi çeşitli şekillerde erişilebilir hale getirebilirsiniz:

• Öne çıkmalarını sağlamak için bağlantılara renk varyasyonları ekleyin.
• ESC tuşuna basarak açılır pencereleri kapatılabilir hale getirin. Ekran okuyucuları veya büyütmeyi kullananlar, bir açılır pencereyi kapatmak için genellikle ekrandaki "X" işaretini göremezler, bu nedenle onları bir tuşa basarak kapatılabilir hale getirmek çok önemlidir.
• Bazı cihazlar ilk etapta pop-up'ları bile göstermez, bu nedenle tüm önemli bilgilerin başka bir yere iletildiğinden emin olun.
• Fareyle üzerine gelme öğeleri (araç ipuçları gibi), fareyle üzerine gelmenin yanı sıra Sekme tuşuyla da tetiklenmelidir.
• Anahatları kaldırmayın. Tarayıcılar, klavyenin otomatik olarak odaklandığı öğelerin etrafında bir anahat görüntüler. Bunu anahat:yok kullanarak devre dışı bırakabilirsiniz, ancak ekran okuyucu kullananlar veya görme bozukluğu olanlar ve gezinme için ek vurgulama/odak noktaları gerektirenler için çok değerli olduğundan, gerçekten yapmamalısınız.
• Odak göstergesini iyileştirin. Yukarıda bahsedildiği gibi, vurgulanan öğelerin etrafındaki ana hatlar, birçokları için gezinme için gereklidir, ancak varsayılan anahat genellikle zar zor görünür. Şu anda odakta olana daha fazla dikkat çeken bir stil ayarlamak için :focus'u kullanarak bunu daha görünür olacak şekilde değiştirebilirsiniz. Kapak efektlerini geliştirmek için :hover ile benzer bir şey yapabilirsiniz. :focus in action'ı değiştirmeye iyi bir örnek, Washington Üniversitesi'nden bir dizi erişilebilirlik yönergesinden gelir:

 a { color: black; background-color: white; text-decoration: underline } a:focus, a:hover { color: white; background-color: black; text-decoration: none }

Bu kod parçacığı, bağlantıların beyaz bir arka plan üzerinde siyah metin olarak gösterilmesini, ancak klavye odağının altına yerleştirildiğinde (kullanıcı sekmeye geçtiğinde) bir arka plan üzerinde beyaz metne kaymasını sağlar. Aynı etki, üzerine gelindiğinde de ortaya çıkar.

11. Adlandırma Kurallarını Uygulayın

Şu anda küçük görünebilir, ancak CSS'deki şeyleri adlandırmaya karar verdiğiniz şeyin kalıcı etkileri olabilir - ve yanlış yapılırsa gelecekte aktif olarak zaman ve paraya mal olabilir. CSS yazmaya başlamadan önce, bir dizi adlandırma kuralına karar vermeli ve bunlara bağlı kalmalısınız.

Bu, kodunuzu yazarken yanlış öğeye başvurma olasılığınız daha düşük olduğundan, daha sonra hata ayıklama konusunda size çok zaman kazandıracaktır. FreeCodeCamp'e göre, CSS adları için standart biçimlendirmeye bağlı kalmak iyi bir yaklaşımdır, yani font-weight vs fontWeight .

BEM Adlandırma Kuralını Kullanın

Adları tutarlı tutmanın iyi bir yolu, BEM Adlandırma Kuralını kullanmaktır. BEM'in tüm amacı, kullanıcı arayüzünü tekrar tekrar kullanabileceğiniz bileşenlere bölmektir.

BEM, Blok, Eleman ve Değiştirici anlamına gelir. Ama bunun gerçekte ne anlama geldiğini çözelim.

• Blok : Blok , web sitenizdeki menü, üstbilgi, altbilgi veya sütun gibi herhangi bir tasarım parçası olabilir. Bloklarınız .main-nav veya .footer gibi adlara sahip olmalıdır.
• öğe . Öğeler, her bloğu oluşturan bitleri ve parçaları tanımlar. Yazı tipleri, renkler, düğmeler, listeler veya bağlantılar gibi şeyleri düşünün. BEM adlandırma kuralı kullanılırken, öğeler, öğe adından önce iki alt çizgi yerleştirilerek tanımlanır. Web sitenizin başlığında kullanılan yazı tipinden bahsetmek isteseydik, CSS'de BEM adlandırma kuralına göre şöyle görünürdü: .header__font
• değiştirici . BEM bulmacasının son parçası değiştiricidir. Değiştiriciler, blok içindeki öğenin stilini nasıl belirlediğinizdir. Bunlar, yazı tipi adları, ağırlıkları ve boyutları gibi şeyleri içerir; renk değerleri; ve hizalama değerleri. Yukarıda verilen örnekle çalışmaya devam edersek, başlıktaki yazı tipi rengini ayarlamak isteseydiniz, öğe ve değiştirici iki kısa çizgi ile ayrılmış şekilde bunu böyle yazardınız: .header__font–red

Bu adlandırma kuralına uymak - veya ekibinizin karar verdiği başka bir şey - daha sonra çok daha keyifli düzenleme ve hata ayıklama deneyimi sağlayabilir.

12. !Önemli Etiketinden Kaçının

CSS çalışma rutininize uygulamak için başka bir en iyi uygulama, !important etiketini olabildiğince fazla kullanmaktan kaçınmaktır.

Sorunları çözebilse de , kullanımı genellikle ona bir koltuk değneği olarak güvenmeye yol açar. Ve bu, kodunuz boyunca sitenizi bozabilecek bir !important etiketi karmaşasına neden olabilir.

Bunun aslında aşağı indiği şey, özgüllüktür. Bir seçici çok spesifikse, web tarayıcınız bunun daha az spesifik seçicilerden daha önemli olduğunu belirleyecektir. !important etiketi, diğerlerinden daha önemli olan özellikleri tanımlamak için kullanılabilir.

Bu, genellikle birden çok !important etiketi kullanmanız gerekeceğinden, her biri belirli senaryolarda bir öncekini geçersiz kılmak için zorlaşabilir. Ve bunu çok fazla yapmak sitenizin bozulmasına veya stillerinizin yanlış yüklenmesine neden olabilir. Çoğu zaman, bu etiket kısa vadeli bir çözüm olarak kullanılır, ancak genellikle kalıcı hale gelir ve daha sonra özellikle hata ayıklama zamanı geldiğinde sorunlara neden olabilir.

!important etiketini kullanmanın genel olarak kabul edilebilir olduğu tek durumlardan biri, son kullanıcının ekran okuyucular ve diğer erişilebilirlik yardımcılarıyla kullanım için stilleri geçersiz kılmasına izin verilmesidir. Yardımcı sınıflarla uğraşırken de yararlıdır.

13. Flexbox'ı kullanın

Ayrıca, iş akışınıza CSS ile başa çıkmak için en iyi uygulamaları uygulamaya çalışırken Flexbox'tan daha fazla mesafe alabilirsiniz. Flexbox, geleneksel kayan nokta seçeneğini kullanmak yerine bir web düzeni oluşturmanın ve sayfadaki öğeleri hizalamanın esnek bir yoludur.

CSS-Tricks'e göre Flexbox, mizanpajlarınızın bir kap içinde nasıl hizalandığına ve dağıtıldığına dikkat ederek CSS'nizi yapılandırmanın alternatif bir yolu olan esnek bir kutu modülüdür. En iyi yanı, kabın boyutunun kendisinin bilinmesine bile gerek olmamasıdır ve bunun yerine içerdiği özellikler, değişen kap boyutuyla "esneyecektir". Bu, mobil cihazları barındırmanın harika bir yoludur.

Diğer bir önemli fark, Flexbox'ın "yönden bağımsız" olmasıdır, yani düzenleri dikey veya yatay olarak yapılandırılmaz. Bu, birçok ekran yönü değişikliğini barındırması gereken karmaşık web siteleri ve uygulamalar tasarlamak için daha iyi bir seçim olmasını sağlar. Standart CSS mizanpajları blok tabanlıdır ve esnek kutu mizanpajları “esnek akışa” dayanır. Yine, CSS-Tricks, bu kavramı iyi gösteren kısa bir çizim sunar:

Esnek kutu içindeki öğeler, ana eksen ve çapraz eksen boyunca düzenlenir; buradaki her öğe ve özellik, esnek kabın boyutuna göre esneyecek ve akacak şekilde tasarlanmıştır.

14. WordPress İpucu: Tema Dosyalarını Doğrudan Değiştirmeyin

Bugün burada tartışacağımız en iyi CSS uygulamalarının sonuncusu, özellikle WordPress kullanıcıları içindir. Temanızın dosyalarını doğrudan değiştirmek asla iyi bir fikir değildir. Herhangi bir site güncellemesi bu değişiklikleri silebilir veya sitenizi bozabilir. Riske değmez.

Bunun yerine, istediğiniz değişiklikleri yapmak için Tema Özelleştirici'deki Ek CSS seçeneğini kullanabilirsiniz. Ancak, bunun CSS'yi satır içi enjekte ettiğini ve doğrudan kafaya yerleştireceğini unutmayın.

Yalnızca bir veya iki değişiklik yapmak istiyorsanız, bu uygun bir seçenek olabilir, ancak Ek CSS kutusuna yerleştirdiğiniz her şey, bir tema güncellemesi, site güncellemesi gerçekleştirseniz veya temaları değiştirseniz bile yerinde kalacaktır. .

Şimdi, daha sağlam CSS değişiklikleri gerekiyorsa, bunları özel bir CSS stil sayfasından eklemekten veya alt tema için style.css dosyasını doğrudan değiştireceğiniz bir alt tema kullanmaktan daha iyisiniz. Bu yöntem aynı zamanda güncellemeye karşı dayanıklıdır.

Özet

Yararlı ve doğru CSS oluşturmaya dalmak, gerçek bir acemi için çok şey gibi gelebilir, ancak kendinizi en iyi uygulamalar konusunda eğitmek için zaman ayırmak size daha sonra çok fazla zaman, çaba ve baş ağrısı kazandırabilir.

Bu en iyi uygulamalar koleksiyonunun, önümüzdeki yıllarda işlevsel, kullanışlı ve erişilebilir web siteleri oluşturmaya yönelik doğru yolda sizi yönlendirmeye yardımcı olacağını umuyoruz. İyi şanlar!