Web Geliştiricileri için ITCSS'ye Giriş

Bir sürü harika yöntem var. CSS kodunun yapılandırılması, ve hepsi farklı şekillerde çalışır. En popüler olanlar OOCSS ve SMACSS'dir, ancak aynı zamanda daha az bilinen bir yöntem var. ITCSS (Ters Üçgen CSS) Harry Roberts tarafından hazırlandı.

Bu bir kütüphane veya çerçeve değil, bir kod yazma metodolojisi bu ölçeklenebilir ve işlenmesi kolaydır. ITCSS'in sunduğu avantajlar basit kod organizasyonu daha küçük dosya boyutları ve CSS mimarisinin daha iyi anlaşılması.

ITCSS herkes için değil, kodlama sürecinde stil sayfalarına açık bir şekilde bakmak için profesyonel bir yol sunar. ITCSS'in arkasındaki kavramları inceleyelim ve web projelerine nasıl uygulanabileceklerini görelim..

ITCSS Nedir??

CSS'yi organize etmenin modern yolları sıklıkla geri modularization veya CSS nesneleri soyut fikirler inşa etmek.

Ters Üçgen CSS'nin yeni fikri bir CSS özelliklerini bölmenin katmanlı yolu özgüllük ve önem derecelerine göre. Her ikisi de ITCSS ile birlikte kullanılabilse de, SMACSS ve OOCSS ile karşılaştırıldığında daha az bilinen bir yöntemdir..

ITCSS’den çoğunlukla tescilli, kullanımı hakkında ayrıntılı bir kural kitabı yoktur. Sadece bir özel ilkeler kümesi bizim emrimizde. Yazar, aşağıdaki videoda onlar hakkında konuşuyor.

Varsayılan olarak, ITCSS OOCSS ile aynı prensipleri kullanır, ancak daha fazla ayırma ile özgüllük dayalı. Öyleyse, OOCSS'yi zaten biliyorsanız, bunu benzersiz olarak kabul edin. alternatif CSS mimarisi denemek.

ITCSS kullanmanın en büyük yararlarından bazıları şunlardır:

• Sayfa nesneleri, kendi CSS / SCSS dosyalarına ayrılabilir. tekrar Kullanılabilirlik. Her nesneyi kopyalamak / yapıştırmak ve genişletmek kolaydır diğer projelere.
• Özgüllük derinliği sana bağlı.
• Orada ayarlanmış klasör yapısı yok, ve ön işleme araçlarının gerekli kullanımı gerekmez.
• Kavramları CSS modülleri gibi diğer metodolojilerden birleştirebilirsiniz. kendi karma iş akışınızı yaratın.

ITCSS Sistemi

Lubos Kmetko'nun mesajından aşağıdaki çizimi kullanarak Ters Üçgen Modelin nasıl çalıştığına bir göz atalım.

Ters çevrilmiş üçgenin düz üstünden, alt taraftaki uca doğru olan bir yön özgüllük artışı. Bu daha az spesifikliğe odaklanmak bir sitedeki sınıfları birden çok kez yeniden kullanmayı kolaylaştırır.

Üçgenin her alt bölümü ayrı bir dosya veya dosya grubu olarak kabul edilebilir, ancak bu şekilde kod yazmanıza gerek yoktur. Alma özelliği nedeniyle Sass / Az kullanıcılar için daha anlamlı olur. Sadece her alt bölümü bir metodoloji olarak düşünün. yeniden kullanılabilir CSS kodunu bölme ve düzenleme.

Hızlı bir göz atalım ters üçgenin her bölümü üstten aşağıya doğru hareket.

• Ayarlar - Önişlemci değişkenleri ve yöntemleri (gerçek CSS çıkışı yok)
• Araçlar - Karışımlar ve fonksiyonlar (gerçek CSS çıkışı yok)
• genel - Eric Meyer'in sıfırlaması, Normalize.css veya kendi kod grubunuzu içerebilecek CSS sıfırlamaları
• Elementler - Sınıfsız tek HTML eleman seçicileri
• Nesneler - OOCSS metodolojisini izleyen tipik sayfa yapısı sınıfları
• Bileşenler - Tüm sayfa öğelerini ve her birini stilize etmek için estetik sınıflar (genellikle nesne sınıflarının yapısıyla birleştirilir)
• koz - Üçgenin içindeki herhangi bir şeyi geçersiz kılmak için en belirgin stiller

Ters çevrilen üçgenin her katmanı olabilir. ihtiyaçlarınızı karşılamak için düzenlenmiş. Bir CSS işlemcisi kullanmıyorsanız, Ayarlar veya Araçlar katmanlarına ihtiyacınız olmaz..

Her alt bölümü uygun gördüğünüz şekilde yorumlamaktan çekinmeyin. Örneğin, Jordan Koschei, yapı ve estetiği bir arada nasıl ders sınıflarında birleştirdiğini, Bileşenler bölümünde çok az kaldığını açıklıyor.

ITCSS var hızlı ve zor kurallar yok takip etmelisin. ITCSS uyumluluk denetleyicisi yoktur ve bu modeli hafifçe değiştirdiğiniz için kimse size bağırmayacaktır..

ITCSS'nin yaratıcısı Harry Roberts, yöntemlerini dahili kullanım için özel tutmakla ilgileniyor olsa da, bir ITCSS açık kaynaklı örneği Bu GitHub deposunda. Harry Roberts'ın kişisel web sitesi olan CSS Wizardry hesabı tarafından barındırılıyor.

BEM + IT = BEMIT Adlandırma

En popüler CSS adlandırma şemalarından biri BEM'dir. Bu, Block-Element-Modifier anlamına gelir ve çok özel bir sözdizimi izler.

BEM'deki her öğe, CSS sınıfları için bir adlandırma kuralını açıklar:

• Bloklar tek tek öğeler için kopyalanabilir ve tek başına duran sınıflardır..
• Elementler her zaman bir bloğun parçası
• Düzenleyiciler her zaman bir bloğu veya öğeyi, görünümünü hafifçe değiştirmek için değiştirin (açık / kapalı, etkin / etkin değil, sabit, statik, vurgula / nötr).

BEMIT adlandırma sözleşmesi ITCSS tarafından kabul edildi, ITCSS ile yeni fikirler uygularken BEM'den fikir ödünç alıyor..

BEM sözdizimi çok özel kuralları belirler. Aşağıda BEM web sitesinden bir örnek verilmiştir:

.form  .form - theme-xmas  .form - basit  .form__input  .form__submit  .form__submit - disabled  

Bloklar, ayrılmayan isimlere veya bir tire veya bir alt çizgi ile ayrılmış isimlere sahiptir. Öğeler iki alt çizgi kullanır ve belirli bir blokla tutarlı olan iç öğeleri tanımlar. Değiştiriciler aynı şekilde çalışır, ancak tanımlama için iki çizgi kullanırlar.

Harry bu blog yazısında BEMIT'e daha derinden giriyor. Onun açıklaması çok özlüdür ve ITCSS’nin gerçek doğasının diğer CSS metodolojileri ile arkadaşça oynamak.

Harry tanımlar nesneler için ad alanları gibi görünen her ana sınıf adı için önekler. Olarak parçalandılar O- nesneler için, c- bileşenler için ve u- yardımcı programlar için (clearfix veya text centering gibi).

İşte temsil eden bazı örnek kodlar tipik BEMIT adlandırma kuralları.

  
... 
 
 

O da kullanmanızı önerir @ Medya stillerini temel alan sınıflar için sonek. Böylece .O-medya sınıf değişebilir .o-ortam @ Ig Büyük ekranlar için .o-ortam @ MD orta büyüklükteki ekranlar için.

Şahsen, eklerin son ekleri olduğunu düşünüyorum. temel web projeleri için hazır. Bence çoğu geliştirici ortak medya sorguları kullanır ve sınıfları farklı kesme noktalarında tekrar yazar. Ancak her iki yöntemin de doğru ya da yanlış olduğunu söyleyemem ve herkes BEMIT kullanmak isteyip istemediğine tek tek karar verebilir..

ITCSS'nin neden BEM'i genişlettiği ve CSS sınıflarınızı nasıl adlandırmak isteyebileceğiniz hakkında daha fazla bilgi edinmek için bu tanıtım BEMIT makalesini okumanızı şiddetle tavsiye ediyorum..

ITCSS olarak özetlenebilir örgütsel bir yöntem yazmak için yeniden kullanılabilir ve ölçeklenebilir CSS. BEM, tercih edilen adlandırma sözdizimidir ve BEMIT bunu işe yayar Daha belirgin ve tanınabilir kod için ad alanlı.

Öğrenecek çok şey var ve eğer CSS’de yeniyseniz bu kırılması zor bir kavram olacaktır. Fakat öğrenmeye istekliysen, ITCSS kodunun zarif doğasına şaşırtacağını garanti ederim..

Kaydırma

Ön uç geliştiriciler her zaman iş akışlarını optimize etmek istiyor. ITCSS, karmaşık web sitelerinin yapılandırılmasında gelişmiş bir yönteme katkıda bulunabilecek başka bir yöntemdir.

Zorluk, gerçek proje çalışmasında nasıl çalıştığını öğrenmek. Temeriteniz varsa ve öğrenmeye devam ederseniz, ITCSS araç kitinize eklemeye değer bir şey olabilir. Resmi bir belge bulamamama rağmen, ITCSS hakkında öğrenmek için hala çevrimiçi çok fazla kaynak var.

• Yeni CSS mimarisi ITCSS ile büyük ölçekli web projelerini yönetin (Creativebloq.com)
• ITCSS ile CSS Projelerini Yönetme - Sunum Slaytları (Speakerdeck.com)
• ITCSS ile CSS Projeleri (1 saat video sunumu)
• ITCSS - Büyük ölçekli projeler organize etmenin ilginç bir yolu (Css-tricks.com)

(Speakerdeck.com üzerinden kapak fotoğrafı)