İyi CSS Yazmak

Yayınlanan: 2016-10-17

Her zaman yeni şeyler öğrenmeye çalışıyorum. Bununla birlikte, halihazırda yaptığım şeyleri geliştirmenin yollarını da öğrenmeye çalışıyorum. Hem tam zamanlı işimde hem de müşteri yan projeleri için her zaman geliştirmek istediğim şey CSS'imdi. CSS söz konusu olduğunda her zaman oldukça iyi olduğumu hissettim, ancak okumayı her zaman dağınık ve genellikle bakımı zor buldum.

Yapmaya çalıştığım şey, CSS'yi iyi, okunabilir ve sürdürülebilir kılan şeyin ne olduğunu bulmak. Sanırım tüm bunları mümkün kılmak için bazı yollar buldum (ve buldum).

Problemler

CSS hakkında beni rahatsız eden birkaç şey var. Sahip olduğum en yaygın rahatsızlıklar:

  • ortak kodu tekrarlamak
  • tarayıcı önekleri
  • yorum eksikliği
  • fazla nitelikli seçiciler
  • zayıf sınıf isimleri

Kişisel projelerime gelince, kodumun tüm sorumluluğunu alıyorum. CSS'ime nadiren yorum yaparım ve genellikle sonradan düşünülmüş gibi davranırım. Bu açıkça yanlış.

Uzun bir süre sınıf isimlerimin “anlamsal” olduğunu ve işleri sadece benim yaptığımı düşündüm, bu yüzden kodu veya küçük "hack'leri" veya herhangi bir şeyi açıklamaya gerek yok.

Uzun süredir devam eden bir projede kodlamaya geri dönmek, bu teorinin çok yanlış olduğunu çabucak kanıtlıyor.

İş yerinde kodlama söz konusu olduğunda, tüm suçu üstlenemem. Aslında, meselenin bir kısmı, orada elini tutan insan sayısıdır. Şu anda ekibimiz, sitelerimiz için bir noktada CSS yazan yedi kişiyiz, başka bir 6-8 kişi gelip geçti. yıllar. Ekibin her üyesi CSS ile ilgili farklı düzeylerde bilgi ve yeteneğe sahiptir.

Ayrıca, uzun süredir devam eden projelerde sıklıkla olduğu gibi, kodun bir kısmı eski . Birçoğu CSS3 öncesi veya 5 yıl önce trend ne olursa olsun güzeldi. Her iki durumda da, yazıldığı sırada işleri yapmanın farklı yolları ve bazı durumlarda doğal bir bilgi eksikliği vardı.

Ayrıca bazı programcıların kodlarının "kendi kendini belgeleyen" olduğu konusunda ısrar edeceklerini öğrendim. Bu terime aşina değilseniz, "kodumda yorum yok" anlamına gelir.

Çözümler

Hiçbir şey mükemmel olmasa da kodumuzu geliştirmek için yapabileceğimiz şeyler olduğuna inanıyorum. Bir süre önce Harry Roberts'ın CSS Yönergelerini keşfettim. “Akıllı, yönetilebilir, ölçeklenebilir CSS yazmak için üst düzey tavsiye ve yönergeler” vaadine sadık kalır.

Yorumlar

CSS Yönergeleri yorum stilleri hakkında ayrıntılar verirken, ben şahsen gelecekte bana ne düşündüğümü söylemek için bir şeyler koymaya çalışıyorum. Her bileşene başlığı temsil eden bir yorumla başlıyorum, bunlar bileşenin amacına ilişkin ayrıntılar .

Bir önişlemci kullanırken, belirli yorumları ya CSS'ye dahil edilecek ya da önişlemci tarafından atlanacak şekilde biçimlendiririm. Hâlâ bu kısım üzerinde çalışıyorum ve bir şeyler , herhangi bir şey koyma alışkanlığını kazanmaya çalışıyorum.

nesne yönelimi

Nesne yönelimi, büyük şeyleri küçük şeylere bölen bir programlama paradigmasıdır. Wikipedia'dan:

Nesne yönelimli programlama (OOP), genellikle sınıf örnekleri olan [ve] uygulamalar ve bilgisayar programları tasarlamak için birbirleriyle etkileşim kurmak için kullanılan 'nesneler' […] kavramını temsil eden bir programlama paradigmasıdır.

CSS söz konusu olduğunda, buna nesne yönelimli CSS veya OOCSS diyoruz . Temel kavram, elemanın yapısını , elemanın kabuğundan ayırır. Bu, belirli uygulama ayrıntılarını aynı anda yeniden kullanmaya gerek kalmadan, yinelenen tasarım modellerini kolayca yeniden kullanabileceğimiz anlamına gelir. OOCSS, ağırlıklı olarak kodun yeniden kullanımına odaklanır, bu da bizi daha hızlı yapar ve kod tabanımızın boyutunu düşük tutabilir.

İskeletler gibi yapısal yönleri düşünüyorum; nesne olarak bilinen yapıları veren ortak çerçeveler. Bu nesneler, herhangi bir kozmetik içermeyen basit tasarım desenleridir. Genel bir nesneye sahip olmak için yapıyı bir dizi bileşenden soyutlarız.

Daha sonra isteğe bağlı olarak "skin" katmanını yapımıza ekleriz, böylece soyutlamalara belirli bir görünüm ve his verebiliriz. Örneğin (CSS Yönergelerinden alınmıştır):

 /**
 * Basit, tasarım gerektirmeyen bir düğme nesnesi. Bu nesneyi bir `.btn--*` dış görünümüyle genişletin
 * sınıf.
 */
.btn {
    ekran: satır içi blok;
    dolgu: 1em 2em;
    dikey hizalama: orta;
}

/**
 * Pozitif düğmelerin derisi. `.btn` öğesini genişletir.
 */
.btn--pozitif {
    arka plan rengi: yeşil;
    Beyaz renk;
}

/**
 * Negatif düğmelerin derisi. `.btn` öğesini genişletir.
 */
.btn--negatif {
    arka plan rengi: kırmızı;
    Beyaz renk;
}

Burada .btn sınıfının basitçe bir öğeye yapı sağladığını, ancak kozmetikle ilgili hiçbir şeyi olmadığını görüyoruz. .btn , bu öğeye daha belirgin bir stil vermek için .btn--positve gibi ikinci bir sınıfla genişletebiliriz :

 <button class="btn btn--positive">Tamam</button>

Bir önişlemcide @extend gibi bir şey kullanmak yerine HTML'mde birden çok sınıf kullanmayı tercih ederim. Bu bana HTML'mde daha fazla görünürlük sağlıyor ve öğeme hangi sınıfların uygulandığını hızlı bir şekilde görmemi sağlıyor. Ayrıca sınıflarımın CSS'imdeki diğer stillere sıkı sıkıya bağlı olmadığı anlamına gelir. Kapsülleme kavramlarını takip ederek OOCSS'ye yardımcı olur.

BEM

BEM ( Block, Element, Modifier ), Yandex'de geliştirilen bir ön uç metodolojidir. BEM aslında çok eksiksiz bir metodolojidir ve dürüst olmak gerekirse, tüm ayrıntılara girmedim, ancak ilgilendiğim şey sadece adlandırma kuralı.

BEM benzeri adlandırma kuralları kullanıyorum. Konsept aynıdır, ancak tam sözdizimi biraz farklı olabilir.

BEM, sınıfları üç gruba ayırır:

  1. Blok: bir bileşenin kökü veya tabanı
  2. Öğe: Bir Bloğun içindeki bir bileşen
  3. Değiştirici: Bloğun bir varyasyonu veya uzantısı

Çok temel bir benzetme (bir örnek değil ):

 .köpek {}
.köpek kuyruğu {}
.dog--küçük {}

Öğeler iki alt çizgi (__) ile, değiştiriciler iki kısa çizgi (–) ile sınırlandırılır.

Yukarıdaki benzetmede, .dog öğesinin öğenin kökü olan Blok olduğunu görüyoruz. O zaman, .dog__tail bir Öğedir, bir .dog Bloğunun daha küçük bir parçasıdır. Son olarak, .dog--small , .dog Bloğunun özel bir varyasyonu olan Değiştiricidir. Öğelere Değiştiriciler de uygulayabilirsiniz. örneğin, .dog__tail--short to tekrar olabilir, dog__tail Öğesinde bir varyasyon belirtebiliriz.

Bazı durumlarda Bloklar, Öğeler veya Değiştiriciler için birden fazla kelime isteyebilirim. Her durumda, bunlar tek bir tire (-) ile ayrılır ve sınıflar her zaman küçük harfle yazılır.

önişlemciler

İş akışımda CSS Ön İşlemcileri üzerinde çalışmak için zaman harcıyorum ve şimdiye kadar inanılmaz derecede değerli oldu. CSS Ön İşlemcileri, önceden işlenmiş bir dilde yazılmış kodu alır ve bunları eski güzel CSS'ye dönüştürür. Bunlar CSS değildir , yani CSS'nin aynı kuralları ve sınırlamalarına bağlı değildirler. CSS harika olsa da, yapmak istediğimiz şeyleri her zaman kolayca yapmamıza izin vermez.

Örneğin, CSS'de gerçekten iyi olacak bir şey değişkenlerdir . Belki bir öğenin sol kenar boşluğunun diğerinin genişliğiyle aynı olmasını istersiniz ve aniden birisi bu sayıların değişmesi gerektiğine karar verir. Aynı numara olduklarından ve düzeniniz bu numaraya bağlı olabileceğinden, birden fazla yeri değiştirmeniz gerekir. Ancak bir değişkenle , onu tek bir yerde değiştirebilir ve tüm yerleşime yansımasını sağlayabilirsiniz. Tabii ki, önişlemciler için değişkenlerden çok daha fazlası var, ama bu bir başlangıç!

Açıkçası bir önişlemci kullanmak zorunda değilsin, ama sanırım kullanan çoğu insanın geri dönmeyeceğini göreceksin. Yapmayacağımı biliyorum. Esneklikteki kazanç ve artan okunabilirlik, vazgeçemeyeceğim bir şey. Değişkenleri ve karışımları kullanabilmek beni bağımlı kılmak için yeterli.

Kullanılabilir birkaç önişlemci var, ancak gerçekten baktığım ve kullandığım sadece ikisi LESS ve SASS . Lütfen bir göz atın ve bunlardan birini iş akışınıza eklemeyi düşünün, geriye bakmayacaksınız.

Sonuç

Buradaki asıl noktam, CSS'nin daha iyi olabileceğidir . Her şey daha iyi olabilir . Birisi bana geçenlerde Reddit'teki bir gönderiye yaptığı yorumda “CSS'nin anlambilimi olmadığını” söyledi. tüm kalbimle katılmıyorum. CSS %100, şüphesiz anlamsal olabilir .

OOCSS ve BEM kullanmak aslında CSS'nize çok anlamsal bir anlam kazandırır. Bu, hemen kolay olduğu anlamına gelmez, ancak keşfetmeye değer. Bunu CSS Ön İşlemcileri ile birleştirin ve çok okunabilir, bakımı yapılabilir ve ölçeklenebilir CSS potansiyeline sahip olursunuz.

Ayrıca, bunun yalnızca CSS'nizi (önceden işlenmiş veya işlenmemiş) daha okunabilir kılmakla kalmayıp, aynı zamanda öğelere anlamsal sınıf adları uygulayarak HTML'nizi daha okunabilir hale getirdiğini de belirtmek isterim.

TL; DR

Tamam, belki bu çok fazlaydı – özetlemek gerekirse, şunu yaparak daha iyi CSS yazın:

Nesneye Yönelik CSS :

  • her sınıf bir şey yapar - iyi yapar, doğru yapar

Blok, Eleman, Değiştirici (BEM) stili sınıf isimleri :

  • Blok: .grid
  • Öğe: .grid__item (2 alt çizgi)
  • Değiştirici: .grid--wide (2 tire)

Önişlemciler harika :

  • onları kontrol edin: DAHA AZ – SASS
  • veya başkalarını bulun: Geliştirme süresini hızlandırmak için 8 CSS ön işlemcisi