Hoşgeldiniz
Okuma Moduna Geç
26 Haziran 2019 - 00:50
OOCSS Nedir?

OOP kavramından yola çıkarak OO kısaltmasının ilk bakışta Object Oriented kavramını sizlere hatırlattığını umuyorum smiley OOCSS'te tam bu anlama gelerek Object Oriented CSS, bir başka şekliyle Nesne Yönelimli CSS, olarak adlandırılabilir. Peki ya bir statik dil nasıl olurda nesne yönelimli hale gelebilir? Bu konuda gerekli açıklamaları yaptıktan sonra sizleri de kullanmanız açısından bu yönteme davet edeceğim.

2008 yılında Nicole Sullivan tarafından geliştirilmiştir. Buradaki object kavramının tekrarlı yapılar anlamına geldiğini söyleyen Sullivan, tekrar eden yapıları sayfa içerisinde sıfıra indirmeyi hedefleyerek böyle bir kavramı ortaya atmıştır. Buradaki nesne kelimesini de bu tekrar eden yapılara verilen isim olarak ele alabiliriz.

Object Oriented CSS Nedir?

Temelde hepimizin bildiği ve kullandığı CSS'ten hiçbir farkı yoktur. Bu sadece bir düzen yapısı veya uygulamada farklılık olarak nitelendirilebilir. CSS ile ilgilenen herkesin ortak problemlerinden biri sınıflara verilen isimlerdir. Bu isimlendirmelerin düzeni ile ilgili hemen her projede birbirinden farklı çalışmalar yapılırsa, sonradan o projeyi inceleyen kişilerin anlamakta zorluk çekecekleri kesindir. Bu sebeple daha düzenli kod yapıları oluşturmak, okunabilirliği arttırmak ve takım çalışmasına yatkın bir kod ortaya çıkartmak amacıyla geliştirilmiştir. Yani OOCSS, nesneleri stillendirmek ve yeniden kullanılabilirlikte tekrarı engellemek amacıyla ortaya çıkmış bir paradigmadır. Burada nesneden kastedilen sayfa içerisinde bulunan HTML yapılardır.

Temel İlkeleri

1. Separation The Structure From The Skin

Bu kavramı öğrenmeden önce bilmemiz gereken ufak bir ayrım vardır. CSS özellikleri tasarım ve düzen stilleri olarak 2 farklı yapıya ayrılmıştır.

Tasarım Stilleri: background, border, color, font vs.

Düzen Stilleri: width, height, margin, padding vs.

Bu ayrımı yapabildiğimize göre, bu ilkenin de amacı tasarım ve düzen stillerinin birbirinden ayrılması gerektiği yönündedir.

ÖRNEK

 YANLIŞ KULLANIM 

Aşağıdaki gibi bir HTML yapımız olduğunu varsayalım.

<div class="comment">
	<p>Yorum alanı</p>
</div>

Bu yapıya uygun CSS normalde şöyle yazılıyor:

.comment {
	width: 100%;
	height: 64px;
	padding: 5px;
	background-color: #fcfcfc;
	border: 4px solid green;
}

 DOĞRU KULLANIM 

Fakat artık durumu biraz daha değiştirip şöyle yazabiliriz:

<div class="comment comment-design">
	<p>Yorum alanı</p>
</div>

CSS olarak:

.comment {
	width: 100%;
	height: 64px;
	padding: 5px;
}
.comment-design {
	background-color: #fcfcfc;
	border: 4px solid green;
}

Peki neden bunu yapıyoruz?

Aslında baktığımızda daha fazla kod ortaya çıktı gibi gözüküyor. Fakat projeyi bir tık ileriye götürüp benzer yerlerde kullanılması beklenen benzer yapılar oluştuğunu hayal edelim. Örneğin projemizde genel olarak kullandığımız bir border yapısı var. Bu yapıyı her sınıfın içerisine eklemek performansı negatif etkileyeceği gibi fazladan iş yükü olacaktır. Veya bir geçiş efekti hazırladığımızı varsayalım. Bu yapıyı tek tek eklemek yerine sadece o yapı bazında bir class oluşturup kullanmak istediğimiz yerlerde HTML yapımıza dahil edersek daha faydalı olacaktır. Tüm işi CSS ile çözmeye çalışmaktan ziyade işe HTML'i daha fazla katarak ilerleyebiliriz.

2. Separation The Container From The Content

Bu kavram ise artık çocuk seçicileri çok daha az kullanmamızı önermektedir (child-selector). Bunu şöyle bir örnekte inceleyebiliriz.

ÖRNEK

 YANLIŞ KULLANIM 

Aşağıdaki gibi bir HTML yapımız olduğunu düşünelim.

<div class="box">
	<h2>Konu Başlığı</h2>
	<p>Konu içeriği</p>
</div>

Bu yapı normalde şöyle yazılıyordu:

.box {
	width: 200px;
	height: 200px;
	border: 2px solid #ccc;
}
.box h2 {
	color: red;
	font-weight: bold;
}
.box p {
	padding-left: 15px;
	font-weight: italic;
}

 DOĞRU KULLANIM 

OOCSS mantığı ile ilerlersek HTML yapımız:

<div class="box">
	<h2 class="box-title">Konu Başlığı</h2>
	<p class="box-content">Konu içeriği</p>
</div>

Ve CSS yapımız:

.box {
	width: 200px;
	height: 200px;
	border: 2px solid #ccc;
}
h2.box-title {
	color: red;
	font-weight: bold;
}
p.box-content {
	padding-left: 15px;
	font-weight: italic;
}

Peki neden bunu yapıyoruz?

HTML'i çok daha okunabilir hale getiriyoruz. Bu yapı sayesinde az önceki "neden?" sorusunda da olduğu gibi tekrarlı yapıları sıfıra indiriyoruz. Belli bir düzen getirerek bizden sonra kodu inceleyecekler için kodu çok daha okunaklı bir halde bırakıyoruz.

Kişisel Görüşüm

Bu tip yapılar her zaman daha düzgün kod yazmaya, okunaklılığı arttırmaya yaramaktadır. Bunu büyük projelerinizi bir süre sonra kontrol edemez hale gelmenize engel olması amacıyla desteklemekteyim. 1-2 projenizde bu yapıyı kullanmaya çalışın ve hem size hem de projenize etkilerini gözlemleyin.

İyi çalışmalar.

Sponsorlu Bağlantı
Yorumlar
Cengiz
28 Haziran 201900:55
Güzel bir konuya değinmişsin. Bu konuda daha önce bende araştırma yapmıştım ve sonuç olarak benzeri bir yapı ile projelerimi geliştiriyorum. Oldukça faydalı oluyor geri dönüş yaptığımda çok daha rahat anlıyorum neyin ne olduğunu. Bilgiler için tekrar teşekkürler.....
170
Cevapla
1
Yorumu Beğen
0
Yorumu Beğenme
Mert Topuz
28 Haziran 201921:12
Teşekkürler Cengiz, bu tarz yapıları kullanıyor olmana sevindim :) Çalışmalarında başarılar.
0
Yorumu Beğen
0
Yorumu Beğenme
Bir Yorum da Sen Bırak
Adınız ve Soyadınız
Mail Adresiniz
Mail adresinizi yalnızca yönetici görüntüleyebilir.
Web Siteniz
Yorumunuz
Yorumu Gönder