Future of Web Design 2014 - Part 1

Geçtiğimiz hafta Future of Web Design konferansı için Londra'daydım. Önceden haberleşmemiş olmamıza rağmen, Hasan Yalçın'ın da katılmasıyla, güzel ve verimli bir üç gün geçirdik. İlk gün workshoplar için ayrılmıştı. 4 farklı workshoptan oluşan listede, benim katıldığım @csswizardry'den Harry Roberts'ın verdiği CSS ARCHITECTURE FOR BIG FRONT-ENDS isimli workshoptu. İlk gün olmasa da, konferansın ikinci ve üçüncü gününde Hasan Yalçın ile beraber bol bol tweet atıp, konuşmalardan gözümüze çarpan kısımları ve yorumlarımızı paylaştık. Diğer katılımcıların yorumlarına da #fowd ve #fowd2014 hashtaglerin göz atabilirsiniz.

Katıldığım workshopun içeriğinden bahsedecek olursak, Harry daha çok büyük boyutlu siteler/sistemler üzerinde çalışırken CSS içerisinde nelere dikkat edilmeli, kodlamayı nasıl yapmalı, hangi sistemlerden faydalanmalı gibi konulara değindi.

Katılımcılar Fotoğraf: @simonbusborg
Yaklaşık 80 kadar katılımcının olduğu workshop genel olarak keyifli ve özellikle framework yapılarına ve büyük sistemlerde yeni çalışmaya başlayacaklar için faydalı bilgiler içeriyordu.

N kişi N farklı Kod

Workshopun başında yaptığımız örnek bir menü kodlamasıyla gördük ki, aynı menüyü workshopa katılan hemen herkes farklı şekilde hazırlamış. Kimisi OOCSS metodolojisi ile isimlendirmeleri yapmış, kimisi sadece ihtiyaç kadar, bir başbaşkası farklı yerlerdeki interitance olabilir diye düşünüp ona göre isimlendirmiş. Şunu da gördük ki, CSS ve HTML ile tek bir doğru yok. Hemen hemen yapılan bütün örnekler tanıma uygun ve doğruydu.

Harry daha önce benzerini yaptığı bu workshop bir firmaya özel versiyonunda, yıllardır beraber kod yazan insanların bile bu basit menü için farklı kodlar yazdığını da not olarak düştü. Hergün beraber yemek yediğin, beraber oturduğun, beraber güldüğün, çalıştığın bir yazılımcı ile bile farklı şekilde kod yazabiliyor olmak ilginç ama insan doğasına da uygun bir sonuç olarak geldi bana.

Single Responsibility Principle ve Specifity

Belki de workshop sırasında en çok bahsi geçen ve üzerinde durulması gereken konu, CSS seçicilerinin kullanılması ve bunlara yapılacak tanımların niteliği üzerineydi. Özellikle CSS'in yetersiz bir dil olduğuna değinen Harry, seçicilerin her zaman "low specifity" (düşük spesifiklik) ile tanımlanması böylece overwrite ve daha spesifik olan (nokta atışıcı şeklinde) ID ve ID+Tag seçicilerini kullanmak zorunda kalmayacağımızı belirtti. Framework hazırlanırken ya da çok sayfalı sistemlerde çalışırken, elemanlara özel CSS seçicisi yazmak hem kodun tekrar kullanılabilirliğini azaltacak, hem de bakımı zorlaştıracaktır.

Seçiciler içindeki nitelik tanımlarına bakacak olursak; her seçicinin ya da sayfa içerisine yerleştireceğimiz her objenin nitelik tanımları tek bir işe odaklanacak şekilde olmalı. Bir obje için birden fazla kullanıma göre düzenleme yapılmamalıdır. Örneği, large-button şeklinde tanımladığınız bir buton tanımı, sadece butonu daha büyük göstermek için kullanılmalı. Hem büyük hem de mavi renkli şeklinle tanımlanmış olmamalı.

CSS Önişlemciler ve tabiki SASS

Arayüz geliştirme ve CSS'den bahsedilen bir ortamda CSS önişlemcilerden ve SASS'tan bahsedilmemesi olmazdı. Artık günlük arayüz geliştirme hayatımıza o kadar çok girdiler ki, bazen SASS ya da LESS yokken nasıl CSS kodu yazıyorduk diye düşünmeden edemiyorum. Büyük, küçük demeden hemen hemen bütün sitelerde kullanılabiliyorlar ve fonksiyonlar, mixinler, değişkenler gibi uzun zamandır acaba CSS'e eklenir mi diye düşündüğümüz imkanları sağlıyorlar. Siz hala SASS, LESS ya da Stylus gibi bir önişlemci kullanmıyorsanız, daha fazla vakit kaybetmeyin ve beğendiğiniz bir tanesini hemen kullanmaya başlayın.

Tanım Hiyerarşisi

Inuitcss ve örnek olarak hazırlanmış olan bir başlangıç klasör yapısı ile CSS mimarisinin kurgusu üzerinde konuştuğumuz kısımlarda, Harry bir ters piramit çizdi. "low specifity" prensibine göre baktığımızda, piramitte aşağıya doğru indikçe, ögelere özel daha spesifik tanımlar yapılıp, yukarı doğru çıktıkça daha genel ve sistemsel tanımlar olacaktır.

Specifity Order Piramitin kırmızı çizgiye kadar olan kısmı, bir önişlemci kullanıyorsanız stil dosyanıza ilk ekleyeceğiniz ayarlar ve gerekli fonksiyonların olduğu araçlar dosyalarını içeriyor. Eğer standart CSS yazıyorsanız, dosya ve kod sıralamanızı kırmızı çizgiden itibaren yapabilirsiniz.

Sıralamadaki elemanlarda ise, Generic kısmı için, herhangibir ögeye özelleşmemiş, genel kullanım için olan sistemsel tanımları ekleyebiliriz. Bunlar normalize, reset, clearfix gibi tasarımdan ve layouttan bağımsız sistem ayarlarını içersen kodlar olabilir.

Base için, ortak kullanım için ihtiyaç duyulan, elemanların temel tanımlarını düşünebilirsiniz. Örnek vermek gerekirse linklerin normal ve fare geldiğindeki durumları, ul, ol listelerinin görünümleri ya da blockquote, form elemanları gibi tanımlar olabilir.

Temel tanımlardan sonra Objects şekline yapacağımız tanımlar ise, tekrar tekrar kullanabileceğimiz benzer objelere/kutulara vs. olacaktır. media şeklinde belirlenmiş herhangibir medya (resim, video vs.) içerin bir kutunun içindeki ögelerin standart halde tanımlanması, sayfaların farklı kısımlarında kullanılırken özelleşme imkanı sağlayacak ortak kodları içerecektir.

Daha özelleşmiş tanımların olabileceği Components bölümünde, Objects alanında tanımladığımız media objesinin album formatında görünümü diyebilirsiniz.

Son basamak olan Trumps kısmında ise çok özel ve belirli bir kullanım için olacak ögelerin tanımlarını eklenebilir. hata mesajı görünümü, is_hide gibi bir ögeye uygulandığında anlam ifade edecek kodları barındıracaktır.

Ne Kazandırdı?

Bazı bilgilerimi tazelememi, bazı yeni şeyler öğrenmemi sağlayan güzel bir workshoptu. Gelen bütün katılımcılardan edindiğim fikir, hemen herkes artık büyük sistemler/siteler ya da karmaşık backend frameworkleri ile uğraşıyor. İşleri kolaylaştırmak, hataları azaltmak için de, sayfalara özel CSS yazmak yerine sistemlere ve ögelere özel CSS yazmak, kodların tekrar kullanılabilirliğini arttırıyor. Ayrıca kod bakımı da oldukça kolaylaşmış oluyor.

Özetle:

  • CSS alt yapınızı belirli bir sistematiğe göre ve arayüzden bağımsız olacak şeklinde standartlaştırın
  • Kod tekrarlarından kaçının
    • SASS/LESS/Stylus gibi bir önişlemci ile tekrarları yerine mixin/extend özelliklerini kullanın
    • Single Responsibility Prensibi ile de overwriteları azaltın