SMACSS Nedir?
SMACSS(Scable and Modular Architecture for CSS), bir css metodolojisidir. 2011 yılında Jonathan Snook tarafından geliştirildi.
Smacss tüm css kodları tek bir style dosyasının üzerinden değil de 5 ayrı kategorize ettiği dosyalar içine yazılması gerektiğini söylüyor. Bu kategorizasyonun amacı, daha az kod tekrarlama, daha tutarlı bir deneyim ve daha kolay bakımdır.
Bu kategoriler ise şöyledir: “base, layout, module, state ve theme”.
- Base : Basit Html taglarin stillerinden oluşur. <body> ,<p>, <a> gibi.
- Layout: Blog gibi özel layoutların stillerinden oluşur. Blog sitelerinin submenu gibi.
- Module: Tekrar kullanılabilecek tasarımları kapsıyor. form, table, list gibi.
- State : Elementlerin durumlarının stillerini kapsar. Active, disable, hidden gibi.
- Theme: Sayfanın görsel olarak stillerini barındırır. Color, font, background gibi.
Jonathan smacss ile çalışırken bir adlandırma kuralını öneriyor. Her kategori için bu kurallar şöyledir :
- Base için herhangi bir kural yoktur.
- Layout: “l-” ya da “layout-” ön eki eklemek.
- Module: Modul için ön ek eklemek yerine direkt modül adı kullanılır. (.login)
- State: “is-” ön eki kullanılır. is-active , is-disable gibi.
Şimdi tek sayfalık projemiz olduğunu düşünün ve bu index.html sayfamız . Smacss kategorilerini bu projenin stil dosyaları üzerinden anlatacağım. Smacss 5 kategoriden oluştuğu için 5 ayrı stil dosyamız olacak ve her birinin ismi o kategorinin ismini alacak.
Base Rules
Base temel stil sayfasından oluşuyor. Html temel taglerinin stillendirilmesi bu dosya üzerinden yapılır. (body, h1, ul gibi). Class ya da id’ler bu dosyaya dahil değildirler. Base stilleri temel olarak link stilleri, font stilleri, body background gibi öğelerden oluşuyor.
⚠️ Reset.css gibi dosyalarınız base’e dahil edebilirsiniz.
/* base.css | Örnek Base Styles */body{
margin: 0;
padding: 0;
}a{
color: #029;
}a:hover{
color: #03F;
}
Layout Rules
Web sayfalarında header, footer gibi büyük bileşenler yer aldığı gibi navigation, log-in gibi küçük bileşenler de yer alır. Küçük bileşenler için Module kullanılır.
Layout kurallarında sayfadaki büyük bileşenlerin stillendirilmesi yapılır. Bunları yaparken sayfa yapısını düşünerek tek kullanımlar için ID, çoklu kullanım için ise CLASS önerilir.
/* layout.css | Örnek LayoutStyle */#sidebar{
width: 20%;
}.l-fixed #sidebar{
width: 250px;
}
Module Rules
Yukarıda bahsettiğim gibi sayfadaki küçük bileşenler için module kullanılır. Moduller tekrar kullanmak içindir yani web sayfasının farklı bölümlerinde tekrar kullanılacaktır. İsimlendirme yaparken projenizin karmaşıklığına göre hareket edebilirsiniz ister bir class ismiyle başlayıp sonraki seçici ile kullanabilirsiniz isterseniz de onu kapsayacak bir class ismi de kullanabilrisiniz.
/* module.css | Örnek Module Style */.content{
width: 100%;
}.content > h3{
color; #ccc;
}/* ya da */.content-title{
color: #ccc;
}
State Rules
State Kuralları sayfanın farklı ekranlarda nasıl gözükeceği ile ilgili ayarlamaların yapıldığı yerdir. Ve değişikler JavaScript ile yapılır. Ayrıca stilleri kodlarken gerekirse !important kullanmaktan çekinmeyin.
/* state.css | Örnek Base Style */.is-error{
border: 1px solid red;
}
Theme Rules
Theme Kuralları her projede kullanılmaz o yüzden ekstra bir boş theme.css yapmanıza gerek yoktur. Tema kuralları, bir sitedeki renkleri veya tipografiyi tanımlar ve temaları kendi stil setlerine ayırmak, bunların daha kolay değiştirilebilmesini sağlar.
/* modules.css */
.mod {
border: 1px solid;
}/* theme.css */
.mod {
border-color: blue;
}
smacss website : https://smacss.com/
Diğer Css Metodolojileri hakkında bilgi almak isterseniz aşağıdaki linkleri tıklayın.
