OOCSS چیست؟

حتما با واژه و روش برنامه نویسی شی گرایی در زبان های برنامه نویسی آشنا هستید، حالا  اگر بگوییم روش شی گرایی در نوشتن کدهای CSS هم وجود دارد، واکنش شما چیست؟ OOCSS در واقع مخفف Object Oriented CSS است. واژه شی گرایی در CSS ممکن است واژه جدیدی باشد که البته اگر سال 2009 را جدید بدانیم زیرا واژه OOCSS در سال 2009 توسط Nicole Sullivan ایجاد گردید، ممکن است خود شما در حال استفاده از آن باشید.

برای آشنایی بیشتر در ادامه مطلب همراه ما باشید…

OOCSS چیست؟

خیلی سادست. به عبارتی ساده، استفاده کردن از کلاس ها در CSS و نوشتن کدهای CSS به صورت ماژولار OOCSS است. برای مثال، شما دو عنصر اصلی (wrapper) در صفحه خود دارید و به هر کدام از آنها یک id داده اید و در قسمت CSS به صورت جداگانه برای هر کدام از آنها کدنویسی کرده اید در حالی که بین این دو عنصر کدهای مشترک زیادی وجود دارد و شما میتوانستید با استفاده از کلاس ها میزان کدهای خود را کمتر بکنید.

اما تنها مزیت آن، کم شدن تعداد خط، کدها نیست. این نوع روش دارای سرعت بیشتری در فهم کدها دارد. و همچنین شما میتوانید در HTML، عناصر جدیدی اضافه بکنید بدون اینکه حتی یک خط کد به CSS خودتان اضافه بکنید.

کد اچ تی ام ال :

<aside>
  <h1>Latest News</h1>
  <ul>
    <li>
      <h3><a href="”#”">Lorem Ipsum Dolor</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </li>
    <li>
      <h3><a href="”#”">Lorem Ipsum Dolor</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </li>
    <li>
      <h3><a href="”#”">Lorem Ipsum Dolor</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </li>
  </ul>
</aside>

کد Css

aside {
  float: right;
  width: 15em;
  padding: 2em;
}
 
aside h1 {
  margin: 0;
  font-size: 1.25em;
  border-bottom: 1px dashed #ccc;
}
 
aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
 
aside ul li {
  margin: 1em 0;
  padding-bottom: .5em;
  border-bottom: 1px dashed #ccc;
}
 
aside h3 {
  margin: 0;
  font-size: 1em;
}
 
aside h3 a {
  color: #000;
  text-decoration: none;
}
 
aside h3 a:hover {
  color: #1c86a1;
}
 
aside p {
  margin: .5em 0;
  font-size: .938em;
  line-height: 1.188em;
}

در کدهای بالا میبینید که ما هیچ استفاده ای از کلاس ها نکردیم و به صورت مشخص برای هر عنصر کدنویسی کردیم. این روش میزان کدهای مشترک CSS را زیاد میکند و همچنین در پروژه های بزرگتر خیلی مشکل ساز است.

حالا همان مثال بالا را به روش OOCSS مینویسیم.

کد اچ تی ام ال:

<aside class="cont-right">
  <h1 class="section-heading no-margin separated">Latest News</h1>
  <ul class="item-list no-margin">
    <li class="item-list--item separated">
      <h3 class="area-heading no-margin"><a href="”#”">Lorem Ipsum Dolor</a></h3>
      <p class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </li>
    <li class="item-list--item separated">
      <h3 class="area-heading no-margin"><a href="”#”">Lorem Ipsum Dolor</a></h3>
      <p class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </li>
    <li class="item-list--item separated">
      <h3 class="area-heading no-margin"><a href="”#”">Lorem Ipsum Dolor</a></h3>
      <p class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </li>
  </ul>
</aside>

کد سی اس اس با شی گرائی:

.cont-right {
  float: right;
  width: 15em;
  padding: 2em;
}
 
.section-heading {
  font-size: 1.25em;
}
 
.separated {
  border-bottom: 1px dashed #ccc;
}
 
.no-margin {
  margin: 0;
}
 
.item-list {
  padding: 0;
  list-style: none;
}
 
.item-list--item {
  margin: 1em 0;
  padding-bottom: .5em;
}
 
.area-heading {
  font-size: 1em;
}
 
.area-heading a {
  color: #000;
  text-decoration: none;
}
 
.area-heading a:hover {
  color: #1c86a1;
}
 
.item-content {
  margin: .5em 0;
  font-size: .938em;
  line-height: 1.188em;
}

ممکن است که قسمت HTML کمی شلوغ شده باشد اما کدهای CSS شما خیلی بهتر از قبل شده است.

آیا شما تا به حال از OOCSS استفاده میکردید؟