OOCSS Nedir ?

OOCSS (Object Oriented CSS), bir css metodolojisidir. Nicole Sullivan tarafından 2008 yılında geliştirilmiştir.

Object Oriented ismi javascript, ruby gibi programlama dillerinde kullanılan uygulamalardan gelmektedir. Nicole Sullivan ‘object’ kavramını kendini tekrar eden yapılar olarak tanımlıyor.

OOCSS’in odak noktası, sayfa öğelerinde tekrar edilen durumları nesne olarak ele almak ve gerektiğinde onu kullanmaktır.

OOCSS’in 2 temel prensibi bulunmaktadır.Bunlar:

• Separation the structure from the skin
• Separation the container from the content

Şimdi bunları açıklayarak anlatmaya çalışacağım.

Separation The Structure From The Skin

Düzen stillerinin ve tasarım stillerinin birbirinden ayrılması demektir. Düzen stilleri derken “width, height, padding, margin , position” gibi propertyleri, Tasarım stilleri derken “border, color, font, background” gibi propertyleri kastetmektedir.

Küçük bir örnekle nasıl kullanıldığını göstereyim.

/* kötü kullanım */
.box-1{
   width: 100px;
   height: 100x;
   border: 1px solid #ccc;
   border-radius: 5px;
   color: #ccc;
}
.box-2{
   width: 200px;
   height: 200x;
   border: 1px solid #ccc;
   border-radius: 5px;
   color: #ccc;
}
/* doğru kullanım */
.box-1{
   width: 100px;
   height: 100x;
}
.box-2{
   width: 200px;
   height: 200x;
}
.box-border{
   border: 1px solid #ccc;
   border-radius: 5px;
   color: #ccc;
}
<!-- HTML -->
<div class=”box-1 box-border”> Lorem ipsum </div>
<div class=”box-2 box-border”> Lorem ipsum </div>

Separation The Container From The Content

Bu prensip child-selector (çocuk seçici) daha az kullanılması gerektiği anlamına gelir.

<!-- HTML  -->
<div class=”sidebar”>
   <h2 class=”sidebar-title”> . . . </h2>
      . . .
      . . .
</div>

/* OOCSS */
.sidebar{
   . . .
}
h2.sidebar-title{
   . . .
}
/* OOCSS Kullanılmadan */
.sidebar{
   . . .
}
.sidebar h2{
   . . .
}

h2 elementinin birkaç yerde kullanılabileceği durumunda stillendirmeyi child-selector kullanarak değil de bir class vererek kullanmak daha doğru olacaktır.

OOCSS Kullanmak…

• Proje büyüdükçe css de büyür ve tarayıcıların indireceği css dosyası da olması gerekenden fazla büyür bu da site hızı gibi birçok noktayı olumsuz etkiler. OOCSS ile kod tekrarı azalacağı için css dosyanızın büyümesini kontrol altına almış olursunuz.
• Diğer geliştiriciler css’inizi gördüğünde yapısını kolayca anlar. Bu da kolay okunabilir olmasından kaynaklanıyor.
• Korunabilir ve ölçeklenebilir olduğu için yeniden kullanılabilirliği sağlar.
• OOCSS’te parçalar CSS’de kodlanıp ve HTML’de genişletiliyor.
• Sürdürülebilirdir.

oocss website : http://oocss.org/

Diğer Css Metodolojileri hakkında bilgi almak isterseniz aşağıdaki linkleri tıklayın.

BEM | SMACSS