CSS yazmak kolay değildir, çünkü dikkatli olmazsanız, karmaşık kodlar yazabilir, yavaş olabilir ve kodunuzu yazarken çok fazla zaman hata ayıklama kodu alabilirsiniz.

Konuyu kısa keselim: Bu eğitimde birkaç tane topladım. Tricks CSS kodu yazarken performansınızı artırmak için kullanabileceğiniz. Bunları eski veya yeni projelerinizde istediğiniz zaman uygulayabilirsiniz.

Biz özellikle inceleyeceğiz:

1. Özelliklerin toplanması

Aynı özellikleri birden çok kez yazdığınızı fark ederseniz, gereksiz sınıfları ve kimlikleri kaldırarak bunları kesemeyeceğinizi doğrulayın. Ardından, tüm ortak özellikleri tek bir küme ayracına ekleyin.

Bölümlerinizi bağlayabilirseniz, operasyonda daha verimli bir dosya oluşturabileceksiniz ve çok daha hızlı olacaktır.

2. sabitleri için şifre kullanın

CSS'nin talihsiz sınırlaması PHP'de olduğu gibi sabitleri tanımlayamamanızdır. Sabitler, kodun kapsamı ve kapsamlar ne olursa olsun, komut dosyasının geri kalanında bir kez tanımlayabileceğiniz terimlerdir.

Tasarım bloğunuz olarak tanımladığınız bir türü seçmek için birden çok stil oluşturmayı bırakabilirsiniz. CSS sitenizi programlamak için oluşturulmadığından, yalnızca bir iç mimar olarak hareket etmenize izin verir, yani sabitleri destekleme kapasitesine sahip değildir.

Yine de bu, özellikle mülklerinizi bir araya getirmenin sizin için tüm işi yapmayacağı durumlarda gerçekten yardımcı olacak bir şeydir.

Yapabileceğiniz şey, ihtiyacınız olan tüm stilleri içeren bir kimlik oluşturmaktır. Gerçekten kullanmanız gerektiğinde, beyan için ihtiyacınız olan seçicileri eklemeniz yeterlidir. Bu da CSS kodunuzu çok daha hızlı yazmanızı sağlayacaktır.

3. senin sabiti Comment

Tabii ki, CSS sabitleri desteklemez, ancak bu, başka türlü sabitler olan şeyler için hala referans yazamayacağınız anlamına gelmez. Neden ortak stilleri çok satırlı bir yorumda listelemiyorsunuz?

Bu yorumları nasıl yazacağınızı belirlemek sizin sorumluluğunuzda olacaktır; ancak buna benzer bir tür malzeme tablosu oluşturabilirsiniz:

/ * CSS 'Sabitler' * * Amaç: #ccc9c9 * Derin gri, metin: * #3a3838 arka plan mutlu eli #e7e7e7 * * /

Bu benim için özellikle yararlıdır, çünkü bir kod bloğunun (Sabit) işlevsel ayrıntılarının ne olduğunu hızlıca bilmek benim için her zaman kolay değildir. Yakınınızda bir geri arama olması, kodlama sürecini hızlandırmaya yardımcı olur, çünkü tam olarak nereye bakacağınızı bilirsiniz ve belirli bir stile başvurduğunuz noktayı bulmak için bir CSS dağında arama yapmanız gerekmez.

4. Gruplandırılmış seçiciler

Neden orada duralım? Siz oradayken, neden bir araya getirilebilecek birçok seçiciyi bir araya getirmiyorsunuz? Bu sizi aynı stili birkaç kez yazma zahmetinden kurtaracaktır:

h1, h2, h3, h4 s {dolgu: 1 em; font-family: "Times New Roman" kere serif; } Ul .navigation, .navigation li {dolgu üstü: 0,5 em; }

Bu her durumda işe yaramayabilir ve yukarıdaki örnek kesinlikle sizin özel ihtiyaçlarınız için geçerli olmasa da, bir sonraki kodlamanız için bir hatırlatma görevi görebilir ve zamandan tasarruf etmeniz gerekebilir. ve uzayda.

5. Önişlemci kullan

Bir CSS ön işlemcisi, normal CSS dilinin, normalde bu kadar kolay ekleyemeyeceğiniz birçok başka özelliği eklerken daha hızlı kod yazmanıza yardımcı olan bir uzantısıdır.

WordPress'teki en yaygın CSS ön işlemcileri SASS ve LESS'dir ve ikisini de kullanmayı öğrenebilirsin.

CSS ön işlemcileri işi çok daha kolay hale getirir ve geliştiricilerin bir kez alıştıktan sonra onlara ne kadar bağlanacağını görmek oldukça normaldir.

6. Sözde sınıflar

CSS uzmanı Eric Meyer'in açıkladığı gibi,  belirli bir sıradaki bağlantı stillerinin listesi önemli. Aksi takdirde, umduğunuz gibi çalışmayan stilli bağlantılarla karşılaşabilirsiniz.

Bağlantıların sözde sınıfları için basit bir sıra izleyerek gelecekte bu tür bir sorunu çözmek zorunda kalmayarak bununla mücadele edebilir ve zaman kazanabilirsiniz. Bu sırayı aşağıdaki cihazla hatırlayabilirsiniz:

a: link {deyim} a: visited {deyim} a: hover {deyim} a: Aktif {deyim}

Ziyaret edilmeyen bağlantıların stili önce belirlenir, ardından fareyle üzerine gelindiğinde ve etkin bağlantılarda ziyaret edilir. Doğruyu söylemek gerekirse, sıra gerçekten önemli değil, amaç bu kombinasyonu olabildiğince basit bir şekilde hatırlamanızı sağlamaktır. Sözde sınıflarda kullanılan harfler nedeniyle bu sıraya "LoVe / HAte" sözde sınıfları denir.

Ne yazık ki, bu "odak" sözde sınıfını içermez, ancak "aktif" sözde sınıf olarak kabul edilebilir. Bu sözde sınıfı içeren anımsatıcı bir ifade de vardır, " LoVe Acı Soluyor Uzakta ":

a: link {deyim} a: visited {deyim} a: hover {deyim} a: odak {deyim} a: Aktif {deyim}

7. CSS kısayolunu kullan

Hızlı ve verimli bir şekilde kodlamak istiyorsanız, ancak bir önişlemcinin yardımıyla daha dik bir öğrenme eğrisi olmadan, CSS kısayolunu kodlayabilirsiniz. Kuralları öğrenmesi çok daha kolay, bu da onları kullanmanızı kolaylaştıracak.

CSS kısayolu ile, işlevselliği kaybetmeden birden çok satırı tek bir satırda yoğunlaştırabilirsiniz. Örneğin, aşağıda bir elemanın sınırına uygulanan 3 satır göreceksiniz:

#maincontent {sınır genişlikli: 1px; border-style: solid; border-color: black; }

Bu çizgi çok daha basit olabilir:

#maincontent {sınır: düz siyah 1px; }

8. görüntüler için kısayolları kullanın

CSS kısayolları sizin için her zaman en iyi çözüm olmayabilir, ancak renklerle çalışırken bu kuralı benimseyebilirsiniz.

6 basamaklı onaltılık bir kod kullanmak yerine yalnızca 3 basamak kullanabilirsiniz.

#ffffff = #fff #1144bb #14b #ffcc44 = = #fc4

Başka bir deyişle, bir renk kodunun çiftlere sahip olduğunu görürseniz (birinci ve ikinci değer, üçüncü ve dördüncü ve son iki değer) her çiftin aynı karaktere sahip olduğu yer. her bir çift için bu karakterlerden herhangi birini atlayabilirsiniz.

Alışmak biraz zaman alacak ama fedakarlığa değecek. Diğer kısayol biçimleri yaygın değilse, burada endişelenmenize gerek yok çünkü renkli kısayollar neredeyse herkes tarafından biliniyor.

9. Bağlantıların alıntı ve boşluğa ihtiyacı yoktur

Stil sayfanıza bir URI eklediğinizde, normal ve doğru format, bu örnekte olduğu gibi, tek ve çift boşluklar ve tırnak işaretleri içerir:

vücut {
background-image: url (“Http://www.example.com/deepgray-pattern.png”);
}

"Url (" nin ardından, aslında isteğe bağlı olan bir boşluk, tırnak işaretleri ve bir kapatma boşluğu vardır.

Size biraz daha fazla zaman ve yer kazandırmak için, aynı satır şu şekilde yazılabilir:

vücut {
background-image: url (Http://www.example.com/deepgray-pattern.png);
}

Boşluğa ve alıntılara gerçekten ihtiyaç olmadığını fark edeceksiniz.

10. CSS analiz edin

Bu önemlianalizör Bitirdiğinizde stil sayfanızın mümkün olduğunca temiz ve hafif olduğundan emin olun. Bu acı verici olabilir ama daha da önemlisi tamamlanması biraz zaman alabilir.

Neyse ki, gibi ücretsiz araçlar vardır CSS Analizi, CSS Dig et CSS Tüy. Tek yapmanız gereken kodunuzu girmek, bazı seçenekleri belirlemek ve CSS kodunuz için anında bir rapor almak için bir düğmeyi tıklamaktır.

CSS Lint daha da ciddidir ve kodlama becerilerinizi geliştirmenize yardımcı olarak ilerleme adına hassasiyetinizi bozabilir.

Her iki durumda da, bunların hepsi işlemleri basitleştirmenize yardımcı olacak mevcut kolay seçeneklerdir.çözümlemek Mümkün olduğunca mantıklı olduğundan emin olmak için stil sayfanızı değiştirin.

bunlar için hepsi bu Tricks Farklı CSS projelerinizde kullanabileceğiniz. Bize teklifinizi sunmaktan çekinmeyin Tricks.