Sass Stil Rehberi: Daha İyi CSS Kodu Nasıl Yazılır Üzerine Bir Sass Eğitimi

İyi ölçeklenecek tutarlı ve okunabilir CSS yazmak zorlu bir süreçtir. Özellikle stil sayfaları daha büyük, daha karmaşık ve bakımı daha zor hale geldiğinde. Geliştiricilerin daha iyi CSS yazmak için kullanabileceği araçlardan biri ön işlemcilerdir. Önişlemci, bir tür veriyi alıp başka bir veri türüne dönüştüren bir programdır ve bizim durumumuzda CSS ön işlemcileri, CSS'ye derlenen ön işleme dilleridir. Ön uç geliştiricilerin önerdiği ve kullandığı birçok CSS ön işlemcisi var, ancak bu makalede Sass'a odaklanacağız. Sass'ın neler sunabileceğini, diğer CSS önişlemcilerine göre neden tercih edilebilir bir seçim olduğunu ve onu en iyi şekilde kullanmaya nasıl başlayacağınızı görelim.

Sass Nedir ve Neden Kullanmalısınız?

Sass'ın ne olduğunu bilmeyenleriniz için en iyi başlangıç ​​noktası resmi Sass web sayfasını ziyaret etmektir. Sass, Sözdizimsel Olarak Müthiş Stil Sayfalarının kısaltmasıdır ve temel dile güç ve zarafet katan CSS'nin bir uzantısıdır.

Sass, birçok güçlü özelliğe sahip bir CSS ön işlemcisidir. En dikkate değer özellikler değişkenler, uzantılar ve karışımlardır.

Değişkenler, renkler veya yaygın olarak kullanılan diğer değerler gibi daha sonra yeniden kullanılabilecek bilgileri depolar. Genişletmeler, kurallar için mirasa izin veren "sınıflar" oluşturmanıza yardımcı olur. Mixins, “fonksiyon” gibi düşünebilirsiniz. Sass ayrıca diğer önişlemcilere kıyasla mantık ifadelerinin (koşullar ve döngüler) kullanımı, özel işlevler, Compas gibi diğer kitaplıklarla entegrasyon ve çok daha fazlası gibi başka şaşırtıcı özelliklere de sahiptir. Bu özellikler tek başına sizin ve ekibinizin daha üretken olmanıza ve sonunda daha iyi CSS yazmanıza yardımcı olabilir.

Neden Bir CSS Stil Kılavuzuna İhtiyacınız Var?

Ne yazık ki, ön işlemciler bile her şeyi düzeltemez ve iyi CSS kodu yazmanıza yardımcı olamaz. Her geliştiricinin karşılaştığı sorun, mevcut web uygulamalarının giderek daha büyük hale gelmesidir. Bu nedenle kodun ölçeklenebilir ve okunabilir olması ve spagetti kodundan ve kullanılmayan satırlarından kaçınması gerekir. Bahsedilen sorunlardan kaçınmak için ekibiniz için günlük işlerde bir çeşit standarda ihtiyaç vardır. Spagetti kodu nedir ve nasıl olur? Spagetti kodu, kötü, yavaş, tekrarlayan ve okunamayan kodun adıdır. Bir ekip, tanımlanmış yönergeler veya standartlar olmadan büyük uygulamalar yazdığında, her geliştirici neye ihtiyaç duyduğunu ve nasıl istediğini yazar. Ayrıca geliştiriciler çok sayıda hata düzeltmesi, düzeltme ve yama yazarken, sorunu çözecek ancak kodu en iyi şekilde yazmak için zamanları olmayan kodlar yazmaya eğilimlidirler. Bu durumlarda, uygulamanın herhangi bir sektöründe artık kullanılmayan çok sayıda CSS satırı ile sonuçlanmak çok olağandır. Geliştiricilerin kodu temizlemek için yeterli zamanları yok ve düzeltmeyi olabildiğince çabuk yayınlamak zorunda kalıyorlar. Yinelenen başka bir durum da, bozuk şeyleri hızlı bir şekilde düzeltmek için geliştiricilerin çok fazla !important kullanmasıdır, bu da bakımı zor olan çok sahte kodlarla sonuçlanır, birçok beklenmedik davranışa neden olur ve daha sonra yeniden düzenlenmesi gerekir. Daha önce de belirtildiği gibi, kod büyüdükçe durum daha da kötüleşir.

Bu makalenin amacı, daha iyi bir Sass yazmak için kuralları, ipuçlarını ve en iyi uygulamaları paylaşmaktır. Bu Sass ipuçlarını ve en iyi uygulamaları bir araya getirmek, Sass stil kılavuzu olarak kullanılabilir. Bu stil kılavuzu, geliştiricilerin yukarıda belirtilen durumlardan kaçınmasına yardımcı olmalıdır. Kurallar, daha kolay referans sağlamak için mantıksal bölümlere ayrılmıştır, ancak sonunda hepsini benimsemeli ve izlemelisiniz. Ya da en azından çoğu.

Stil rehberi

Bu stil kılavuzundaki kurallar ve en iyi uygulamalar, birçok ekiple çalışma deneyimine dayalı olarak benimsenmiştir. Bazıları yanılma yoluyla denemeden gelir ve diğerleri BEM gibi bazı popüler yaklaşımlardan ilham alır. Bazı kuralların neden ve nasıl oluşturuldukları konusunda belirli bir sebep yoktur. Bazen tek sebep olarak geçmiş deneyime sahip olmak yeterlidir. Örneğin, kodun okunabilir olduğundan emin olmak için tüm geliştiricilerin kodu aynı şekilde yazması önemlidir, bu nedenle parantezler arasında boşluk bırakmama kuralı vardır. Parantezler arasındaki boşluğu dahil etmenin daha iyi olup olmadığını tartışabiliriz. Parantezler arasında boşluk olduğunda daha iyi göründüğünü düşünüyorsanız, bu stil kılavuzunu ve kurallarını tercihlerinize göre ayarlayın. Sonuç olarak stil rehberinin temel amacı kuralları tanımlamak ve geliştirme sürecini daha standart hale getirmektir.

Genel CSS Kuralları

Genel kurallara her zaman uyulmalıdır. Çoğunlukla, kodun tutarlılığını ve okunabilirliğini sağlamak için Sass kodunun nasıl biçimlendirilmesi gerektiğine odaklanırlar:

• Girinti için sekmeler yerine boşluklar kullanın. En iyi uygulama 2 boşluk kullanmaktır. Bu seçenekle kendi kutsal savaşınızı yürütebilir ve kendi kuralınızı tanımlayabilir ve sekmeleri, boşlukları veya size en uygun olanı kullanabilirsiniz. Sadece bir kural tanımlamak ve bu kuralı tutarlı olurken takip etmek önemlidir.
• Her ifadenin arasına boş bir satır ekleyin. Bu, kodu daha insan tarafından okunabilir hale getirir ve kod insanlar tarafından yazılır, değil mi?
• Bunun gibi satır başına bir seçici kullanın:

 selector1, selector2 { }

• Parantezler arasında boşluk bırakmayın.

 selector { @include mixin1($size: 4, $color: red); }

• Dizeleri ve URL'leri içine almak için tek tırnak kullanın:

 selector { font-family: 'Roboto', serif; }

• Tüm kuralları, önce boşluk bırakmadan noktalı virgülle sonlandırın:

 selector { margin: 10px; }

Seçiciler için Kurallar

Ardından, seçicilerle uğraşırken kullanılacak bir dizi kural izliyoruz:

• Kimlik seçicileri kullanmaktan kaçının. Kimlikler çok spesifiktir ve çoğunlukla JavaScript eylemleri için kullanılır.
• Önemsiz !important Bu kuralı kullanmanız gerekiyorsa, bu, genel olarak CSS kurallarınızda bir sorun olduğu ve CSS'nizin iyi yapılandırılmadığı anlamına gelir. Birçok !important kuralına sahip CSS, kolayca kötüye kullanılabilir ve sonunda dağınık ve bakımı zor CSS koduyla sonuçlanır.
• Çocuk seçiciyi kullanmayın. Bu kural, ID ile aynı mantığı paylaşır. Alt seçiciler çok spesifiktir ve HTML yapınızla sıkı bir şekilde bağlantılıdır.

Sass Kurallarınızı Düzenli Tutun

Kodda tutarlılığı korumak önemlidir. Kurallardan biri, kuralların sırasını korumanız gerektiğidir. Bu şekilde diğer geliştiriciler kodu çok daha fazla anlayarak okuyabilir ve yollarını bulmak için daha az zaman harcarlar. İşte önerilen sipariş:

1. Önce @extend kullanın. Bu, ilk başta bu sınıfın kuralları başka bir yerden devraldığını bilmenizi sağlar.
2. Sonraki @include kullanın. Karışımlarınızın ve işlevlerin en üstte olması güzeldir ve ayrıca (gerekirse) neyin üzerine yazacağınızı bilmenizi sağlar.
3. Artık normal CSS sınıfınızı veya öğe kurallarınızı yazabilirsiniz.
4. İç içe geçmiş sözde sınıfları ve sözde öğeleri diğer öğelerin önüne yerleştirin.
5. Son olarak, aşağıdaki örnekte olduğu gibi diğer iç içe seçicileri yazın:

 .homepage { @extend page; @include border-radius(5px); margin-left: 5px; &:after{ content: ''; } a { } ul { } }

Bazı adlandırma kuralları

Stil kitabının adlandırma kuralları bölümü, geliştiriciler arasında popüler hale gelen mevcut iki BEM ve SMACSS adlandırma kuralına dayanmaktadır. BEM, Blok, Eleman, Değiştirici anlamına gelir. YANDEX ekibi tarafından geliştirildi ve BEM'in arkasındaki fikir, geliştiricilerin projede HTML ve CSS arasındaki ilişkiyi anlamalarına yardımcı olmaktı. SMACSS ise CSS için Ölçeklenebilir ve Modüler Mimari anlamına gelir. Sürdürülebilirliği sağlamak için CSS'yi yapılandırmak için bir kılavuzdur.

Onlardan esinlenerek, adlandırma kurallarımız aşağıdaki gibidir:

• Her öğe türü için önek kullanın. Bloklarınızı önekleyin, örneğin: düzenler ( l- ), modüller ( m- ) ve durumlar ( is- ).
• Her blok için alt öğeler için iki alt çizgi kullanın:

 .m-tab__icon {}

• Her blok için değiştiriciler için iki tire kullanın:

 .m-tab--borderless {}

Değişkenler

Değişkenleri kullanın. Renkler gibi daha genel ve global değişkenlerle başlayın ve onlar için ayrı bir dosya oluşturun _colors.scss . Stil sayfasında bir değeri birden çok kez tekrar ettiğinizi fark ederseniz, gidin ve o değer için yeni bir değişken oluşturun. Lütfen KURU. Bu değeri değiştirmek istediğinizde ve sadece bir yerde değiştirmeniz gerektiğinde minnettar olacaksınız.

Ayrıca değişkenlerinizi adlandırmak için kısa çizgi kullanın:

 $red : #f44336; $secondary-red :#ebccd1;

Medya sorguları

Sass ile medya sorgularınızı element sorguları olarak yazabilirsiniz. Geliştiricilerin çoğu medya sorgularını ayrı bir dosyaya veya kurallarımızın altına yazar, ancak bu önerilmez. Sass ile medya sorgularını iç içe geçirerek aşağıdaki örnek gibi şeyler yazabilirsiniz:

 // ScSS .m-block { &:after { @include breakpoint(tablet){ content: ''; width: 100%; } } }

Bu, şöyle bir CSS oluşturur:

 // Generated CSS @media screen and (min-width: 767px) { .m-block:after { content: ''; width: 100%; } }

Bu iç içe medya sorguları kuralları, adlandırılmış medya sorgularının kullanıldığı Sass snippet'inde görebileceğiniz gibi, hangi kuralların üzerine yazdığınızı çok net bir şekilde bilmenizi sağlar.

Adlandırılmış medya sorguları oluşturmak için karışımınızı şu şekilde oluşturun:

 @mixin breakpoint($point) { @if $point == tablet { @media (min-width: 768px) and (max-width: 1024px) { @content; } } @else if $point == phone { @media (max-width: 767px) { @content; } } @else if $point == desktop { @media (min-width: 1025px) { @content; } } }

Medya sorgularını adlandırma hakkında daha fazla bilgiyi aşağıdaki makalelerde bulabilirsiniz: Medya Sorgularını Adlandırma ve Sass ile Daha İyi Medya Sorguları Yazma.

Diğer Hususlar

Sonunda, burada da aklınızda tutmanız ve izlemeniz gereken diğer bazı hususlar var:

• Asla satıcı öneklerini yazmayın. Bunun yerine otomatik ön ek kullanın.
• İç içe kurallarda en fazla üç derinlik düzeyi kullanın. Üçten fazla iç içe seviye ile kodun okunması zor olacak ve belki de berbat bir seçici yazıyorsunuz. Sonunda, HTML'nizle birleştirmek için CSS kodu yazıyorsunuz.

 .class1 { .class2 { li { //last rules } } }

• 50 satırdan fazla iç içe kod yazmayın: Ya da daha iyisi, X satırdan fazla iç içe kod yazmayın. Kendi X'inizi kurun, ancak 50 iyi bir limit gibi görünüyor. Bu sınırı geçerseniz, kod bloğu metin düzenleyici pencerenize sığmayabilir.
• Tüm bloklarınızı, kısmi parçalarınızı ve yapılandırmalarınızı içe aktaracağınız bir ana dosya yazın.
• Önce satıcı ve global bağımlılıkları, ardından yazılan bağımlılıkları, ardından mizanpajları, kalıpları ve son olarak da parçaları ve blokları içe aktarın. Bu, karışık içe aktarma ve kuralların üzerine yazılmasını önlemek için önemlidir, çünkü satıcı ve genel kurallar bizim tarafımızdan yönetilemez.
• Utangaç olmayın ve kodunuzu mümkün olduğu kadar çok dosyaya bölün.

Çözüm

Bu stil kılavuzunun arkasındaki fikir, Sass kodunuzu yazma şeklinizi nasıl iyileştireceğiniz konusunda size bazı tavsiyelerde bulunmaktır. Sass kullanmıyor olsanız bile, Vanilla CSS veya başka bir ön işlemci kullanıyorsanız, bu stil kılavuzunda sağlanan ipuçları ve kuralların da geçerli olduğunu ve izlemeniz tavsiye edildiğini unutmayın. Yine, kurallardan herhangi birine katılmıyorsanız, kuralı kendi düşünce tarzınıza uyacak şekilde değiştirin. Sonunda, bu stil kılavuzunu uyarlamak, başka bir stil kılavuzu kullanmak veya tamamen yeni bir tane oluşturmak size ve ekibinize kalmış. Sadece kılavuzu tanımlayın ve harika bir kod yazmaya başlayın.