تبلیغات
آموزش - آموزش CSS (جلسه هفتم)
طراحی و توسعه وبسایت
آموزش CSS (جلسه هفتم)
شنبه 9 دی 1396 ساعت 09:32 ب.ظ | نوشته ‌شده به دست رضا راد | ( نظرات )
آموزش CSS (جلسه هفتم)
گروه بندی انتخابگرها به این معنی است که اگر برای دو یا چند انتخابگر استایل های یکسان وجود دارند می توان آن انتخابگرها را گروه بندی کرد تا از نوشتن کد تکراری جلوگیری شود.



کد زیر را در نظر بگیرید:
.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>

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


برچسب‌ها: CSS , طراحی صفحات وب ,

لینک های مرتبط: آموزش CSS (جلسه اول ) ,

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





امکانات ویژه
تبدیل عکس به آیکون
دیگر موارد
تعداد مطالب :
تعداد نویسندگان :
آخرین بروز رسانی :
بازدید امروز :
بازدید دیروز :
بازدید این ماه :
بازدید ماه قبل :
بازدید کل :
آخرین بازدید :