Perşembe 26 Ocak 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. Arayüz
  3. Web Developer’ların Kaçınması Gereken CSS Alışkanlıkları
 Web Developer’ların Kaçınması Gereken CSS Alışkanlıkları
Arayüz CSS Güncel

Web Developer’ların Kaçınması Gereken CSS Alışkanlıkları

Yazar : Sevim Selin Özsoy 28 Ocak 2022 0 Comment

İçindekiler

  • Margin Ve Padding Değerleri Verip Sonradan Bu Değerleri Sıfırlamak(?)

  • Pozisyonları “position: absolute” Ve “position: fixed” Olan Elementlere “display:block” Vermek

  • Block Elementler İçin “width:100%” Kullanmak

  • Sonuç Olarak

Bazı insanlar CSS’in tam bir kabus olduğunu ve öğrenmesinin çok zor olduğunu söylüyorlar. Evet, bazen ufacık bir görseli sitede yerleştirmek için uzuncaaa zaman harcamış olabilirsiniz. Bu tamamen CSS yapısıyla alakalı. Silahınızı çıkarıp etrafınızdaki bütün düşmanları vurmayı aklınızdan geçirirken aslında, sadece kendi topuğunuza ateş etmenizi sağlayabilecek bazı ufak tefek özellikleri var.

Programlamayla alaklı her konuda olduğu gibi, işin püf noktasını biliyorsanız; önceden saatlerinizi alan bir işi, saniyesinde hiç uğraşmadan çözebilirsiniz. İşte CSS’inde kendine ait ufak tefek düğümlerini bu püf noktalarla rahatlıkla çözebilirsiniz. Bu yazımızda sizlerle bu püf noktaların, mantıksız taraflarını inceleyeceğiz!

Margin Ve Padding Değerleri Verip Sonradan Bu Değerleri Sıfırlamak(?)

İnternetteki kodların bir çoğunda, geliştiricilerin bütün içeriklerin hepsine margin ve padding değerleri verdikten sonra; ilk veya son elementin değerlerini şu şekilde sıfırladıklarını görebilirsiniz;

Bunun yerine daha basit bir şekilde CSS’in özelliklerinden olan nth-child/nth-of-type selectorları veya :not() pseduo sınıfı kullanılabilir.

Pozisyonları “position: absolute” Ve “position: fixed” Olan Elementlere “display:block” Vermek

Artık position: absolute ya da position: fixed pozisyonuna sahip olan elementlerin default olarak "display:block" özelliğine sahip olduğunu biliyor muydunuz?

Ayrıca, inline-* değerler de;

  • inline veya inline-block –> block
  • inline-flex –> flex
  • inline-grid –> grid
  • inline-table –> table

display değerlerini alacak şekilde değişti. Yani position: absolute ya da position: fixed yazdıktan sonra display değeri olarak block’tan farklı bir şey istiyorsanız kodunuza dahil etmelisiniz. Block değeri, default bir değer olduğundan dolayı yazalmasa bile elementin stiline eklenecektir.

CSS’i bu şekilde yazmak yerine:

Bu şekilde yazmalısınız!

Block Elementler İçin “width:100%” Kullanmak

Flexbox özelliğini sıklıkla tek sütüna aktarılan, çok sütünlu grid modelleri oluşturmak için kullanıyoruz. Oluşturulan çok sütünlu modelleri, tek sütüna aktarmak için geliştiriciler width:100% kullanıyor. Grid elementleri block elementler olduğundan ekstra özellikler olmadan aynı etkiyi yaratabilir.

Yani, width:100% kullanmak yerine medya sorgularını kullanarak flexbox’ı sadece çok sütünlü bir model oluşturmak için kullanabiliriz.

Bunu yapmak yerine:

Bunu yapmalısınız!

Sonuç Olarak

CSS ile ilgili yapılan bazı basit ve popüler hatalara sizlerle birlikte göz attık. CSS ile ilgili paylaşmak istediğiniz bilgileri bizimle yorumlar kısmından paylaşmayı unutmayın! Keyifli okumalar!

Etiketler: arayüz CSS web developer
Önceki Yazı
Sonraki Yazı

Sevim Selin Özsoy

editor

Süleyman Demirel Üniversitesi 4. sınıf bilgisayar mühendisliği öğrencisiyim. Front-end yazılımla ve tasarımla ilgileniyorum. Aktif olarak Süleyman Demirel Üniversitesinin bilgi işlemde part-time yazılımcı ve tasarımcı olarak çalışıyorum. Aynı zamanda da Webmaster Kitchen'da sosyal medya yöneticiliğini ve tasarımcılığını yapıyorum.

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.