خوش آمدید

گروه بندی انتخابگرها به این معنی است که اگر برای دو یا چند انتخابگر استایل های یکسان وجود دارند می توان آن انتخابگرها را گروه بندی کرد تا از نوشتن کد تکراری جلوگیری شود.

ادامه مطلب

 

کد زیر را در نظر بگیرید:

 

.info {
  display: block;
  margin: 32px 16px;
  padding: 16px;
  text-align: center;
  background-color: lightblue;
}

.success {
  display: block;
  margin: 32px 16px;
  padding: 16px;
  text-align: center;
  background-color: lightgreen; 
}

.error {
  display: block;
  margin: 32px 16px;
  padding: 16px;
  text-align: center;
  background-color: red;
}

 

همانطور که مشاهده می کنید تکه کد زیر در سه دستور بالا تکرار شده است:

 

display: block;
margin: 32px 16px;
padding: 16px;
text-align: center;

 

در سی اس اس می توان انتخابگرها را بوسیله ویرگول گروه بندی کرد.

با استفاده از این قابلیت می توان از تکرار کد بالا جلوگیری و بصورت زیر عمل کرد:

 

.info,
.success,
.error {
  display: block;
  margin: 32px 16px;
  padding: 16px;
  text-align: center;
}

.info {
  background-color: lightblue;
}

.success {
  background-color: lightgreen;
}

.error {
  background-color: red;
}

 

با این عمل از تکرار اعلان ها در کد جلوگیری کردیم و در واقع به یکی اصول توسعه نرم افزار عمل کردیم که این اصل DRY که کوتاه شده عبارت Don’t Repeat Yourself است می باشد. و همانطور که از خود عبارت پیدا است مفهوم آن عدم نوشتن کد تکراری می باشد.

حتی می توانیم پارا کمی فراتر قرار دهیم و کد بهتری بنویسیم. برای انجام این کار کافی است آن قسمت از کد که تکرارپذیر است را با یک کلاس خاص مشخص کنیم و قسمت هایی که متفاوت هستند را با کلاس های مربوط به خودشان نشان دهیم.

کدی که در بالا دیدیم بیانگر سه پیام بود که به ترتیب پیام های آگاهی, اعلان موفقیت و اخطار بودند. تنها تفاوت این پیام ها در رنگ پس زمینه آنها می باشد. پس در اینجا با یک مفهوم به نام پیام مواجه هستیم که حالت های مختلفی می تواند داشته باشد.

می توانیم برای آن مفهموم کلاسی را تعریف کنیم به نام message و برای هریک از حالت های مختلف دیگر کلاس مخصوص به خودشان را داشته باشیم:

 

.message {
  display: block;
  margin: 32px 16px;
  padding: 16px;
  text-align: center;
}

.info {
  background-color: lightblue;
}

.success {
  background-color: lightgreen;
}

.error {
  background-color: red;
}

 

و در HTML بصورت زیر عمل می کنیم:

 

<div class="message info"></div>
<div class="message success"></div>
<div class="message error"></div>

 

در مطالب آینده بصورت عمیق تر نکات ماژولار نویسی و نحوه بهتر کلاس نویسی را مورد بحث قرار خواهیم داد.