En İyi Uygulamalarım – CSS

1. Önsöz

CSS günümüzde hak ettiğinden az kullanılıyor. Angular/React/Vue/... geliştiricileri ile UI tasarımcıları arasında bir uçurum var.

UI tasarımcısı otuz <div> iç içe geçirip üzerine kırk CSS sınıfı yığarken, Angular geliştiricisi her iki haftada bir en yeni kütüphaneye kapılıp gidiyor; oysa onun dependency hell’i, peer dependency’ler birbiriyle çakıştığı için çoktandır npm i --force olmadan derlenmiyor. CSS ve HTML, TypeScript fanatiğinin pek umurunda değil. En basit input’lar için bile Material kullanmak zorunda, çünkü aksi hâlde doğrulamayı beceremeyeceğinden korkuyor. Tekerleği yeniden icat ederek zaman kaybetmeyi ise hiç istemiyor. Kütüphanenin karşılamadığı ilk gereksinimde o kazandığı zamanı fazlasıyla geri kaybedeceğini ve kendini kütüphanenin GitHub issue’larını okurken bulacağını ise fark etmiyor.

Fullstack bir projede geliştirici olarak, frontend tasarımcısı olarak bilginizi konuşturma fırsatı nadiren bulursunuz. Ekran tasarımları Figma’da gelir ve birebir uygulanmaları gerekir. Bu türden frontend geliştiricilerinin çoğu, tek bir satır CSS ile bile responsive bir yerleşim elde edilebileceğinin farkında değil. CSS hiç olmadığı kadar güçlü. JS ile yapılan stil hack’lerinin, sayısız media query’nin ve IE 8 geçici çözümlerinin devri kapandı. Yaşasın!

2. Kusursuz ortalama

Mülakatlarda her zaman iyi karşılanmadı ama ben bayılıyordum: Frontend’de iyi olup olmadığım sorusunu severek “Ah, evet. Bir <div>’i dikey olarak ortalayabiliyorum.” diye yanıtlardım.

Bir div’i ortalamak bilindiği üzere zordur.

Artık değil:

.parent {
    display: grid;
    place-items: center
}

3. Responsive grid

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

4. Responsive flex

.parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    flex: 1 1 150px; /*  Stretching: */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
}

5. Sayfa yerleşimi

.parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

6. Kenar çubuğu

.parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

7. Kaynak

1-Line Layouts