گروه بندی انتخابگرها

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

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

 


.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>

 

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

مطالب مرتبط

10 دیدگاه برای “گروه بندی انتخابگرها”

  1. با سلام خدمت شما آقای سیدی
    یه مطلبی هست حتما باید بگم
    من اتفاقی سایت شما رو تو IE 8 باز کردم و دیدم سایت شما تو این مرورگر اصلا ظاهر مطلوبی نداره
    حالا باز حرف ظاهرش نیس مشکل تو دسترسی به بخش های مختلف سایتتون هست تنها بخش های قابل دسترسی پست ها و نوار ناوبری سمت راسته
    ممنون به خاطر مطالب ولی کمی سرعت انتشارشون پایینه ;)

    پاسخ

    1. من یه عمر دارم با ساخت سایتایی سر و کله می زنم که باید همه جا درست کار کنه. این اولین جا هستش که اهمیت نداره. اول اینکه کاربرای من از این مرورگرها استفاده نمی کنند. دوم اینکه اگر هم بخوان استفاده کنند من پشتیبانی نمی کنم ;)

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

      خدا از این لذت ها نصیب همه بکنه. فقط کسی که چندین سال سایت طراحی کرده این لذت رو درک می کنه :)

      مرسی بابت اینکه اهمیت دادین و ممنون از همراهیتون.

      سرعت هم درست میشه به امید خدا :)

      پاسخ

  2. سلام
    شما ابزاری نمی شناسین که بتونه در پیدا کردن خواص تکراری به ما کمک کنه ؟

    آیا کسانی که حرفه ای کد میزنن ، تمام خواص رو چک می کنن تا خواص تکراری رو با یک انتخابگر بنویسند ؟

    پاسخ

    1. سلام. راستش سوال خیلی سختی پرسیدید. از این جهت سخت که این قصه نیاز به تجربه داره.

      این بحث وابسته به نام گذاری کلاس ها هستش. همچنین وابسته به معماری که استفاده می کنید هستش. که اینا بحثاش نه توی یک کامنت بلکه توی یک پست هم جای نمی گیره.

      مثلا واسه شروع پیش پردازنده هایی مثل Sass می تونن کمک کنن. ولی خوب باز هم این هم وابسته به معماری داره.

      در ضمن من در مورد چیزایی که می دونین نمی دونم و این خودش باز جواب رو سخت میکنه.

      در آخر اگر تازه دارین کار می کنید. سعی کنید هر تکه از سایت رو یک ماژول ببینید. مثلا منو میشه یک ماژول. یک اسلایدر میشه ماژول. حالا توی هر ماژول سعی کنید DRY رو رعایت کنید.

      پاسخ

  4. مهندس دمت گرم، مگه عادم خسته میشه تو سایتت، منی که سرانه ی مطالعه ام از 1 دقیقه هم کمتره الان به خودم اومدم دیدم قریب به 3 ساعته دارم میخونم مطالبو، تمیز توضیح دادی، خیلی بهت نیازه تو دنیای آموزش، من که هر جا میشینم و بحت دیزاین میاد وسط و کسی میخواد شروع کنه میگم سایت css-tricks سریع میگن بابا اون انگلیسیه بلد نیستیم، بعدش با یه قیافه ی حق به جانب میگم نه بابا، اونو نمیگم دات آی آرررررر!!! تو بزن اگه حال نکردی بیا پیش من
    خدایی دمت گرم مهندس مجتبی
    خداقوت

    پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *