(S) CSS Henüz Bilmediğiniz En İyi Uygulamalar

Paula Jenda tarafından İllüstrasyon

Şimdi uygulamalarınızı React, Angular veya Vue.js gibi popüler bir çerçeve kullanarak oluştursanız bile, bunlara bazı stiller eklemeniz gerekir. Kullandığınız teknolojiye bağlı olarak, stillerinizi belirli bir şekilde yazmanız gerekir. Örneğin, React için, bileşen doğası gereği, CSS modüllerini kullanarak stil yazmak daha iyidir. Yepyeni CSS özelliklerini kullanmak istiyorsanız, CSSNext kullanmak akıllıca olacaktır. Sass veya LESS gibi iyi ol CSS işlemcileri hakkında ihmal etmeyin. Düşünebilirsiniz - pek çok araç, yazarım ki stiller her biri için farklı. Evet haklısın. Fakat temeller aynı.

Bu yazıda, CSS modülleri veya Sass / LESS kullanmaya meraklı olsanız da, sağlam ve bakımı yapılabilir CSS yazmak için birkaç güzel ipucu sunmak istiyorum. Bu ipuçları SCSS sözdiziminde sunulur, bu nedenle Sass ile ilgili bir giriş yapmanız gerekirse, başlamak için iyi bir yer. Düz CSS kullanıyorsanız, İleri CSS tarafından genişletilmiş, bu makale de tam size göre. Bu temel kavramlar, diğer CSS araçlarında veya ön işlemcilerinde kolayca kullanılabilir.

Stillerinizi yapılandırın

İyi düşünülmüş klasör yapısı projenizi sürdürmenize yardımcı olur. Aynı senin stilleri için de geçerli. Kodunuzu, atıfta bulundukları öğelere göre bölmek önemlidir. Tüm kurallarınızı büyük bir styles.scss dosyasında saklamak kesinlikle sorunlara yol açacaktır. Özellikle projenizi büyütmek ve yeni bileşenler eklemek istiyorsanız.

Projenin ölçeklendirilmesi açısından, uygun stiller yapısını ayarlamak hayati önem taşımaktadır. Projelerinizde kullandığınız bileşenlere göre dosyalarınızı sipariş edecek bir yapı sağlamaya odaklanmalısınız. Temel stilleri, bileşen ve tema stillerinden ayırmanızı öneririm. Ayrıca, tüm karışımları ve değişkenleri rollerine bağlı olarak bir klasörde birleştirmek de mantıklıdır.

Örnek bir klasör yapısı aşağıdadır:

Ve main.scss:

Renkleri adlandır

Böylece bir web sitesi tasarımınız var ve kodlama düzeniyle başlamak istiyorsunuz. Projenizdeki renkleri yönetmek için akıllıca bir yaklaşım ne olurdu? Basitçe renk değerlerini doğrudan stil kurallarına yazabilirsiniz. Ancak bu yaklaşım gelecekte zahmetli olabilir. Neyse ki, hem CSS hem de Sass bize değişkenler veriyor.

Sass'ta herhangi bir değeri değişken olarak saklayabilirsiniz, bu nedenle renk değerini değişken olarak saklamak mantıklıdır. Çoğunlukla, renk değerini tanımlamak için HEX (onaltılık) kullanırız. İnsan için, HEX şifre gibi görünüyor, çünkü bilgisayarlar için tasarlanmış bir formattır. Hangi rengin # 7fffd4 veya # ffd700 olarak yazıldığını söylemek zordur (onları anlarsanız, CAPTCHA testinde başarısız olmanız mümkündür). Birincisi akuamarin, ikincisi altındır. Bu renklerin bu şekilde adlandırılması daha kolay olmaz mıydı?

Bazı renklerin web sitesi tasarımında belirli rolleri vardır. Bir renk marka rengi olarak kullanılabilir, diğeri arka plan içindir. Tarayıcı için kod yazmamıza rağmen, renklerimiz için sağlam bir yapı oluşturmalıyız. Tasarımcıdan biraz yardım almanız iyi olur. Onu renk paletini tarif etmeye ikna edemiyorsanız, yine de kendiniz yapabilirsiniz.

Öncelikle renklerinizi adlandırmaya başlamalısınız. Kesinlikle, HEX değerini insan tarafından okunabilir isme çevirmek zor. Neyse ki, bunun için uygun araçlarımız var. Bu Rengi Adlandır web sitesini kullanıyorum, ancak tercih ettiğiniz herhangi bir aracı kullanabilirsiniz.

Renkleriniz için isimleriniz olduğunda, onlara roller atayabilirsiniz. Hangi rengin birincil olarak hangisinin ikincil olduğunu tanımlamanız gerekir. Renkleriniz için nasıl rol ayarlayacağınızdan emin değilseniz, Bootstrap’ın renk düzeninden ilham alabilirsiniz.

Örnek bir renk ayarı:

Düzleştirilmiş iç içe bildirimler

CSS önişlemcisini kullanmak, araç setinize sadece bazı yararlı fonksiyonlar eklemekle kalmaz, aynı zamanda kod organizasyonunda da yardımcı olur. En iyi örnek, stillerin bildirimi yuvalamasıdır. Sass'ta seçiciyi diğer seçicilere yerleştirmek mümkündür, böylece aralarındaki ilişkinin ne olduğunu görebilirsiniz. Bu gerçekten güçlü bir özellik, bu yüzden oldukça kolay aşırı kullanılabilir.

Size 3 seviyeden daha derine inmemenizi öneririm. Bu kural hem seçicilerin özgüllüğü hem de CSS ön işlemcilerinde bulunan seçiciler için geçerlidir. Bu sınırın ötesine geçmek, yalnızca seçicinin gücünü artırmakla kalmaz, aynı zamanda kodunuzu okumayı zorlaştırabilir.

Aşağıdaki örneğe bakınız:

Ebeveyn referansını aşırı kullanmayın

Sass'ta seçicinin ebeveyni referans almak mümkündür. Yuvalama ile birlikte, ebeveynin seçicisini gerektiren kuralları tanımlayabilirsiniz. Örneğin:

Bazen kullanmak ve yanıltıcı olabilir. İşte o seçicinin kötü kullanımına bir örnek:

Gördüğünüz gibi, ampersand seçici stillerinize gereksiz karmaşıklık ekleyebilir ve kodunuzu okumayı zorlaştırır.

Özellikleri sırayla yaz

Mülklerinizi sıralamak zorunda değilsiniz ama yapmalısınız. Düzgün şekilde sıralanmış özellikler, kod stilinizin tutarlı olduğunu gösterir. Dahası, kodunuzu taramanızı daha kolay hale getirir. Özellik sıralaması açısından tek bir doğru kaynağı yoktur. Bunları alfabetik olarak veya başka bir tercihle sıralayabilirsiniz. SMACSS metodolojisinin formatlama kılavuzunda yer alan biraz değiştirilmiş kuralları kullanıyorum. İşte benim önerdiğim sipariş:

  • Kutu (konum, ekran, genişlik, kenar boşluğu vb.)
  • Metin
  • Arka fon
  • sınır
  • Diğer (Alfabetik olarak)

Sınıfın adlandırma kuralını kullanın

Projeniz büyüdüğünde, stiller oldukça karışık olabilir. Özellikle, mevcut kuralları genişletmeniz gerektiğinde. Maalesef, CSS, ad alanı çakışmasını önleyebilecek yararlı mekanizmalar sağlamamaktadır. Başka bir deyişle, CSS'de yazılan tüm stiller geneldir, bu nedenle, bazı özelliklerin üzerine beklenmedik şekilde yazmanız çok olasıdır.

CSS’in basamaklı yapısı nedeniyle, çok özel seçiciler tanımlamak önemlidir. Bu, seçiciliği yüksek seçiciliği kullanmanız gerektiği anlamına gelmez. Belirli bir öğe için stil eklemek istediğinizde, etiket seçicileri gibi genel seçicilerden kaçınmanız gerekir.

İşte bir örnek:

Umarım, korunabilir stiller yazmak o kadar da zor değildir; popüler sınıf adlandırma kurallarından birini - BEM, OOCSS veya SMACSS kullanabiliriz. Yandex geliştiricileri tarafından oluşturulan çok popüler bir metodoloji olan BEM'i tercih ediyorum. Adı, blok, değiştirici ve eleman kelimelerinin kısaltmasıdır. BEM'e aşina değilseniz, belgelerini okumanızı öneririm.

İşte, örneklememizden sonra:

Açıklayıcı medya sorguları yaz

Medya sorguları, duyarlı web sitesi geliştirmenin en önemli parçasıdır. Onlar sayesinde farklı çözünürlükler için stilleri tanımlayabilir ve kullanıcının cihazına göre düzeni değiştirebiliriz. CSS'de, medya sorguları, kullanıcının tarayıcısına karşı test edilen bir kurallar kümesidir. Yerine getirildiğinde, medya sorgu bloğunda tanımlanan stiller web sitesine uygulanır.

Ortam türlerini ve özelliklerini tanımlayan sorguları kullanarak çeşitli cihazları hedefleyebilirsiniz. Pek çok kuralın birleşimi nedeniyle, medya sorgusu oldukça kolay bir şekilde karmaşık hale gelebilir.

Medya sorgularını geliştirici dostu hale getirmek için, bir değişkeni kurallarına atayabiliriz. Sass'ta enterpolasyon parantezleri # {} kullanarak dizgiyi normal CSS kodu olarak kullanmak mümkündür.

Diğer kurallar için kullanabileceğimiz aynı numara. Karmaşık destek kurallarını tanımlamak için kullanışlı olabilir.

Modüler stiller ekle

CSS bir çok kullanışlı seçiciye sahiptir. Çoğu durumda sınıf seçiciyi veya soydan seçiciyi kullanırsınız. Ancak, modüler stiller yazmak için etkili olan bir başka seçici daha var. Artı seçici olarak da bilinen bitişik kardeş seçicisidir.

Yalnızca bazı öğeler seçicinin öğesinden önce geldiğinde uygulanan stilleri yazmak istediğinizi varsayalım. Örneğin, bir makalenin başlığı olduğunda, makalenin metnine kenar boşluğu ekleyebilirsiniz. İşte nasıl yapabilirsiniz:

Stilleri tanımlamak için çok uygun bir yol ve en sevdiğim şey. Ancak bazı değişimler var. Her şeyden önce, en performanslı seçici değildir. Modülerlikten çok performansı önemsiyorsanız, kullanmamalısınız. İkincisi, kardeş seçiciyi kullanmak özgüllüğü arttırır, bu yüzden stillerini daha sonra yazmak zor olabilir. Sonuçta, öğelerin varlığına dayalı stiller uygulamak istediğinizde onu kullanmaya değer.

daha fazla okuma

Artık okunabilir, bakımı kolay ve modüler stilleri nasıl yazacağınızı biliyorsunuz. Gurur duyacağınız stilleri nasıl yazabileceğiniz konusunda daha fazla tavsiyeye ihtiyacınız varsa, şu makalelere bakın:

  • Landon Schropp Tarafından Emilmeyen Sass Renk Değişkenleri
  • Advanced SCSS veya Stil Sayfalarınızı Bilmediğiniz 16 Harika Şey Jarno Rantanen
  • W3C ile komşu kardeş seçme özellikleri
  • John W. Long tarafından yapılan modüler CSS adlandırma kuralları
  • Sass'ta Duyarlı Web Tasarımı - Mason Wendell
  • John W. Long tarafından bir Sass projesi nasıl yapılandırılır?

Sen onu beğendin? düğmesine dokunun! Teşekkür ederim!

Beni Twitter ve Github'da bulabilirsiniz.