CSS Yazma Metodolojilerini Anlamak

Bu yazıda göreceğiz CSS yazma metodolojileri nelerdir, Bazı iyi bilinen metodolojiler ve CSS kodumuzu optimize etmede bize nasıl faydalı olabilecekleri. Topu yuvarlamak için en basit soruyla başlayalım. Metodoloji nedir?

Bir metodoloji bir yöntemler sistemi. Bir yöntemi basitçe sistematik bir şekilde bir şeyi yapmanın, istediğimiz sonucu elde etmek için önceden belirlenmiş bir şekilde yapmanın bir yolu olarak düşünün.

Daha iyi sonuçlar almak için, yöntemlerimizi daha iyi planlayarak geliştiririz, siparişi değiştirmek, adımları basitleştirmek - ne işe yarıyorsa Daha hızlı ve dahası verimli.

CSS Metodolojisi

Şimdi CSS metodolojisi hakkında konuşalım. Tıpkı hayattaki hemen hemen her şeyde olduğu gibi, biz de CSS yazma yöntemimiz var: bazıları ilk önce sıfırlama CSS, bazı yer düzeni stilleri, bazıları ise bir öğeyi şekillendirmek için iki ila üç sınıfla başlar, bazıları da tüm CSS kodlarını tek bir dosya.

Tercih edilen yöntemlerimiz zaman içerisinde kendi başlarına belirlendi veya başkaları tarafından etkilendi veya işyerimizde veya yukarıdakilerin tümü nedeniyle gerekli oldu. Fakat zamanla, CSS gazileri formüle etti CSS yazma metodolojileri bu daha esnek, tanımlanmış, yeniden kullanılabilir, anlaşılabilir ve idare edilebilir.

Aşağıdakileri içerecek şekilde formüle edilmiş metodolojilere bakacağız:

OOCSS (Nesneye Yönelik CSS)
BEM (Blok, Eleman, Değiştirici)
ACSS (Atomik CSS)
SMACSS (CSS için Ölçeklendirilebilir ve Modüler Mimari)

Not: Aşağıda belirtilen kavramların hiçbiri, bu metodolojilerle aynı isim ve konsepte sahip olabilecek herhangi bir çerçeve, kütüphane veya araç ile karıştırılmamalıdır. Bu gönderi sadece CSS yazma metodolojileri hakkında.

1. OOCSS

2008 yılında Nicole Sullivan tarafından geliştirilen OOCSS'in (Nesneye Yönelik CSS) temel kavramları CSS'yi içeriyor nesne yapı ve görsel stillerin tanımlanması, ayrılması ve mekana dayalı stillerin önlenmesi.

OOCSS'de, Nicole’un önerdiğimiz ilk adım, CSS’deki nesneleri tanımlayın.

“Temel olarak, bir CSS "nesnesi" bağımsız bir HTML, CSS ve muhtemelen JavaScript snippet'ine özetlenebilen yinelenen görsel bir kalıptır. Bu nesne daha sonra bir site boyunca tekrar kullanılabilir. - Nicole Sullivan, Github (OOCSS)“

Bu siteden örneğin bu yapıyı ele alalım. İşte yinelenen bir görsel kalıp olan ve kendi bağımsız HTML ve / veya CSS'sine sahip bir şey:

Burada iki tür nesnemiz var, adlandıracağımız başlıkların daha büyük önizlemesi sonrası önizleme birincil ve adlandıracağımız başlıkların yer aldığı bir kenar çubuğu sonrası önizleme ikincil.

Bizim ihtiyacımız ayrı yapı ve cilt (yani nesnelerin görünümünü yaratan stiller). İki tür nesnenin farklı yapıları vardır, biri benzer görünse bile daha büyük bir kutudadır, sola doğru ve başlıkları sağa doğru.

Her iki nesnenin görüntülerini bir sınıf verelim sonrası önizleme görüntüsü ve görüntüyü sola koyan kodu ekleyin. Bu, görüntünün CSS'deki nesnelerin içine nereye yerleştirileceğinin kodunu tekrarlamamıza engel olur. Başka benzer nesneler varsa, yeniden kullanırız. sonrası önizleme görüntüsü onlar için.

Cilt ayırma gibi daha basit stiller için de yapılabilir kenarlıklar veya arka planlar. Aynı mavi kenarlığa sahip birden fazla nesneniz varsa, mavi sınır için ayrı bir sınıf oluşturma ve nesnelere eklemek Mavi sınırların kodlanma zorunluluğu sayısını azaltın CSS’de.

Nicole da önerir değil konuma göre stiller ekle, örneğin, belirli bir div içindeki tüm bağlantıları vurgulamak için hedeflemek yerine, bu bağlantıları bir vurgulayıcı sınıfı uygun CSS stilleri ile. Bu şekilde, sayfanın başka bir kısmındaki bir bağlantıyı vurgulamanız gerektiğinde, vurgulayıcı sınıfını yeniden kullanabilirsiniz..

OOCSS'nin Artıları: Yeniden kullanılabilir görsel şekillendirme kodları, konum esnek kodları, derin iç içe seçicilerde azalma.

Eksileri OOCSS: Yinelenen görsel kalıpları tutarsız bir şekilde, yapıyı ve görsel stil kodlarını ayırmak gereksiz görünüyor.

2. BEM

2009'da Yandex'deki geliştiriciler tarafından geliştirilen BEM (Block, Element, Modifier) için temel kavramlar tanımlamayı içerir. blok, eleman & niteleyici ve buna göre adlandırma.

bir “blok” aslında bir “nesne”(önceki örnekten), bir “eleman” bloğun bileşenlerini belirtir (yukarıdaki resim, başlık, önizleme metni) önizleme sonrası- nesneleri). bir “niteleyici” Bir bloğun veya öğenin durumu değiştiğinde, örneğin bir menü öğesine etkin bir sınıf eklediğinizde, etkin sınıf değiştiriciniz olarak işlev görür.

Bileşenleri belirledikten sonra, bunları uygun şekilde adlandırın. Örneğin:

Bir menü bloğu sınıfa sahip olacak Menü
öğeleri sınıfa sahip olacak menü seçeneği (blok ve eleman çift alt çizgi ile ayrılır)
menünün devre dışı durumu için değiştirici sınıfı olabilir menu_disabled (tek bir alt çizgi tarafından sınırlandırılmış değiştirici)
Bir menü öğesinin devre dışı durumu için değiştirici olabilir. menu__item_disabled.

Değiştiriciler için de kullanabiliriz key_value adlandırma biçimi. Örneğin, eski makalelere bağlanan tüm menü öğelerini ayırt etmek için onlara sınıfı verebiliriz. menu__item_status_obsolete, ve beklemedeki belgelere işaret eden menü öğelerinin stillendirilmesi için, sınıf ismi; menu__item_status_pending.

Adlandırma sizin için neyin işe yaradığına göre değiştirilebilir. Fikir yapabilmek sınıf isimlerinden tanımlamak, bloklar, elemanlar ve değiştiriciler. BEM sitesinde listelenen adlandırma sistemlerinden bazılarına göz atın.

BEM'in sitesinde ayrıca listeler CSS dosya sistemine blok, eleman ve değiştirici ayrımının nasıl getirilebileceği. Bloklar gibi “düğmeleri” ve “girişler” bu bloklarla ilişkili dosyaları (.css, .js) içeren kendi klasörlerine sahip olabilir, bu blokları diğer projelere almak istediğimizde işleri daha kolay hale getirir..

BEM'in Artıları:Derin CSS seçicilerinde sınıf adları ve azaltma kullanımı kolay.

BEM Eksileri:İsimlerin aklı başında görünmesini sağlamak için, BEM elemanların iç içe geçmesini engellememizi tavsiye eder..

3. ACSS

İlk tarafından sonuna kadar bir yerde, Yahoo tarafından ünlü yapıldı 21'in on yılı^st yüzyılda, ACSS'nin temel kavramları, en atomik stil seviyesi, yani bir özellik-değer çifti için sınıflar oluşturup ardından HTML'de gerektiği gibi kullanmaktan ibarettir..

ACSS'nin (Atomik CSS) ne zaman bir süredir kullanıldığından beri ilk kez geliştirildiğini belirlemek zor. Geliştiriciler gibi sınıfları kullanıyor .clearfix taşma: hidden uzun zamandır. ACSS'deki fikir şudur: hemen hemen her kullanım için içerikle ilgili olmayan özellik-değer çifti için bir sınıfa sahip olmak sitemize ihtiyacımız olacak ve gerektiğinde bu öğeleri HTML öğelerine eklemek.

Aşağıda ACSS ve HTML’de nasıl kullanıldığını temel alan sınıflara bir örnek verilmiştir..

 .mr-8 marj-sağ: 8 piksel; .fl-r float: sağ;

Gördüğünüz gibi, bu yöntemle sınıfların sayısı artacak ve HTML tüm bu sınıflar tarafından kalabalıklaşacaktır. Bu yöntem% 100 etkili değildir, ancak istenirse faydalı olabilir. Yahoo sonuçta bunu kullanır.

ACSS'nin Artıları:HTML bırakmadan HTML biçimlendirme.

ACSS Eksileri:Çok fazla sınıf, çok düzgün değil ve bundan nefret edebilirsin.

4. SMACSS

2011 yılında Jonathan Snook tarafından geliştirilen SMACSS (CSS için Ölçeklenebilir ve Modüler Mimari), 5 farklı stil kuralını tanımlayarak çalışır. Sınıf isimleri ve dosyalama sistemi bunlara göre oluşturulmaktadır..

“SMACSS, tasarım sürecinizi incelemenin ve bu katı çerçeveleri esnek bir düşünce sürecine sığdırmanın bir yoludur. - Jonathan Snook”

SMACSS 5 çeşit stil kuralını tanımlar: üs, düzen, modül, durum, ve tema.

Temel stiller, gibi temel HTML etiketlerine yönlendirilen varsayılan stillerdir.
, .
Mizanpaj stilleri, üstbilgi, altbilgi ve yan menülerin nereye gideceği kodlaması gibi, sayfanın düzenini tanımlamak için kullanılan stillerdir.
Modül stilleri, galeri veya slayt gösterisi gibi bir modüle özgüdür.
Durum stilleri, gizli veya devre dışı gibi değişken durumlara sahip öğeleri vurgulamak içindir.
Tema, sayfanın görsel şemasını değiştirmek için kullanılır.

Farklı stil kuralları, sınıf adındaki bir önek kullanılarak tanımlanabilir, örneğin l-başlığı (düzen için) veya t başlığı (tema için). Bu farklı kural türlerini ayrı dosya ve klasörlere yerleştirerek de düzenleyebiliriz..

SMACSS'nin Artıları:Daha iyi organize edilmiş kod.

SMACSS Eksileri: Hiçbiri düşünemiyorum.

SMACSS hakkında okuyabileceğiniz ücretsiz bir çevrimiçi kitap var veya daha fazla okumak için ebook sürümünü satın alabilirsiniz..

Sonuç

Yukarıdaki CSS metodolojileri size bir sistem verecektir. CSS kodlarınızı yönetin ve optimize edin. İhtiyaçlarınızı karşılamak için OOCSS-SMACSS veya OOCSS-BEM veya BEM-SAMCSS gibi bir araya getirilebilirler.

Aşağıdaki gibi CSS metodolojilerini yürütmek için otomatik bir sistem istiyorsanız, çerçeveler ve kütüphaneler de vardır:

OOCSS çerçevesi
BEM araçları
Organik CSS çerçevesi (atom kavramını izler).