Daha büyük stil sayfaları ve büyük projeler üzerinde çalışmaya başladığınızda, büyük bir CSS dosyasını korumanın zor olabileceğini keşfedeceksiniz. Bu makalede, CSS’nizi kolayca bakımı yapılabilir hale getirmek için en iyi uygulamalara ve bakımın iyileştirilmesine yardımcı olmak için kullanabileceğiniz çözümlerden bazılarına kısa bir göz atacağız.
CSS’nizi düzenli tutmak için ipuçları
Stil sayfalarınızı düzenli tutmanın yolları için bazı genel öneriler.
Projenizin bir kodlama stili kılavuzu var mı?
Mevcut bir proje üzerinde bir ekiple çalışıyorsanız, kontrol edilecek ilk şey, projenin CSS için mevcut bir stil kılavuzuna sahip olup olmadığıdır. Takım stili rehberi her zaman kendi kişisel tercihlerinizi kazanmalıdır. Bir şeyleri yapmanın genellikle doğru ya da yanlış bir yolu yoktur, ancak tutarlılık önemlidir.
Örneğin, MDN kod örnekleri için CSS yönergelerine bakın .
Tutarlı tutun
Projenin kurallarını siz belirlerseniz veya tek başınıza çalışıyorsanız, yapılacak en önemli şey tutarlı davranmaktır. Tutarlılık, sınıflar için aynı adlandırma kurallarını kullanmak, rengi tanımlamak için bir yöntem seçmek veya tutarlı biçimlendirmeyi sürdürmek gibi her türlü yolla uygulanabilir. (Örneğin, kodunuzu girintilemek için sekmeler mi yoksa boşluklar mı kullanacaksınız? Boşluklar varsa, kaç boşluk?)
Her zaman takip ettiğiniz bir dizi kurala sahip olmak, bazı kararlar zaten verilmiş olduğundan, CSS yazarken ihtiyaç duyulan zihinsel yükü azaltır.
Okunabilir CSS’yi biçimlendirme
CSS formatını görmenin birkaç yolu vardır. Bazı geliştiriciler, tüm kuralları şu şekilde tek bir satıra koyar:
.box { background-color: #567895; }
h2 { background-color: black; color: white; }Diğer geliştiriciler her şeyi yeni bir satıra bölmeyi tercih eder:
.box {
background-color: #567895;
}
h2 {
background-color: black;
color: white;
}CSS’inizde hangisini kullandığınızın bir önemi yoktur. Kişisel olarak, her bir özellik ve değer çiftinin yeni bir satırda olmasını daha okunaklı buluyoruz.
CSS’nizi yorumlayın
CSS’nize yorum eklemek, gelecekteki geliştiricilerin CSS dosyanızla çalışmasına yardımcı olur. Aynı zamanda bir süre sonra projeye geri döndüğünüzde size de yardımcı olur.
/* Bu bir yorum
Birden fazla satıra bölünmüş. */İyi bir ipucu, tarama sırasında farklı bölümleri hızlı bir şekilde bulmanıza yardımcı olmak için stil sayfanızda mantıksal bölümler eklemek olacaktır. Hatta CSS’nin o kısmına atlamak için arayabileceğiniz bir karakter bloğu vermektir. Kodda görünmeyecek bir dize kullanırsanız, bunu arayarak bölümden bölüme atlayabilirsiniz – aşağıda || kullandık.
/* || General styles */
...
/* || Typography */
...
/* || Header and Main Navigation */
...
Çoğu kendi kendini açıklayıcı olacağından, CSS’nizdeki her şeyi tek tek yorumlamanıza gerek yoktur. Yorumlamanız gereken şey, bir nedenle belirli bir karar verdiğiniz şeylerdir.
Eski tarayıcı uyumsuzluklarını aşmak için bir CSS özelliğini belirli bir şekilde kullanmış olabilirsiniz, örneğin:
.box {
background-color: red; /* Eski tarayıcılar için ek css*/
background-image: linear-gradient(to right, #ff0000, #aa0000);
}
Belki bir şeyleri yapmak için bir video izlediniz ve CSS çok açıklayıcı veya tanınabilir değil. Bu durumda, videonun URL’sini yorumlara ekleyebilirsiniz. Bir yıl kadar sonra bu projeye geri döndüğünüzde kendinize teşekkür edeceksiniz.
Stil sayfanızda mantıksal bölümler oluşturun
Stil sayfasında ilk önce tüm ortak stillere sahip olmak iyi bir fikirdir. Bu, o öğeyle özel bir şey yapmadığınız sürece genel olarak geçerli olacak tüm stiller anlamına gelir. Genellikle aşağıdakiler için ayarlanmış kurallarınız olur:
bodyph1,h2,h3,h4,h5ulveoltable- Bağlantılar
Stil sayfasının bu bölümünde, sitedeki tür için varsayılan stili sağlıyor, veri tabloları ve listeler için varsayılan bir stil oluşturuyoruz vb.
/* || GENERAL STYLES */
body { ... }
h1, h2, h3, h4 { ... }
ul { ... }
blockquote { ... }
Bu bölümden sonra, birkaç yardımcı sınıf tanımlayabiliriz, örneğin flex öğeler olarak veya başka bir şekilde görüntüleyeceğimiz listeler için varsayılan liste stilini kaldıran bir sınıf. Birçok farklı öğeye uygulamak isteyeceğinizi bildiğiniz birkaç stil seçeneğiniz varsa, bunları bu bölüme koyabilirsiniz.
/* || UTILITIES */
.nobullets {
list-style: none;
margin: 0;
padding: 0;
}
...
Sonra site genelinde kullanılan her şeyi ekleyebiliriz. Bu, temel sayfa düzeni, başlık, gezinme stili vb. gibi şeyler olabilir.
/* || SITEWIDE */
.main-nav { ... }
.logo { ... }
Son olarak, belirli şeyler için bağlam, sayfa ve hatta kullanıldıkları bileşene göre ayrılmış CSS’yi dahil edeceğiz.
/* || STORE PAGES */
.product-listing { ... }
.product-box { ... }
İşleri bu şekilde düzenleyerek, en azından stil sayfasının hangi bölümünde değiştirmek istediğimiz bir şeyi arayacağımız hakkında bir fikrimiz olur.
Aşırı spesifik seçicilerden kaçının
Çok özel seçiciler oluşturursanız, aynı kuralları başka bir öğeye uygulamak için genellikle CSS’nizin parçalarını çoğaltmanız gerektiğini görürsünüz. Örneğin, aşağıdaki gibi main sınıfına sahip bir article öğesi içindeki box sınıfına sahip p öğesine uygulanan bir kural tanımlayabilirsiniz.
article.main p.box {
border: 1px solid #ccc;
}Daha sonra aynı kuralları main dışında bir öğeye veya <p> harici bir şeye uygulamak isterseniz, bu kurallara başka bir seçici eklemeniz veya tamamen yeni bir kural kümesi oluşturmanız gerekir. Bunun yerine, .box kuralınızı herhangi bir öğeye uygulamak için sade bir seçici kullanabilirsiniz:
.box {
border: 1px solid #ccc;
}Daha spesifik bir şey yapmanın mantıklı olduğu zamanlar olacaktır; ancak, bu genellikle olağan uygulamadan ziyade bir istisna durumu için geçerli olacaktır.
Büyük stil sayfalarını birden çok küçük stile ayırın
Sitenin farklı bölümleri için çok farklı stilleriniz olduğu durumlarda, tüm genel kuralları içeren tek bir stil sayfasına ve bu bölümler için gereken belirli kuralları içeren bazı daha küçük stil sayfalarına sahip olmak isteyebilirsiniz. Bir sayfadan birden çok stil sayfasına bağlanabilirsiniz ve daha sonra bağlanan stil sayfalarındaki kurallar, daha önce bağlanan stil sayfalarındaki kurallardan sonra gelirken, kademeli sistemin normal kuralları uygulanır.
Örneğin, sitenin bir parçası olarak, yalnızca mağaza için gerekli olan ürün listelerini ve formları biçimlendirmek için kullanılan çok sayıda CSS içeren bir çevrimiçi mağazamız olabilir. Bu şeylerin farklı bir stil sayfasında olması, yalnızca mağaza sayfalarında bağlantılı olması mantıklı olacaktır.
Bu, CSS’nizi düzenli tutmayı kolaylaştırabilir. Ayrıca, CSS üzerinde birden fazla kişi çalışıyorsa, iki kişinin aynı stil sayfası üzerinde aynı anda çalışması gereken durumlarda çatışmalardan uzak duracağınız anlamına da gelir.
Yardımcı olabilecek diğer araçlar
CSS’nin kendisinde yerleşik organizasyon açısından fazla bir şey bulunmaz; bu nedenle, CSS’nizdeki tutarlılık düzeyi büyük ölçüde size bağlı olacaktır. Bunun yanında, web topluluğu, daha büyük CSS projelerini yönetmenize yardımcı olabilecek çeşitli araçlar ve yaklaşımlar geliştirmiştir. Başkalarıyla çalışırken bu yardımlarla karşılaşmanız muhtemel olduğundan bunlardan bazıları için kısa bir kılavuz ekledik.
CSS metodolojileri
CSS yazmak için kendi kurallarınızı bulmak yerine, topluluk tarafından halihazırda tasarlanmış ve birçok projede test edilmiş yaklaşımlardan birini benimsemekten faydalanabilirsiniz. Bu metodolojiler, esasen CSS’yi yazmak ve düzenlemek için oldukça yapılandırılmış bir yaklaşım benimseyen CSS kodlama kılavuzlarıdır. Tipik olarak, her seçiciyi o proje için özel bir kural kümesine yazıp optimize ettiyseniz, CSS’yi sahip olabileceğinizden daha ayrıntılı bir şekilde oluşturma eğilimindedirler.
Bunlardan birini benimseyerek çok fazla yapı kazanırsınız. Bu sistemlerin birçoğu yaygın olarak kullanıldığından, diğer geliştiricilerin, kendi kişisel metodolojinizi sıfırdan çalışmak zorunda kalmak yerine, kullandığınız yaklaşımı anlamaları ve kendi CSS’lerini aynı şekilde yazabilmeleri daha olasıdır.
OOCSS
Karşılaşacağınız yaklaşımların çoğu, Nicole Sullivan tarafından popüler hale getirilen bir yaklaşım olan Nesne Yönelimli CSS (OOCSS) kavramına bir şeyler borçludur. OOCSS’nin temel fikri, CSS’nizi sitenizde ihtiyacınız olan her yerde kullanılabilecek yeniden kullanılabilir nesnelere ayırmaktır. OOCSS’nin standart örneği, Medya Nesnesi olarak tanımlanan kalıptır. Bu, bir tarafında sabit boyutlu görüntü, video veya başka bir öğe, diğer tarafında ise esnek içerik bulunan bir kalıptır. Yorumlar, listeler vb. için tüm web sitelerinde gördüğümüz bir kalıptır.
Bir OOCSS yaklaşımı izlemiyorsanız, aşağıdaki gibi bir durumla karşılaşabilirsiniz. Örneğin comment sınıfı için bir grup kural oluşturursunuz ve benzer kuralları list-item sınıfı için de yazarsınız. Bazı küçük farklılıklar dışında iki sınıf da aynıdır. Bu iki bileşen arasındaki fark, liste öğesinin bir alt kenarlığa sahip olması ve yorumlardaki resimlerin bir kenarlığa sahip olmasına karşın liste öğesi resimlerinin olmamasıdır.
.comment {
display: grid;
grid-template-columns: 1fr 3fr;
}
.comment img {
border: 1px solid grey;
}
.comment .content {
font-size: .8rem;
}
.list-item {
display: grid;
grid-template-columns: 1fr 3fr;
border-bottom: 1px solid grey;
}
.list-item .content {
font-size: .8rem;
}Aşağıdaki OOCSS’de, bir media sınıfı ile her iki model için de tüm ortak CSS’ye sahip olan bir desen oluşturursunuz – temel bir sınıf. Ardından, bu küçük farklılıklarla başa çıkmak için ek bir sınıf eklersiniz, böylece bu stili belirli şekillerde genişletirsiniz.
.media {
display: grid;
grid-template-columns: 1fr 3fr;
}
.media .content {
font-size: .8rem;
}
.comment img {
border: 1px solid grey;
}
.list-item {
border-bottom: 1px solid grey;
} HTML’inizde ise hem media ve comment sınıflarını uygularsınız:
<div class="media comment">
<img />
<div class="content"></div>
</div>
Liste öğesinde ise media ve list-item uygularsınız:
<ul>
<li class="media list-item">
<img />
<div class="content"></div>
</li>
</ul>Nicole Sullivan’ın bu yaklaşımı bugün bir OOCSS yaklaşımını katı bir şekilde takip etmeyen kişilerin bile genellikle CSS’yi bu şekilde yeniden kullanacakları anlamına geliyor – genel olarak olaylara yaklaşmanın iyi bir yolu olarak anlayışımıza girdi.
BEM
BEM, Blok Eleman Değiştirici anlamına gelir. BEM’de bloklar, düğme, menü veya logo gibi bağımsız varlıklardır. Bir öğe, içinde bulunduğu bloğa bağlı bir liste öğesi veya başlık gibidir. Değiştirici, stili veya davranışı değiştiren bir blok veya öğe üzerindeki bir araçtır. CSS sınıflarında tire ve alt çizgilerin yoğun kullanımı nedeniyle BEM kullanan kodu tanıyabileceksiniz:
<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input
class="form__submit form__submit--disabled"
type="submit" />
</form>Ek sınıflar, OOCSS örneğinde kullanılanlara benzer; ancak, BEM’in katı adlandırma kurallarını kullanırlar.
BEM, daha büyük web projelerinde yaygın olarak kullanılmaktadır ve birçok kişi CSS’lerini bu şekilde yazar.
Bu sistem hakkında daha fazlasını BEM 101 CSS Hileleri’nde okuyabilirsiniz.
Diğer yaygın sistemler
Kullanımda olan bu sistemlerden çok sayıda vardır. Diğer popüler yaklaşımlar şunları içerir: CSS için Ölçeklenebilir ve Modüler Mimari (SMACSS) (Jonathan Snook tarafından yaratıldı), ITCSS (Harry Roberts’tan) ve Atomik CSS (ACSS) (orijinal olarak Yahoo! tarafından yaratılmıştır). Bu yaklaşımlardan birini kullanan bir projeyle karşılaşırsanız, aynı tarzda nasıl kod yazılacağını anlamanıza yardımcı olacak birçok makale ve kılavuz bulabilirsiniz.
Böyle bir sistemi kullanmanın dezavantajı iseözellikle küçük projeler için aşırı karmaşık görünebilmeleridir.
CSS için sistemler oluşturun
CSS’yi düzenlemenin başka bir yolu da, CSS yazarken biraz daha programlı bir yaklaşım benimsemenizi sağlayan, ön uç geliştiriciler için mevcut olan bazı araçlardan yararlanmaktır. Ön işlemciler ve son işlemciler olarak adlandırdığımız bir dizi araç bulunur. Bir ön işlemci ham dosyalarınız üzerinde çalışır ve onları bir stil sayfasına dönüştürürken, bir son işlemci bitmiş stil sayfanızı alır ve ona başka şeyler yapar – belki de daha hızlı yüklenmesi için optimize eder.
Bu araçlardan herhangi birinin kullanılması, geliştirme ortamınızın ön ve son işlemeyi yapan komut dosyalarını çalıştırabilmesini gerektirir. Birçok kod düzenleyici bunu sizin için yapabilir veya yardımcı olması için komut satırı araçları yükleyebilirsiniz.
En popüler ön işlemci Sass‘dır. Bu bir Sass makalesi değil, bu yüzden çok detaya giremeyeceğiz. Ancak diğer Sass özelliklerinden hiçbirini kullanmasanız bile organizasyon açısından yararlı olan birkaç şeyi kısaca açıklayacağız. Sass hakkında daha çok şey öğrenmek istiyorsanız, Temel bilgiler makalesine göz atabilirsiniz.
değişkenler tanımlama
CSS artık yerel özel özelliklere sahip olduğundan bu özellik giderek daha az önemli hale geliyor. Ancak, Sass’ı kullanmanızın nedenlerinden biri, bir projede kullanılan tüm renkleri ve yazı tiplerini ayar olarak tanımlayabilmek ve ardından bu değişkeni proje etrafında kullanabilmektir. Bu, mavinin yanlış tonunu kullandığınızı fark ederseniz, sadece bir yerdeki tanımı değiştirmeniz gerektiği anlamına gelir.
Aşağıdaki ilk satırda olduğu gibi $base-color adında bir değişken yarattıysak, bunu stil sayfasında o rengi gerektiren herhangi bir yerde kullanabiliriz.
$base-color: #c6538c;
.alert {
border: 1px solid $base-color;
}CSS derlendikten sonra, son stil sayfasında aşağıdaki CSS’yi elde edersiniz.
.alert {
border: 1px solid #c6538c;
}Bileşen stil sayfalarını derleme
Yukarıda, CSS’yi düzenlemenin bir yolunun, stil sayfalarını daha küçük stil sayfalarına bölmek olduğundan bahsetmiştik. Sass’ı kullanırken bunu başka bir düzeye taşıyabilir ve çok sayıda çok küçük stil sayfasına sahip olabilirsiniz – hatta her bileşen için bile ayrı bir stil sayfasına sahip olabilirsiniz. Sass’taki (kısmi bölümler) dahil etme işlevselliği kullanarak, bunların tümü, web sitenizde az sayıda stil sayfasında bir araya getirilebilir.
Not : Sass’ı denemenin basit bir yolu CodePen kullanmaktır.
Optimizasyon
Örneğin, çok sayıda ek yorum ve boşluk nedeniyle stil sayfalarınızın boyutunun artacağından endişeleniyorsanız, sitenize ekleyeceğiniz stil sürümünde gereksiz her şeyi çıkararak CSS’yi optimize edebilirsiniz. Bunu yapmak için bir çözüm örneği cssnano olabilir.
Son söz
Bu, CSS Öğrenme Kılavuzumuzun son bölümüyüdü ve gördüğünüz gibi, CSS’yi keşfetmenize bu noktadan devam etmenin birçok yolu var. Buraya kadar anlatılanlar size temel bir CSS bilgisi verdi. Artık daha derinlere dalabilirsiniz.