-
reset
- Tailwind’in preflight stillerini başlangıçta
tailwind.css dosyasından yaklaşık 200 satır kopyalayarak kullandı
- Tailwind reset’ine uzun süredir alışık olduğu için, tüm öğelere
box-sizing: border-box uygulayan kural öğelerin genişliğinin padding’i de içermesini sağlıyor
* { box-sizing: border-box; }
html {line-height: 1.5;} gibi diğer reset kurallarına da bilinçsizce bağımlı olma ihtimali var; bu tür kurallar olmadan CSS yazmak ciddi bir alışma süreci gerektirebilir
-
components
- CSS’in büyük kısmını Vue veya React bileşenlerine benzer şekilde bileşen başına dosyalar halinde düzenliyor
- Her bileşenin kendine özgü bir sınıfı var ve bir bileşenin CSS’inin başka bir bileşenin CSS’ini ezmemesi hedefleniyor
- Gerçekte değiştirmek istediği CSS’in yaklaşık %80’i bileşen dosyalarının içinde bulunduğu için, 100 satırlık bir bileşeni düzenlerken yalnızca o 100 satırı düşünmek yeterli oluyor
- Örneğin
.zine bileşeni şu tür bir HTML yapısına sahip olabilir
<figure class="zine horizontal">
<img src="whatever.jpg">
</figure>
- CSS tarafında iç içe seçiciler kullanılarak
.horizontal, .vertical ve :hover gibi durumlar bileşenin içinde toplanıyor
.zine {
...
&.horizontal {
...
}
&.vertical {
...
}
&:hover {
...
}
}
- Web Components veya
@scope gibi yöntemlerle bileşenler arası etkileşimi programatik olarak engellemese de, kurallar koyup bunlara uymak bile büyük bir iyileşme hissi veriyor
-
colours
colours.css dosyasında gerektiğinde kullanılabilecek CSS değişkenlerini bir arada tutuyor- Renkler zor bir konu olduğu ve bu refaktörde renk kullanımını yeniden gözden geçirmek istemediği için mevcut yaklaşımı koruyor
- Tek kural, sitede kullanılan tüm renklerin bu dosyada listelenmesi
:root {
--pink: #fea0c2;
--pink-light: #F9B9B9;
--red: #f91a55;
--orange: rgb(222, 117, 31);
...
}
-
font sizes
- Tailwind’de
text-lg, xl, 2xl gibi boyut basamakları seçildiği için em, px ve rem arasında hangisinin kullanıldığını hatırlamak gerekmiyordu
- Bunu vanilla CSS’te de sürdürmek için Tailwind’den alınan boyut değişkenlerini tanımlıyor
--size-xs: 0.75rem;
--line-height-xs: 1rem;
--size-sm: 0.875rem;
--line-height-sm: 1.25rem;
- Font boyutları değişkenlerle belirleniyor; Tailwind’e göre biraz daha uzun yazılsa da şu an için tatmin edici bir yöntem
h3 {
font-size: var(--size-lg);
line-weight: var(--line-weight-lg);
}
-
utilities
- Birden fazla bileşende tekrarlanan buton gibi öğeleri utilities olarak sınıflandırıyor
- Yalnızca ekran okuyucu kullanıcılarına görünmesi gereken öğeler için kullanılan
.sr-only gibi bazı utility sınıfları Tailwind’den kopyalandı
- Bu alanı küçük tutmaya ve değişiklik yaparken dikkatli olmaya çalışıyor
-
base
- “base” stiller, sitenin tamamına doğrudan uygulanan stiller
- Site genelinde çok sayıda stili zorlayacak kadar kendinden emin olmadığı için bu alanı oldukça küçük tutuyor
- Şu anda iyi hissettiren kurallar yalnızca
<section> ve a için; <section> kuralı daha sonra değişebilir
/* put a 950px column in the middle of each <section> */
section {
--inner-width: 950px;
padding: 3rem max(1rem, (100% - var(--inner-width))/2);
}
a {
color: var(--orange);
}
- Base stilleri başlangıçta neredeyse boş bırakıp, ortak olarak istenen şeyler ortaya çıktıkça bunları bileşenlerden base katmanına taşımak şeklindeki aşağıdan yukarı yaklaşım en kolay yöntem gibi görünüyor
-
spacing
- Padding ve margin’in nasıl yönetileceği henüz tam olarak netleşmiş değil
- Tailwind kullanırken, istediği görünüm çıkana kadar padding ve margin’i oraya buraya doğaçlama ekliyordu; şimdi ise bundan daha ilkesel bir yöntem arıyor
- Şu anda mümkün olduğunca dış düzen bileşenlerinin aralıkları üstlenmesini sağlamaya çalışıyor
- Birden fazla alt öğe içeren
<section> yapılarında, çocuklar arasında eşit boşluk bırakmak için şu kural kullanılabilir
section > *+* {
margin-top: 1rem;
}
-
responsive design
- Tailwind’de
md:text-xl gibi, belirli bir boyutun üzerinde text-xl stilini uygulayan media query tabanlı sözdizimini sık kullanıyordu
- Şimdi ise çok fazla breakpoint kullanmadan çalışabilecek daha esnek CSS grid düzenleri oluşturmaya çalışıyor
auto-fit kullanıldığında, büyük ekranlarda 2 sütun ve küçük ekranlarda 1 sütun otomatik olarak kullanılabiliyor
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), max-content));
justify-content: center;
-
build system
- Geliştirme sırasında ayrı bir build sistemine ihtiyaç yok
- CSS’in yerleşik
@import deyimi sayesinde dosyalar bölünüp içe aktarılabiliyor
@import "reset.css";
@import "typography.css";
@import "colors.css";
- CSS’te iç içe seçiciler de yerleşik olarak bulunuyor
.page {
h2 { ...}
}
- Üretim için CSS dosyalarını birleştirmek istenirse
esbuild kullanılabilir
esbuild style.css --bundle --loader:.svg=dataurl --loader:.woff2=file --outfile=/tmp/out.css
- Genelde CSS ve JS build sistemleri kullanmaktan kaçınıyor, ancak
esbuild web standartları temelli olduğu ve statik bir Go ikilisi sunduğu için kabul edilebilir buluyor
esbuild hakkında 2021’de esbuild ve Vue üzerine bir yazı da yazmıştı
1 yorum
Lobste.rs görüşleri
Kişisel projelerde artık neredeyse hiç CSS/JavaScript framework kullanmıyorum
Bağımlılık olmayınca tedarik zinciri güvenlik açıkları da ortaya çıkamaz. Elbette açıkların tek türü bu değil ama yine de yardımcı oluyor
Bunun nedeni framework yorgunluğu,
npm audityükü ve LLM'ler sayesinde bir şeyi nasıl uyguladığıma dair başkalarının ne düşündüğünü daha az umursamamam. Mesela “Neden React ve Tailwind kullanmıyorsun?” gibi sorularBu, sadece CSS'in çalışma biçimi
Bunu bilmeden Tailwind'i körü körüne kullananları görünce dışarı çıkıp bulutlara bağırmak istiyorum. Bana göre Tailwind'in %90'ı sadece sözdizimi farklı olan inline style ve hatta
<FONT>etiketinden bir tık daha iyi denebilirBu blog yazısı benim gerçekten öğrenmem gereken şeyleri anlatıyordu
Tailwind, inline style'dan oldukça farklı çalışır ve aslında CSS'e çok daha yakındır. Yazıda da belirtildiği gibi, Tailwind'i iyi kullanmayı sağlayan iyi alışkanlıkların önemli bir kısmı etkili CSS yazmak için de gerekli alışkanlıklardır. Tailwind, her öğeye örtük bir scope'u olan CSS bloğu ekleyip bunu kendine özgü bir DSL ile yapmak fikrine daha yakındır
CSS'in çalışma biçimini iyi biliyorum ama saf CSS gözümü korkutuyor ve grafik tasarım konusunda da zayıf olduğum için hâlâ Tailwind kullanıyorum. Bu yazı, Tailwind'i temel alarak CSS'i yapılandırmaya dair fikirler veriyor
Son dönemdeki akımları çok yakından takip etmeyen biri olarak, bu yazı modern CSS pratiklerini oldukça iyi gösteriyor gibi geldi
İlham aldığı yazılara giden çok sayıda bağlantı içermesini de beğendim. Okumalık olarak iyi görünüyor; şimdilik sadece "no outer margin" yazısını okudum
Yalnız temel stilleri “aşağıdan yukarı” kurma yaklaşımına biraz şüpheyle bakıyorum. Onun yerine ne yapardım bilmiyorum ve denemeye değer görünüyor ama temel stiller doğası gereği epey zorlu
Bu yazıyı gerçekten çok beğendim
Ben de küçük siteler yapıp dururken CSS'i yavaş yavaş öğrendim; baştan beri böyle sistematik bir düşünme biçimine daha çok sahip olsaydım faydalı olurdu. Framework'lere karşı epey bir direnç hissediyorum ama kullanmayınca da istediğimi yapabiliyor olsam bile sık sık yapısız bir boşlukta asılı kalmış gibi hissediyorum
“Tailwind kötü, o yüzden sadece CSS kullan” demek yerine, “Tailwind harika ama artık gerekli olmayabilir” çizgisinde olması hoşuma gitti
CSS'i elle yapılandırmakta hep zorlandım ama bu yazı sayesinde konuya çok daha farklı bakmaya başladım
CSS'i düzenlerken şu yapılandırma tekniği oldukça işime yaradı: https://rstacruz.github.io/rscss/
Genel olarak orijinal yazıda jvns'in anlattıklarıyla iyi örtüşüyor ve bunun üstüne biraz daha yapı ve düzen ekliyor