CSS'i Yeniden Yaratmadan Bir Tasarım Sistemi Oluşturmak

Tasarım sistemleri genellikle bir tuzağa düşer.

Yardımcı sınıflar (utility classes) ekleyerek başlarsınız. Duyarlı (responsive) seçenekler eklersiniz. Düzen (layout) yardımcıları eklersiniz. Çok geçmeden yeni bir sözdizimi (syntax) oluşturmuş olursunuz. Sonuçta tam olarak CSS'in halihazırda yaptığı şeyi yapmış olursunuz.

CSS'in yerini almaya çalışmayı bırakın.

Bunun yerine, CSS'in üzerine bir katman inşa edin. Niyete (intent) odaklanın.

Geliştiriciler esneklik ister. Ancak esneklik karmaşıklığı beraberinde getirir. Birçok sistem her kırılma noktasını (breakpoint) ve düzen seçeneğini dışarıya açar. Bu, işaretleme dilinin (markup) okunmasını zorlaştırır. Kodunuz, düzenin ne yaptığından ziyade, düzenin nasıl oluşturulacağını tarif etmek için daha fazla zaman harcar.

Sistem, her şeyi tarif etmeye çalıştığı için anlaşılması zor hale gelir.

Odağınızı değiştirin. Bir düzenin nasıl oluşturulduğunu daha az, düzenin neyi başardığını daha çok düşünün.

Şu örneğe bakın:

Bu, CSS'in yerini almaz. Niyeti ifade eder.

  • İçerik bir ızgaraya (grid) uyum sağlar.
  • Mobilde, öğeler üst üste biner (stack).

Uygulama (implementation) sistemin içinde kalır. Bu, daha fazla soyutlama ile ilgili değildir. Daha iyi iletişimle ilgilidir.

İyi varsayılanlar (defaults), sonsuz yapılandırmadan (configuration) daha iyidir. Çoğu düzen ortak kalıpları takip eder. Çoğu geliştirici yeni düzen sistemleri icat etmek değil, içeriği organize etmek ister.

Bir tasarım sistemi düşünceli varsayılanlar sunmalıdır. Eğer her CSS yeteneğini dışarıya açmaya çalışırsanız, kaybedersiniz. CSS zaten güçlü ve standartlaştırılmıştır.

Bir tasarım sisteminin görevi şunlardır:

  • Bilişsel yükü azaltmak.
  • Tutarlılık sağlamak.
  • Niyeti iletmek.
  • Yaygın kalıpları kolaylaştırmak.

API'leri tasarlarken kendinize şu soruyu sorun: "Bunu altı ay sonra anlayabilir miyim?"

Şunları sormayın:

  • "Her şeyi yapılandırabilir miyim?"
  • "Her uç durumu (edge case) destekleyebilir miyim?"

Okunabilirlik ölçeklenebilir. Karmaşıklık ise ölçeklenemez.

Sadelik bir kısıtlama değildir. Amaç, gücü olması gereken yere yerleştirmektir. Yaygın iş akışları basit kalmalıdır. Gelişmiş iş akışları ise mümkün olmaya devam etmelidir.

En iyi tasarım sistemleri ortak bir dil oluşturur. Uygulama yerine niyete odaklanırlar. Geliştiricilerin amacı iletmelerine yardımcı olurlar.

Geliştiriciler düzen oluşturmak istemezler. Ürün oluşturmak isterler. Düzen, işin sadece bir parçasıdır.

Kaynak: https://dev.to/stinklewinks/building-a-design-system-without-recreating-css-1a41