Hazır Site Kodları Web Siteniz İçin Hazır Site Kodları

  • Onur YURT
  • iletisim@hazirsitekodlari.com
  • 57

    Makale

  • 3

    Yorum

  • 8

    Kategori

Webmaster adına tüm bilgi ve paylaşım platformudur.

Senin Kodun

Ana Sayfa / Css / CSS Kodu Yazmak İçin 8 İpucu

Css | 14 Mayıs 2020 | 0 | 202
CSS Kodu Yazmak İçin 8 İpucu

Yazımızdaki 8 ipucu verimli, anlaşılır ve kullanışlı bir CSS yazmanıza yardımcı olacaktır.

Daha iyi bir CSS yazmak, sizi çok da zorlayacak bir konu değil. CSS kod dosyanız içerisinde nasıl çalıştığınıza ilişkin birkaç küçük ipucunun büyük etkilerini göreceksiniz. CSS becerilerinizi geliştirebileceğiniz ve daha anlaşılır, daha verimli ve daha kullanışlı CSS kodları yazabileceğiniz sekiz basit ipucuna göz atacağız.

1.CSS’i Sıfırlayarak Başlayın

Bazıları CSS Sıfırlamanın gereksiz olduğunu düşünebilir. Bu düşüncenin aksine, CSS Sıfırlama özelliği, temiz bir temelle başlamanıza olanak sağlar ve böylece web sitenize stil kazandırmayı kolaylaştırır.

CSS Sıfırlama, tarayıcının varsayılan stillerini sıfırlar veya geçersiz kılar. Kendinizinkini yazabilir, çevrimiçi olarak bulunan birçok sıfırlamadan birini kullanabilir veya ikisinin bir kombinasyonunu kullanabilirsiniz.

2. CSS Kısayollarının Nerede Kullanılacağını Bilme

CSS kısayolları, bir öğenin birden çok özelliğini tek bir satıra ayarlamanızı sağlar. Steno kullanmak alandan tasarruf sağlar ve yüklenmesi daha az zaman alır. Ancak, her zaman kullanmamalısınız.

Bazen uzun el çok ihtiyaç duyulan netliği sağlar. Ancak daha da önemlisi, yalnızca bir veya iki özellik ayarlamanız veya yalnızca bir şeyi geçersiz kılmanız daha iyi olabilir.

Hatırlanması gereken başka bir şey: stenografi kullanırken, geçersiz özellikler sıfırlanır, bu da istenmeyen bir etkiye neden olabilir.

3. KURU Metodolojisini Kullanın

Daha iyi CSS kodu yazmak için en iyi öneri DRY metodolojisini izleyerek takip edilebilir. DRY ‘kendi kendini tekrarlama’ anlamına gelir, aynı kod parçalarını tekrar tekrar kullanmayın.

DRY’yi CSS’de depolamanın bir yolu onu gruplamaktır. Bir örneğe bakalım.

Original CSS

.menu li {
  color: red;
}

.menu li a {
  color: red;
}

Refactored ve KURU

.main li, .main li a {
  color: red;
}

Gördüğünüz gibi, bu sadece CSS dosyanızın toplam boyutunu azaltmakla kalmaz – daha hızlı yüklenir – bakım alanında da bundan yararlanabilirsiniz. Renk özelliğinin güncellenmesi gerekiyorsa, noktayı güncelliyoruz.

DRY’de kalmak için CSS özel özelliklerini de kullanabilirsiniz. Özellikle aşağıdaki gibi kullanılır:

:root {
  --primary-color: red;
}

Ardından, CSS kodunuzda herhangi bir yerde kullanabilirsiniz:

.main li, .main li a {
  color: var(--primary-color);
}

4. Aşırı kullanımdan uzak durun!

Kullanmanız gereken çok az durum var ! önemli . En yanlış anlaşılan ve aşırı kullanılan ifadelerden biridir.

Beni yanlış anlamayın Önemli ifadenin önemli bir yeri vardır, ancak işler iyi gitmezse genellikle web geliştiricileri çaresizce kullanırlar. Yani öyle önemli onları düzeltmek için   İfadeyi ekleyerek kurallarına biraz daha ağırlık eklerler.

Sorun, daha fazla şeyin rapor edilmesidir, hızlı bakım ile tamir edilebilirken, domino etkisi ile büyük bir kabusa dönüşebilir. Kullanın kesinlikle gerekli olduğunda  önemli sihirbaz !

5. Tutarlı Olun

CSS’nizi nasıl yazdığınızdan ve özellikleri hangi sırayla eklediğinizden bağımsız olarak tutarlı tutun. Bazıları öğelerini alfabetik olarak sıralarken diğerleri daha mantıklı bir yaklaşım kullanır; örneğin, öğeleri satır uzunluğuna veya türüne göre düzenleme. Aslında size kalmış. Hangi yolu kullanırsanız kullanın, daha sonra bir şey bulmak daha kolay olan Activatecomlink’i kullanın .

6. Standart Adlandırma Yapın

Parametrelerinizi adlandırırken aşırıya kaçmayın. Kendi ve standart adlandırma kurallarınızı izleyerek adlandırma.

Adlandırma sırasında dikkat edilmesi gereken bazı noktalar:

  • Gereksiz kelimelerden kaçının:  Bunlar renk ve konuma sahip  kelimelerdir  (örneğin,  yeşil metin  veya  üst menü çubuğu  )
  • Yalnızca küçük harf kullanın:  CSS  büyük / küçük harfe  duyarlıdır, bu nedenle  MeNuBaR  gibi adlar oluşturmayın . Bununla birlikte, deve kasası (  menuBar  ) kabul edilebilir, ancak bazı durumlarda tercih edilmediğine  dikkat edilmelidir .
  • Birden çok kelimeyi bir satırla ayırın:  örneğin,  ana menü  . Sen de kullanabilirsiniz deve durumda ( mainMenu Ben genellikle bu tercih etmeyin öneririm olsa).
  • Belirli bir yerde aynı tür öğeleri tanımlayın:   Aynı öğe türü için birden fazla seçici kullanmanız gerekir. Örneğin, olabilir  birleştirmek bir  listesini  ve  hiç LIST2 tek oluşturmak  liste öğesi .

When 7.Gerek! Use Comment

İyi yazılmış kodun yorum gerektirmediğini doğrulasak da, bazı yerlerde koda yorumların eklenmesi gerektiği de doğrudur. Buradaki temel kural, yorumdan yararlanırsa kaynak kodunun eklenmesidir. Aksi halde yapmamalısın.

Yorumların ne zaman gerekli olabileceğini merak ediyorsanız, birkaç örnek:

  • Yorumlanan kod:  Belirli bir kod bölümünü belirli bir nedenden dolayı yorumluyorsanız, bu nedeni açıklayan bir yorum bırakın. Bunu yapmazsanız, neden orijinal olarak yorumladığınızı hatırlamayabilirsiniz.
  • Düzeltmeler:  Kodun düzeltilmesi hakkında bir ifade eklerseniz, kodu açıklayan bir yorum eklemek iyi bir fikir olabilir.
  • Hatırlatmalar:  İstediğiniz zaman birden fazla proje üzerinde çalışıyor olabilirsiniz. Bitmemiş bir şeyiniz varsa, yorumlarınızı daha sonra ne yapacağınıza dair bir hatırlatma olarak kullanabilirsiniz.
  • Notlar:  Kodun bir kısmı net değilse ve bir yorumun kodunuzu anlamanıza yardımcı olacağını düşünüyorsanız, yine de bir yorum ekleyebilirsiniz 123 com setu p.

8.Flexbox Keşfet 🙂

Sayfadaki öğeleri hizalamak söz konusu olduğunda, Flexbox size tam kontrol sağlar. Esnek desenler ve öğeler kullanarak sayfanızın tam olarak nasıl göründüğünü gösterebilirsiniz. Flexbox ayrıca bir sayfada dikey olarak düzenlenemeyen öğeleri dikey olarak düzenlemenizi sağlar.

İlk başta kafa karıştırıcı gelebilir, ancak eminim ki sizin için yararlı olacaktır. Flexbox hakkında daha fazla bilgi için göz atabilirsiniz .

 

BENZER KONULAR

Css | Kategorisine Ait Yazıların Daha Fazlası...

KONU HAKKINDA (Yorum Yapılmamış) | SENDE YORUM YAP DESTEK OL!

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

BEN KİMİM?

Onur YURT

Web Developer And Coder

Merhaba arkadaşlar Adım Onur YÜRT Bursada doğdum ve yaşıyorum 2009 yılından itibaren web hayatına adım attım ve şuanda bulunduğum sayfayı açtım amaçım sizlere birşeyler öğretmek ve kazandırmak Web tasarım konusunda kendimi yeterince geliştirdiğime inanıyorum bu bilgileri zamanla siz değerli takipçilerime sunmak yeterince bildiğim kodlama diller Css3, Html5, Javascript ve Php dir.

POPULER KONULAR

Hazır Site Kodları Web Siteniz İçin Hazır Site Kodları...