24
تشکر

OOCSS چیست؟

OOCSS

OOCSS

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

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

OOCSS چیست؟

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

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

کد زیر را در نظر بگیرید. مثال زیر استفاده نکردن از OOCSS است.

<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>
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 استفاده میکردید؟

  • MND می‌گه:

    خیلی جالبه من خودم قبلا این رو فهمیده بودم که استفاده از کلاس تو css یه جورایی شی گراست!

  • از اسم عجیب و غریبش فکردم چیز جدید و پیچیده ایه ولی ظاهرا خیلی وقته ازش استفاده می کنم

  • همایون می‌گه:

    من از این روش استفاده می کردم ولی تا حالا اسمش رو نمیدونستم oocss جالب بود البته اسمش

    درباره نام کلاسها هم من بیشتر از یک حرف و بقیه عدد استفاده میکنم که حروف نشان دهنده قسمت مورد نظر هستش و عدد هم تصادفی انتخاب میکنم اینجوری اسم کلاسها هم نامفهوم میشه ولی حجم کمتری رو میگیره مشکل زمان طراحی هستش که برای این مشکل هم دارم اول همه اسم ها رو به طور کامل مینویسم بعد با یه برنامه اسم کلاس ها رو با اسم های کوچیک جایگزین میکنم

  • محمد می‌گه:

    ممنون از شما. جالب بود
    من بای دیفالت اینطوری کد میزنم که!


  • نظرات این مطلب بسته است.