React Bileşenlerini Stilleme Yöntemleri

React bileşenlerini stillemek için birçok farklı yol mevcuttur. Burada bunlardan bazı temel olanları inceleyeceğiz.

Uygulayabileceğimiz standart yaklaşım, normal web sayfası stillemede olduğu gibi, global CSS kullanmaktır. Burada stil kurallarıyla dışarıdan bağlanan ortak bir CSS dosyası oluştururuz. Bu yaklaşımda, tüm sınıf adları global kapsamda bulunur, bu da aralarında çakışmalara yol açabilir. Ayrıca birçok küçük CSS dosyası da oluşturulabilir. Bu yaklaşım, büyük ölçeklenebilir uygulamalar oluştururken pek verimli değildir.

Bir sonraki yaklaşım - satır içi (inline) stilleme, bunu kullanarak, normal HTML'de yapıldığı gibi CSS stillerini satır içi ekleyebiliriz. Bu durumda, style özniteliğiyle çalışacağız, ona gerekli CSS özelliklerini ileterek. Bu tür bir stil uygulaması kötü bir uygulama olarak kabul edilir ve yalnızca oluşturma sırasında dinamik olarak hesaplanan stilleri eklemek için önerilir. Bu yöntem, tek bir bileşenin arayüzünü hızlı bir şekilde prototiplemek için uygundur.

İnceleyeceğimiz sonraki birkaç yöntem ise modern, popülerlik kazanan, etkili stilleme yollarıdır. Bunlar, büyük ölçeklenebilir React uygulamalarını stillemek için kullanılması önerilen yöntemlerdir.

Bunlardan ilki, stil için şablon dizilerini kullanan Styled Components kütüphanesinin uygulanmasıdır. Bu yöntem, tüm işlevselliğini kullanarak JS kodunda normal CSS yazmamıza olanak tanır.

İkinci yöntem - CSS modüllerinin uygulanmasıdır. Bu durumda, bir CSS modülü, varsayılan olarak tüm sınıf adlarının ve animasyonların yerel kapsamda bulunduğu, yani yalnızca onu kullanan bileşen içinde erişilebilir olduğu bir CSS dosyasıdır.

Bu son iki yöntemde, sınıf adları arasındaki çakışmalardan korkmamıza gerek yoktur, çünkü benzersizdirler - yerel kapsam kavramı kullanılır. Ayrıca bunları kullanırken BEM metodolojisine olan ihtiyaç ortadan kalkar.

Sonraki derslerde, burada belirtilen tüm yöntemleri ayrıntılı olarak inceleyeceğiz.