Nesneye Dayalı CSS (OOCSS) Temelleri
Ön uç geliştirme, her yıl eklenen birçok yeni teknikle hızlı bir şekilde ilerliyor. Geliştiricilerin her şeye ayak uydurması bir mücadele olabilir. Sass ve PostCSS arasında geliştirme araçları denizinde kaybolmak kolaydır.
Daha yeni bir teknik ise kısa süreli OOCSS olarak da adlandırılan Nesne Yönelimli CSS'dir. Bu bir araç değil, hedefleyen bir CSS yazma metodolojisi. CSS'yi modüler ve nesne tabanlı yapmak.
Bu yazıda, tanıtmak istiyorum OOCSS'in temel temelleri, ve web fikirlerini ön plana çıkarmak için bu fikirler nasıl uygulanabilir?. Bu teknik her geliştiriciyi yakalayamayabilir, ancak iş akışınızın bundan faydalanıp faydalanmayacağına karar vermek için yeni kavramları anlamaya değer.
CSS'yi Nesne Yönelimli Yapan Nedir??
Nesneye yönelik programlama (OOP) odaklanan bir programlama paradigmasıdır. yeniden kullanılabilir nesneler oluşturma ve ilişkiler kurmak aralarında, kodu prosedürlere göre düzenleyen prosedürel programlamanın aksine (rutinler, alt rutinler veya işlevler).
OOP her ikisinde de yaygın olarak kullanılmaktadır. JavaScript ve arka uç dilleri Son birkaç yılda, ancak CSS'yi ilkelerine göre düzenlemek hala yeni bir kavramdır..
“nesne” OOCSS’de bir HTML elemanı veya onunla ilişkili herhangi bir şey (CSS sınıfları veya JavaScript yöntemleri gibi). Örneğin, farklı amaçlarla (bültene kaydolma, reklam blokları, son yayınlar vb.) Çoğaltılabilen bir kenar çubuğu widget nesnesine sahip olabilirsiniz. CSS olabilir bu nesneleri toplu olarak hedefle hangi ölçekleme bir esinti yapar.
OOCSS'nin GitHub girişini özetleyen bir CSS nesnesi dört şeyden oluşabilir:
- DOM’in HTML düğümü
- Bu düğümlerin stili hakkında CSS bildirimleri
- Arka plan görüntüleri gibi bileşenler
- JavaScript davranışları, dinleyicileri veya bir nesneyle ilişkili yöntemler
Genel olarak, CSS, dikkate alındığında nesne yönelimlidir. tekrar kullanılabilir sınıflar ve Birden çok sayfa öğesine hedeflenebilir.
Birçok geliştirici, OOCSS'nin başkalarıyla paylaşmanın daha kolay olduğunu ve aylarca (veya yıllarca) etkin olmayan gelişmeden sonra toplanmasının daha kolay olacağını söylüyor. Bu, CSS'deki nesneleri kategorilere ayırmak için daha katı kuralları olan SMACSS gibi diğer modüler yöntemlerle karşılaştırır..
Daha fazla bilgi edinmek istiyorsanız, OOCSS SSS sayfasında bir sürü bilgi vardır. Ve yaratıcısı Nicole Sullivan sık sık OOCSS ve modern web geliştirme ile nasıl bağdaştığı hakkında konuşuyor.
Stilden Ayrı Yapı
OOCSS'nin büyük bir kısmı, sayfa yapısını (genişlik, yükseklik, kenar boşlukları, dolgu) görünümden (yazı tipleri, renkler, animasyonlar) ayıran kod yazıyor. Bu izin verir özel kaplama çoklu sayfa elemanlarına uygulanacak yapıyı etkilemeden.
Bu, olabilecek bileşenleri tasarlamak için de kullanışlıdır. düzen etrafında taşındı kolaylıkla. Örneğin, bir “yakın zamanda Gönderilenler” Kenar çubuğundaki widget, benzer stilleri korurken altbilgiye veya içeriğin üzerine hareket edebilmelidir.
İşte size bir OOCSS örneği: “yakın zamanda Gönderilenler” Bu durumda bizim CSS nesnemiz olan widget:
/ * Yapı * / .side-widget genişlik:% 100; dolgu maddesi: 10px 5px; / * Skinning * / .recent-posts font-family: Helvetica, Arial, sans-serif; renk: # 2b2b2b; yazı tipi boyutu: 1.45em;
Dikkat edin düzen ile yönetilir .yan eklendi çoklu kenar çubuğu elemanlarına da uygulanabilecek sınıf, görünüm ile yönetilir .yakın zamanda Gönderilenler diğer gereçleri ciltlemek için de kullanılabilecek bir sınıf. Örneğin, eğer .yakın zamanda Gönderilenler Widget altbilgiye taşındı, aynı konumlandırmaya sahip olmayabilir, ancak aynı görünüme sahip olabilirdi..
Ayrıca bu kenar çubuğu örneğine CodePen'den bakın. Kayan nokta ve metin hizalaması için farklı bir sınıf ayrımı kullanır, böylece çoğaltma, ekstra CSS kodu gerektirmez.
İçerikten Ayrı Bir Konteyner
İçeriği konteyner elemanından ayırma OOCSS’nin bir diğer önemli prensibi.
Daha basit bir ifadeyle, bu yalnızca mümkün olduğunda çocuk seçiciyi kullanmaktan kaçınmanız gerektiği anlamına gelir. Bağlantı bağlantıları, başlıklar, blok alıntılar veya sıralanmamış listeler gibi benzersiz sayfa öğelerini özelleştirirken, onlara alt seçiciden ziyade benzersiz sınıflar vermelisiniz..
İşte basit bir örnek:
/ * OOCSS * / .sidebar / * sidebar içerikleri * / h2.sidebar-title / * özel h2 element stilleri * / / * OOCSS dışı * / .sidebar / * aynı sidebar içeriği * / .sidebar h2 / * gerekenden daha fazla özgünlük ekliyor * /
İkinci kod biçimini kullanmak korkunç olmasa da, temiz OOCSS yazmak istiyorsanız, ilk biçimi izlemeniz şiddetle tavsiye edilir..
Geliştirme Kuralları
Geliştiricilerin OOCSS'nin amacını sürekli olarak tartıştıkları için kesin spesifikasyonları belirlemek zor. Ama işte OOCSS kodunu daha temiz yazmanıza yardımcı olabilecek bazı öneriler:
- Birlikte çalışmak kimlikler yerine sınıflar stil için.
- Dene Çok seviyeli soy sınıfından özgüllüğü kaçınmak gerekmedikçe.
- Tanımlamak tekrarlanabilir sınıflara sahip benzersiz tarzlar (örn. yüzer, temizle, benzersiz yazı tipi yığınları).
- Öğeleri genişlet hedeflenen sınıflarla ebeveyn sınıfları yerine.
- Stil sayfanızı düzenleyin bölümlere, bir içindekiler tablosu eklemeyi düşünün.
Geliştiricilerin hala JavaScript hedeflemesi için kimlikleri kullanmaları gerektiğini, ancak CSS için gerekli olmadıklarını unutmayın. onlar çok spesifik. Bir nesne CSS stilleri için bir ID kullanıyorsa, ID'ler benzersiz tanımlayıcılar olduğu için hiçbir zaman kopyalanamaz. Yalnızca stil oluşturma için sınıflar kullanıyorsanız, devralma tahmin etmek çok daha kolay hale gelir.
Ayrıca, ekstra özellikler için sınıflar bir araya getirilebilir. Tek bir öğenin kendisine bağlı 10+ sınıfı olabilir. Bir öğedeki 10+ sınıf kişisel olarak önerdiğim bir şey olmasa da, geliştiricilerin sınırsız sayfa öğesi için yeniden kullanılabilir stillerden oluşan bir kitaplık biriktirmesine izin veriyor.
OOCSS içindeki sınıf isimleri biraz tartışmalıdır ve taşa yazılmamıştır. Birçok geliştirici sınıfları kısa tutmayı ve hedefleri belirlemeyi tercih ediyor..
Örneğin deve çantası da popüler .errorBox yerine .Hata-box. OOCSS 'belgelerinde sınıf adlandırma bakarsanız, deve durumda olduğunu fark edersiniz “resmi” tavsiye. Kısa çizgilerle ilgili yanlış bir şey yok, ancak kural olarak OOCSS kurallarına uymak en iyisidir..
OOCSS + Sass
Çoğu web geliştiricisi zaten Sass'ı seviyor ve hızlı bir şekilde ön uç topluluğunu üstlendi. Eğer Sass'ı henüz denemediyseniz, bir şans vermeye değer. Matematiksel fonksiyonlar gibi değişkenler, fonksiyonlar, yerleştirme ve derleme yöntemleri ile kod yazmanıza olanak sağlar..
Yetkili ellerde, Sass ve OOCSS cennette yapılan bir eşleşme olabilir. Sass Way blogunda bu konuda mükemmel bir yazı bulacaksınız.
Örneğin, Sass'ı kullanmak @extend yönergesi bir sınıfın özelliklerini başka bir sınıfa uygulayabilirsiniz. Özellikler çoğaltılmaz ancak bunun yerine iki sınıf virgül seçiciyle birleştirilir. Bu şekilde CSS özelliklerini tek bir konumdan güncelleyebilirsiniz..
Sürekli stil sayfaları yazarsanız, bu yazarak saatler ve yardım OOCSS işlemini otomatikleştirmek.
Ayrıca şunu unutma kod bakımı, OOCSS'nin büyük bir parçasıdır. Sass'ı kullanarak, iş akışına bağlı değişkenler, karışımlar ve gelişmiş kaplama araçlarıyla işiniz kolaylaşır.
Mükemmel OOCSS kodunun temel bir özelliği herhangi biriyle paylaşma yeteneği, daha sonraki bir tarihte bile kendiniz ve kolaylıkla alabilirsiniz.
Performans ile ilgili önemli noktalar
OOCSS, sorunsuz ve fazla karışıklık olmadan çalışmak içindir. Geliştiriciler ellerinden geleni yapıyorlar değil Her fırsatta kendilerini tekrarlamak, aslında DRY gelişiminin arkasındaki öncül. Zamanla, OOCSS tekniği, belirli bir belgede onlarca defa uygulanmış bireysel özelliklere sahip yüzlerce CSS sınıfına yol açabilir..
OOCSS hala yeni bir konu olduğundan, şişkinlik konusunda tartışmak zor. Birçok CSS dosyası küçük yapıyla şişirilmiş, oysa OOCSS katı yapı ve (ideal olarak) daha az şişkinlik sağlamaktadır. En büyük performans kaygısı, bazı öğelerin mizanpaj yapısı ve tasarımı için farklı sınıflardan bir avuç toplayabileceği HTML’de olacaktır..
Stack Overflow ve CSS-Tricks gibi sitelerde bu konuyla ilgili ilginç tartışmalar bulacaksınız..
Benim tavsiyem örnek bir proje oluşturmaya çalışmak ve nasıl yürüdüğünü görmek. OOCSS'ye aşık olursanız, web sitelerini kodlama şeklinizi kökten değiştirebilir. Alternatif olarak, ondan nefret ediyorsanız, hala yeni bir teknik öğreniyorsunuz ve nasıl çalıştığını eleştiren düşünüyorsunuz. Ne olursa olsun kazan-kazan.
Meşgul Yazma OOCSS alın
Web geliştirmede bir şey öğrenmenin en iyi yolu pratik yapmaktır. Eğer zaten CSS'in temellerini anlıyorsanız, o zaman yolundasınız demektir.!
OOCSS ön işleme gerektirmediğinden, CodePen gibi bir çevrimiçi IDE ile deneyebilirsiniz. Basit projeler başlamak için en iyisidir ve oradan bilginizi geliştirmek.
OOCSS'in gelişen alanındaki araştırmanızı ilerletmek için bu kaynaklara göz atın.
- OOCSS Resmi Web Sitesi
- Nesneye Dayalı CSS: Ne, Nasıl ve Neden
- OOCSS + Sass = CSS’e En İyi Yol
- Nesneye Yönelik CSS'ye Giriş
