İşletme Web Siteleri için CSS Yapısı İpuçları (veya Bu Konuyla İlgili Herhangi Biri)

CSS ve HTML'nin anlaşılması kolaydır. Ancak, web sitelerini (ve uygulamaları) yeniden kullanılabilir, gelecekte sürdürülebilir kılacak ve geliştiricileri mutlu edecek şekilde oluştururken en iyi mimari yaklaşımları öğrenmek yıllar alır.

Burada mimari ile ne kastedilmektedir? CSS kodunun yapısıdır. Dosyayı dosyalara ayırma şekliniz, sınıf adlarının arkasındaki kurallar, seçicilerin derinliği, basamaklama şekli, neyin miras alındığı, bileşenleri, sayfaları, öğeleri ve değiştiricileri nasıl kurduğunuz.

En iyi uygulamaları yüzlerce sayfa, çeşitli içerik türleri, ekran görünümleri, uç durumlarla tüm bu web sitesi bileşenlerine uygulamak ve en üste daha fazlasını eklemek ve mevcut olanları değiştirmek zor kısımdır.

Sayfalarla Değil, Bileşenlerle Oluşturun

Bu, dikkate alınması gereken en önemli kısımlardan biridir. Bulunduğunuz sayfaya göre stil vermemelisiniz. .Homepage… {} stilleri yapmayın. Sayfanızın bir bölümü varsa bölümün stilini belirleyin. Bununla diğer sayfalarda da yeniden kullanabilirsiniz. Bir düğmeniz varsa, düğmeyi .button {} şeklinde biçimlendirin ve başka bir yerde yeniden kullanın. Tüm görünümler için geçerlidir.

Bu, kullanabileceğiniz en yaygın tavsiye ve (şimdiye kadar) en iyi performans gösteren yaklaşımdır.

Şimdi, sayfaya özgü farklılıkları nasıl yönetiyorsunuz? Sayfa başına stil vermenin en yaygın nedeni bu olduğu için mi? Pekala, birkaç yaklaşım var:

Değiştiriciler kullanın.

"BEM" de "M", Değiştirici anlamına gelir. Bu, .block__child – değiştirici görünümüdür. BEM kullanmasanız bile, değiştiriciler zaten var. Bir bileşenin veya bölümün bir varyasyonu varsa, onun için bir değiştirici ekleyin.

İdeal olarak, tasarımcı dikkatli olmalı ve kodu temiz tutmak için varyasyonları minimumda tutmalıdır, ancak ona daha fazlasını eklemekten korkmamalısınız. Varyasyonlar ideal olarak sadece birkaç özelliğin üzerine yazmalı ve aynı işaretlemeyle çalışmalıdır. HTML aşamasında bileşenlere yaklaşmanın iyi bir yoludur - ihtiyaç duyacağınız etiketleri ekleyin ve site genelinde tutarlı olmasını sağlayın. Bir değiştirici sınıf nedeniyle yenilerini eklemeyin.

Çocuk bileşenlerine stil verin.

Diğer yaklaşım, bağlama dayalı stil vermektir. Bir düğme onun .button sınıf ve her şeye sahiptir, her zaman bir düğme, ama yine de başka bir bileşenin eğer 's parçası ayarlayabilirsiniz. Bu genellikle tutarsızlıklar yarattığı için iyi bir fikir değildir, ancak aynı zamanda oldukça gerçekçi bir kullanım örneğidir. Aksi takdirde, garip adlara sahip 20 değiştiriciyle sonuçlanırsınız.

Bağlamsal stiller, bir bileşeni yalnızca başka bir bileşenin alt öğesiyse biçimlendirdiğiniz zamandır. Örneğin bir makale kartı alalım. Varsayılan olarak stilleri vardır. Ancak, yan tarafında bir miktar metin bulunan renkli bir bölümün parçasıysa, tasarım, kartın etrafında birkaç başka öğenin olmasını gerektirir (hareketli şekiller vb.).

Bu durumda, .parent .card {} seçiciyle biçimlendirirsiniz. Bir değiştiriciyle yaptığınız gibi yalnızca birkaç özelliğin üzerine yazmanız gerekecektir. Bunu yaptığınızda, kartın kendisi stillerine daha fazla karmaşıklık katmaz, ancak yine de bu belirli uç durumda düzgün davranacaktır.

Bunu düşündüğünüzde, "sayfa başına" temelinde nasıl uygulanabileceğini de görebilirsiniz. Tasarımda bazı tuhaf uç durumlar varsa ve standart bileşen görünümlerinden (ve hepsinin birlikte etkileşimde bulunma biçimlerinden) bazı küçük farklılıklar varsa, o zaman bunu .homepage {} seçicisiyle biçimlendirebilirsiniz. Sadece bunu idareli kullanmayı unutmayın. Deneyimlerimize göre, bu tür stiller nadiren birkaç satır kodu aşar.

Eklenecek önemli not: Bağlamsal stiller genel olarak iyi bir uygulama DEĞİLDİR. İdeal olarak buna ihtiyacın bile olmamalı. Çoğu zaman, işi yeterince iyi yapması gereken değiştiricileriniz olur. Bazı yapılarda gerçekçi olsa da, katı kurallarla iyi soyutlanmış kodlara çok derin dalmak çok pahalı olabilir.

Bölümlerde Çalışın

Çoğu işletme web sitesi (ve bu konudaki diğer birçok web sitesi) içeriği bölümlere ayırır. Her bölüm, çeşitli özellikleri tanımlayan bir değiştirici sınıfına sahip kendi başına bir bileşendir. Sınıfların yapısına uygun bir öneri şu şekilde olacaktır:

• section.section-container - İsterseniz bu, tutarlı dolguları / kenar boşluklarını veya gerekli olan her şeyi tutan "bileşen adı" olabilir.
• section.section-border-top - bir değiştiricidir. Bu BEM kullanmaz, ancak gerekirse onu bölüm-kap-sınıra "çevirebilirsiniz".
• section.section-welcome - bölümün adı olacaktır.

Adlandırma kuralı yine burada önemsizdir. Bu tür bölümlerle, tasarım tarafından oluşturulan uç durumlarda stilleri yeniden kullanılabilir bileşenlere ayarlama özgürlüğü elde edersiniz (izlenmesi gereken tutarsızlıklar veya daha karmaşık görünümler nedeniyle).

Dosyaları ayırma

Büyük olasılıkla Sass veya benzer bir önişlemci kullanırsınız. Dosya ayırma açısından pek çok yaklaşım var ama bizim uyguladığımız yaklaşım aşağıdaki genel yapıyı takip ediyor:

• Genel - Genel, genellikle bir ızgara çalışması yapmak, HTML etiketlerine stiller, sıfırlamalar / normalleştirici, bazı CMS'ye özgü stiller ve benzerleri gibi kurulum kodlarından oluşur.
• Sayfalar - Yukarıda açıklanan sayfa stilleri. İdeal olarak, burada çok az kod tutmalısınız.
• Bileşenler - Yapının özü - çeşitli bileşenler burada bulunur. Bir ipucu, daha küçük bileşen parçalarını 80 dosya yerine tek bir dosyaya sığdıracak "elemanlara" veya "misc" e sahip olabileceğinizdir. Elbette daha büyük olanlar ideal olarak ayrı dosyalara girmelidir.
• Düzen - Genel stiller, örneğin Üstbilgi, Altbilgi ve ardından sayfa düzenleri, ızgaranız için değiştiriciler vb.
• Eklentiler - Bir eklenti, uzantı veya herhangi bir şeyden oluşturulan harici her şey. Onları diğer projelerde yeniden kullanabileceğiniz için ayırmak güzel.

Seçicileri Temiz Tutun

Temiz kodun iyi bir işareti, ne kadar basit göründüğüdür. Tuhaf özellikler yok, her şeyin bir amacı var, düşük girinti var. Gereksiz olduğunda "akıllı görünmek" seçiciler kodunuzu "havalı" yapmaz. #Container> .row div [rel = "birşey"] gibi bir şeyi .rel-something ile değiştirebiliyorsanız (bunun anlamlı bir sınıf adı olduğunu hayal edin), o zaman işaretlemeyi biraz güncellemelisiniz. Bunun amacı her şeyi daha basit tutmaktır.

Girintileri düşük tutun. Nadiren üç seviyeden fazla geçmeniz gerekir. Örneğin bir .entry sınıfına bakalım:

.entry {...}
.entry-title {...}

.Entry içinde gerçekten .entry-title girintisine gerek olmadığını görün. Daha sonra, dosyaya bir değiştirici eklediğinizde .entry-modifier {} ve .entry-modifier .entry-title {}

Bu yaklaşımla, gelecekte stillerin üzerine yazmak çok daha kolay. Başka bir yaygın örneğe bakalım: nav.site-nav> ul.list-menu> li.list-items * 5> a (emmet) işaretlemesine sahipsiniz

Şimdi, stil vermek için ihtiyacınız olan tek şey:

.site-nav {} - bileşen 1

.list-menu {} - bileşen 2
.list-menu .list-item {}
.list-menu a {}

İçeride ek açılır menüler gibi daha fazla bileşeniniz varsa, bunları doğrudan .list-menu içine yerleştirebilirsiniz. İki düzey .list-menu .dropdown {} varken .site-nav .list-menu .list-item .dropdown {} (4 düzey derinlik) yazmak zorunda değilsiniz

Değiştiriciler için Daha Fazla Soyut Sınıf Adı Yazın

Bu, sürdürülebilirlik için geçerli. Benzer gönderilerde bulacağınız yaygın bir örnek, bir renk değişkenini $ kırmızı olarak ayarlamak değildir, bunun yerine $ birincil veya $ ikincil olarak ayarlarsınız.

Bunun nedeni, satırın sonunda bir değişiklik gerektiğinde, $ red değişkeninin mavi çıktı vermesidir. Kırmızı renginizi değil ana renginizi değiştirmek istemeniz çok daha mantıklı, değil mi?

Diğer renk türleri ve özellikler için de aynı şey geçerli. Bazı içerikleri ayıran çizgileriniz olduğunu varsayalım (<hr> etiketi gibi). Kesikli olduğu için .line-tire adını veriyorsunuz. Mantıklı gelir. Ama sonra bir değişiklik gelir ve nokta atılması gerekir. Gidip .line-noktalı olarak yeniden adlandırıyor musunuz? Bu bir değiştirici değil, bu bileşendir. Bunun yerine, .line ayırıcı olarak adlandırabilirsiniz. Daha sonra spesifik olmak istiyorsanız, .dotted veya .dashed için bir değiştirici ekleyebilirsiniz. Bu tür bir adlandırma, genellikle bir site oluştururken en çok zaman alan şeydir.

Özetle

Sayısız iyi ve kötü uygulama var. Daha iyi sonuçlar elde etmenin bir yolu, kuralları tanımlamak ve bunlara uymaktır. Bu tür kuralları bulmak zordur, bu nedenle iyi bir öneri, web'de gezinmek ve adlandırma kuralları, iyi uygulamalar, sürdürülebilir kod yazma ve daha fazlası gibi mimari hakkında mümkün olan tüm bilgileri toplamaya çalışmak olacaktır.

İyi kod üretmek çok zaman ve yüz binlerce satır kod gerektirir. Bunları yaparken her zaman kendinize “Bu ölçek olur mu?”, “Yeniden kullanabilir miyim?”, “Çok mu üzerine yazdım?”, “Böyle adlandırmak mantıklı mı?” Diye sorun. Bunu ne kadar çok yaparsanız, kararlarınız o kadar optimal hale gelir ve çalışma hızınız o kadar artar.

İyi temellere yapılan bir yatırım, projelerinizde daha az gidip gelmenize neden olur ve gelecekte olması gereken değişiklikleri uygulamak çok daha kolay olacaktır.