Sınıf türleri
Yardımcı sınıf (utility class)
Proje genelinde öğelere uygulanabilen belirli bir CSS özellik kombinasyonuyla oluşturulan bir sınıf.
Tüm yardımcı sınıflar doğası gereği global sınıflardır. Yardımcı sınıf kavramı, projenin içinde genel CSS özelliklerini uygulamaya yardımcı olan bir sınıftır.
Örneğin, Client-First başlangıç projesinde background-color-gray yardımcı sınıfını ekledik, bu sayede projenin genelinde yaygın olarak kullanılan arka plan renklerini düzenlememize ve yönetmemize yardımcı oldu.
Client-First başlangıç projesine font-size-large yardımcı sınıfını ekledik, bu sayede projenin genelinde birleşik bir tipografi boyutlandırmasını düzenlememize ve yönetmemize yardımcı oldu.
Yardımcı sınıflar (utility classes), sınıf isimlerinde alt çizgi (_) kullanmaz.
Özel sınıf (custom class)
Bir özel sınıf, belirli bir bileşen, sayfa, öğe grubu veya tek bir öğe için oluşturulan bir sınıftır.
Bunu "özel" bir sınıf olarak adlandırıyoruz çünkü projemizin yardımcı sınıfları dışında özelleştirilmiştir. Yardımcı sınıfların bir öğede kullanılamayacağı veya kullanılmaması gerektiği durumlarda özel sınıflar oluşturulmalıdır. Bu sınıf, o öğeye özgü olarak özelleştirilir.
Örneğin, projenin genel başlıklarında belirli bir öğeyi stilize etmek için header_background-layer adında bir sınıf oluşturulabilir.
Örneğin, testimonial slide'ın içindeki belirli bir öğeyi stilize etmek için testimonial-slider_headshot adında bir sınıf oluşturulabilir.
Client-First yaklaşımında, özel sınıfların sınıf adında alt çizgi (_) kullanılır.
Global sınıf (global class)
Bir sınıfın bir sınıflandırmasıdır. Global sınıf, projenin tümünde kullanılması amaçlanan bir sınıftır. Hem yardımcı sınıflar hem de özel sınıflar global sınıflar olabilir.
Bir global sınıf, projenin genelinde birleşik olarak kalacak şekilde uygulanan stilleri temsil eder. Global bir sınıf, belirli bir örnek için değildir.
"Global", projenin her yerinde ve herhangi bir yerinde anlamına gelir.
Tüm yardımcı sınıflar global sınıflardır. Yardımcı sınıflar doğası gereği globaldir.
Örneğin, kenar boşlukları ve dolgu sınıflarımız global yardımcı sınıflardır. margin-large, 3rem değerinde bir kenar boşluğuna sahiptir. Bu değeri 4rem olarak güncellediğimizde, margin-large kullanan her örnek 4rem olarak güncellenecektir.
margin-large, projenin her yerinde kenar boşluğu ve dolgu değerini değiştiren bir global denetleyicidir. Global yardımcı sınıfları doğru kullanarak projemize etkili, global değişiklikler yapabiliriz.
Global sınıflar yardımcı sınırlarla sınırlı değildir. Global sınıflar, stillerin tam-site global yönetimine sahip olmayı amaçlayan her türlü sınıfı ifade eder.
Client-First v2'de, özel sınıfları global sınıflar olarak daha iyi açıklıyor ve teşvik ediyoruz.
Örneğin, faq_item bir global özel sınıf olabilir. Web sitesinin çeşitli bölümlerinde birçok SSS bölümümüz var ve faq_item, projenin genelinde SSS öğelerini yönetmek için kullanılır.
Örneğin, header_content global bir özel sınıf olabilir. Projedeki her sayfada bir başlık bileşeni bulunmaktadır. Bu sınıf, başlık içeriğinin genel olarak projenin tamamında yapılandırılmasını yönetir.
Combo sınıf
Bir combo sınıfı, bir temel sınıfa (Base Class) bağlı olarak oluşturulan bir varyanttır. Combo sınıfı, temel sınıftan stil özelliklerini devralır ve üzerine ekstra stiller ekler.
"Base class"ı, bir combo sınıfında birbirine eklenmiş combo sınıfların listesindeki ilk sınıf olarak tanımlarız. Base class üzerine başka bir sınıf ekleyerek benzersiz bir varyasyon oluştururuz.
Benzersiz varyasyonu sağlayan eklenen sınıf, is- önekini kullanır.
Yığılmış combo sınıfı, yalnızca ondan önce gelen temel sınıf(lar) ile birleştirildiğinde çalışır. Aşağıdaki videoda, is-blue sınıfının tek başına çalışmadığını anlayın. Yalnızca temel button sınıfına ek olarak çalışır.
Combo sınıfları, özel veya yardımcı bir temel sınıftan oluşturulabilir. Yukarıdaki örnekteki button is-blue, bir yardımcı sınıfı combo sınıf olarak göstermektedir.
Ayrıca özel bir sınıf için de bir combo sınıfı oluşturabiliriz. Örneğin, header_content is-home. Bu, header_content özel sınıfının bir varyasyonudur.
-is öneki (prefix)
Client-First'te bir combo sınıfını is- ön ekiyle tanımlarız. is- ön eki gördüğümüzde, bu sınıfın bir temel sınıfın üzerine oluşturulan bir combo sınıfı olduğunu anlarız.
Sınıfları birbirine eklememeye dikkat edin.
Client-First'un evrensel bir kuralı vardır - Deep stack yapmaktan kaçının.
Deep stack — bir elementin üzerine birçok sınıfın "eklendiği" durumu ifade eder.
Deep stacking — bir elementin üzerine birçok sınıfın eklenme eylemini ifade eder.
Bu terim, Webflow Designer'da yığılmış sınıflarla karşılaştığımız sorunları ele almak için Client-First tarafından oluşturulmuş bir terimdir.
Client-First, Webflow'da derin ekleme stratejisini önermemektedir.
Örnek olarak:
Client-First'te, bu gibi derin eklenmiş (deep stacking) sınıflardan kaçınmayı tercih ederiz. Derin eklemeden kaçınma konusunu dokümantasyonun ilerleyen bölümlerinde okuyabilirsiniz.
İşte derin eklemeden kaçınma konusunda bazı nedenlerin kısa bir listesi:
Derin eklemeyi tercih etmememizin nedenleri şunlardır
Designer panelinde stilleri yeniden sıralama yeteneği olmaması.
Webflow'da sıralanmış sınıflar üzerinde tam kontrolümüz yoktur. Bunları yeniden sıralayamaz veya Tasarımcı içinde düzgün bir şekilde yönetemeziz. Eğer sıralı listedeki sınıflarda değişiklik yapmak veya kaldırmak istiyorsak, önceki sınıflara erişmek için listedeki tüm sınıfları kaldırmak zorundayız.
Aşağıdaki örnekte, metin ağırlığını text-weight-medium'dan text-weight-bold'a değiştirmek istediğimizde, bazı sınıfları kaldırmamız gerektiğini görebilirsiniz:
Bu sorun, temel kırılma noktalarının dışında kırılma noktalarında düzenleme yaparken daha da artar. Temel kırılma noktalarının dışında kırılma noktalarını düzenlerken daha az düzenleme kontrolüne sahibiz.
Daha yavaş bir iş akışı. Küçük değişiklikler için çok sayıda adım gerektirir.
Yukarıda bahsedilen iş akışı zaman alıcıdır. Eğer bu sürekli olarak iş akışımızın bir parçası olursa, projelerimizi oluşturma ve bakım sürelerini uzatabilir.
Artan öğrenme eğrisi.
Derin sınıf eklemede, öğrenme eğrisinin daha dik olmasına neden olabilir. Sınıfların ne yaptığını ve nasıl yönetileceğini daha iyi anlama ihtiyacı var
Webflow'da CSS yazmak hızlıdır.
Webflow Styles paneli aracılığıyla CSS yazmak hızlı ve verimlidir. Yeni bir sınıf oluşturabilir ve görsel olarak CSS özelliklerini sınıfa ekleyebiliriz. Bu süreç Webflow'da çok hızlıdır ve Client-First'te bunun avantajından yararlanırız.
CSS boyut tasarrufu çok önemli değildir.
Bir projede global sınıflar kullandığımızda, CSS dosyamızın boyutunu azaltabiliriz. Ancak bu küçük CSS tasarruflarının, Webflow içinde özel sınıf oluşturma avantajlarını dengeleyemeyeceğine inanıyoruz.
Derin yığma hakkında daha fazla bilgi edinmek için: Bu konuların tam açıklaması Sınıflar Stratejisi 2 bölümünde bulabilirsiniz.
Özel sınıfları kullanın.
Özel sınıflar, Client-First içinde güçlü ve önerilen bir yöntemdir.
Aşağıdaki belirtilen amaçlar için özel sınıflar kullanırız:
- Belirli öğeler için kolay düzenlemeler. Düzenli bir özel sınıf sistemi kullanırsak, projemizdeki belirli öğeler ve bileşenler için hızlı ve benzersiz değişiklikler yapabiliriz.
- Projemizde her yerde yardımcı sınıfları kullanmaktan kaçınmak. Yardımcı sınıf sistemleri güçlü olsa da, tüm projeyi oluşturmak için kullanılması önerilmez. Bir yardımcı sınıf kullanmak, Webflow geliştiricileri olarak işimizi daha karmaşık hale getiriyorsa, özel bir sınıf oluşturmayı teşvik ediyoruz. Yardımcı bir sınıf kullanmanın açık bir faydası vardır
- Derin yığılmaktan kaçınmak için. Derin yığılma, özel bir sınıf ile değiştirilebilir.
Arka plan dokusu örneği
Örneğin, bir bileşenin arka plan dokusunu stilize etmek istiyoruz.
Arka plan dokusunu üç birleşik sınıfla stilize edebiliriz. Örneğin, background-absolute + fit-size + opacity-low. Bu üç sınıfın birleşimi bize ihtiyaç duyduğumuz stil kombinasyonunu verir.
Bu arka plan dokusu için birden fazla sınıfı yığmak yerine, services-item_background-texture adında bir özel sınıf oluşturabiliriz. Bu sınıf, "bir hizmet öğesinin arka planındaki bir dokuya" ait olduğunu açıkça belirtir.
Artık bu özel sınıfa hızlı ve daha özgürce düzenlemeler yapabiliriz, yığılmış sınıfları yeniden düzenlemek zorunda kalmadan. Eğer benzersiz bir stilizasyona ihtiyacımız varsa, bu özel sınıfımız bu benzersiz stilizasyonu kabul etmeye hazırdır.
Geleneksel CSS geliştirme
Geleneksel CSS geliştirme yaklaşımında, yığılmış sınıflar (stacked classes) daha iyi bir çözüm olabilir. Yığılmış sınıfların elle yazılması gereken CSS miktarını azaltması, daha hızlı geliştirme sürecine yol açabilir.
Ancak, bu geleneksel CSS geliştirme değil. Bu Webflow. Client-First, özellikle Webflow için oluşturulmuş prensiplerin bir koleksiyonudur.
Webflow'ta, bir öğe üzerindeki stilleri oluşturmak ve yönetmek için özel bir sınıf kullanmanın, derinlemesine yığılmış bir sınıf listesini yönetmekten daha az zaman ve çaba gerektirdiğine inanıyoruz.
Sınıflar stratejisi 2 içinde özel sınıf oluşturma hakkında tam bir açıklama bulunmaktadır.
İsimlendirme kuralları
Sınıflar için açık ve belirgin isimler oluşturun.
Bir Webflow geliştiricisi, müşteri veya herhangi biri, sınıf adına bakarak sınıfın ne yaptığını anlamalıdır, hatta Client-First hakkında hiçbir bilgisi olmasa bile.
İsimlendirme Zihniyeti
Client-First İsimlendirme Kurallarının Amaçları
- Web sitemizi yönetmek için teknik olmayan bir kişiyi güçlendirin.
- Sınıf adlarında net, bilgilendirici ve açıklayıcı olun.
- Okuyucuya o sınıfın amacı hakkında mümkün olduğunca çok bağlam sağlayın.
- Bir sınıf adını okuyunca, onun amacını bilmek mümkün olsun.
- Kısaltmalar, kısa yazımlar veya karışıklık oluşturacak şeyler kullanmayın.
- Sınıfın web sitesiyle olan ilişkisi hakkında mümkün olduğunca çok bağlam sağlayın.
- Sınıf adlarını organizasyon tekniklerine dayanarak oluşturun.
- Styles panelindeki mevcut sınıfları aramak için anahtar kelimeleri kullanın.
- Bir sınıfın amacını adıyla görselleştirin.
Sınıfları isimlendirirken kendimize sorduğumuz sorular şunlar olabilir:
Sınıf adları ne yaptıklarını ifade etmelidir. Bir sınıf için bir isim oluştururken, şu soruları düşünebiliriz:
- "Bu sınıfın amacı veya işlevi nedir?"
- "Bu sınıf hangi elementlere veya bileşenlere uygulanacak?"
- "Sınıf adı yaptığı veya temsil ettiği şeyi doğru bir şekilde açıklıyor mu?"
Bir sınıfın adı bu soruları yanıtlamalıdır.
Bir Webflow geliştiricisi, müşteri veya pazarlamacı, Client-First hakkında hiçbir bilgisi olmasa bile, bir sınıf adına bakarak sınıfın ne yaptığını anlayabilmelidir.
Anlamlı isimler ve anahtar kelimeler
Güçlü bir anahtar kelime, bu sınıf/öğenin ne yaptığı konusunda bize bir bağlam sağlar. İsimlendirmede mümkün olduğunca açıklayıcı olmak bize düzenli kalmamızı sağlar.
Anahtar kelimeler ve açık isimlendirme, Client-First'in derin temel kavramlarıdır. Her sınıf adı anlamlı bir amaç hizmet etmelidir. Projeye dahil olan bir sonraki kişiye sınıfın amacı hakkında mümkün olduğunca fazla bağlam sağlamalıyız.
Anahtar kelimeler, sınıf adı içinde genelden özele doğru ilerler.
Örneğin, text-size-large'ı ele alalım.
Bu sınıf adındaki en genel anahtar kelime text'tir. Bu kelime bize bu sınıfın bir metin öğesiyle ilgili olduğunu söyler.
size, metnin boyutunu özelleştirmekle ilgilendiğimizi belirtir. "size" kelimesi, metnin bir CSS özelliği olan font-size ile ilgili daha belirli bir bilgi verir.
Son olarak, large, metin boyutunun değeri hakkında daha spesifik bilgi verir. Büyük bir metin boyutu.
Dikkat edin, bu sınıfa large-size-text adını vermiyoruz. Bu, text-size-large kadar anlaşılır olabilir, ancak Client-First'te genelden özele bir sınıf adlandırma kuralına uymak önemli faydalar sağlar. Daha akıllı sınıf arama imkanı ve düzenli Klasörler organizasyonu sağlarız. Bu konuda daha fazla bilgiyi belgelerde öğreneceğiz.
Hadi özel bir sınıf olan team-list_headshot-wrapper örneğine bakalım.
Klasör adı team-list_ olduğuna göre, bu öğenin takım sayfasıyla veya bir takım bölümüyle ilgisi olduğunu ve bir liste olduğunu anlıyoruz. "Takım listesi" öğelerini içeren grubun adıdır.
headshot, daha spesifik olarak, bunun takım listesi içindeki headshot öğesiyle ilgili olduğunu söylüyor.
wrapper, daha da spesifik olarak, bu öğenin headshot'u saran bir kapsayıcı olduğunu belirtiyor.
team-list_headshot-wrapper class adı, kullanıcılar için CSS'nin arkasındaki detayları anlamasalar bile, anlaşılır ve mantıklıdır. Kullanıcılar, bu sınıfı düzenlemekle takım listesindeki profil resimlerine [bir şeylerin] uygulanacağını anlayabilirler. Bu açıklayıcı adlandırma yöntemi, projeye sonraki kişinin neyi hedeflediğini anlamasına yardımcı olur.
Şimdi, headshot wrapper içine daha fazla öğe eklediğimizi hayal edelim. Genel-özelleştirilmiş bir adlandırma yöntemiyle çok düzenli kalabiliriz.
team-list_headshot-wrapper
team-list_headshot-image
team-list_headshot-texture-layer
team-list_headshot-background
Takım listesi için sınıflarımızın listesi projemiz içinde çok düzenli ve mantıklıdır. Bu adlandırma kuralı, Klasörler özelliğimize de çok iyi entegre olur.