cssطراحی سایت

جلسه ۲۲: بهترین روش ها برای انتخاب عناصر در CSS

  h1 {
    color: red;
  }
جایی که h1 نشان دهنده هر نوع انتخاب است. با این کار هر h1 در سند استایل می شود. استفاده از این انتخابگر زمانی مناسب است که مطمئن هستید می خواهید همه عناصر به یک شکل و ظاهری باشند.

۲٫ از کلاسها برای انتخاب عناصر خاص تر و انعطاف پذیرتر از انتخابگرهای type استفاده کنید.

مثلا:
    .red-letters {
    color: red;
  }
کلاس red-letter ممکن است روی چندین عنصر HTML اعمال شود و همه آنها قرمز رنگ باشند. این امر باعث استفاده مجدد و انعطاف پذیری می شود.

۳٫ مقادیر شناسه فقط یک بار در هر صفحه قابل استفاده است ، بنابراین به استفاده از آنها برای استایل های منحصر به فرد مناسب است.

مثلا:
  #my-element {
    color: teal;
  }
شناسه ها در HTML منحصر به فرد هستند. آنها نباید به چندین عنصر اضافه شوند. از نظر ضمنی ، سبک های تنظیم شده روی یک عنصر ID نمی توانند دوباره استفاده شوند. فقط برای سبک های منحصر به فردی که تکرار نمی شوند از آنها استفاده کنید. برای منتخب های نزولی، سعی کنید بیش از سه سطح عمیق نروید. مثلا: این خوب به نظر می رسد:
    div .red-letters {
    color: red;
  }
و این زیادی است:
    div .red-letters h1 p {
        color: red; 
  }
کار می کند ، اما استفاده از انتخابگرهای بیشتر ممکن است منجر به کاهش بار صفحه شود زیرا مرورگر مجبور است از طریق هر الگو چرخه داشته باشد. من نمی خواهم شما کد کثیف بنویسید.

نتیجه

هیچ دو پروژه ای دقیقاً یکسان نیستند ، بنابراین باید بدانید که کدام گزینه ها برای هر سناریو بهترین هستند ، تمرین و تجربه لازم است. این همراه با تجربه است.اولین قدم این است که فقط بتوانید آن را کارآمد کنید.روش های زیادی برای هدف قرار دادن HTML با CSS وجود دارد ، مانند آنچه من به شما نشان داده ام. بنابراین ، از کجا می دانید از کدام انتخاب یهترین است؟ این درس شامل بهترین روش ها برای انتخاب عناصر HTML است. برای کمک به شما در نوشتن CSS بهتر و کارآمدتر ، بیایید برخی از دستورالعمل ها را مرور کنیم.

۱٫ هنگامی که همه یا اکثر موارد یک عنصر HTML نیاز به سبک مشابه دارند ، از انتخابگرهای type استفاده کنید.

مثلا:
  h1 {
    color: red;
  }
جایی که h1 نشان دهنده هر نوع انتخاب است. با این کار هر h1 در سند استایل می شود. استفاده از این انتخابگر زمانی مناسب است که مطمئن هستید می خواهید همه عناصر به یک شکل و ظاهری باشند.

۲٫ از کلاسها برای انتخاب عناصر خاص تر و انعطاف پذیرتر از انتخابگرهای type استفاده کنید.

مثلا:
    .red-letters {
    color: red;
  }
کلاس red-letter ممکن است روی چندین عنصر HTML اعمال شود و همه آنها قرمز رنگ باشند. این امر باعث استفاده مجدد و انعطاف پذیری می شود.

۳٫ مقادیر شناسه فقط یک بار در هر صفحه قابل استفاده است ، بنابراین به استفاده از آنها برای استایل های منحصر به فرد مناسب است.

مثلا:
  #my-element {
    color: teal;
  }
شناسه ها در HTML منحصر به فرد هستند. آنها نباید به چندین عنصر اضافه شوند. از نظر ضمنی ، سبک های تنظیم شده روی یک عنصر ID نمی توانند دوباره استفاده شوند. فقط برای سبک های منحصر به فردی که تکرار نمی شوند از آنها استفاده کنید. برای منتخب های نزولی، سعی کنید بیش از سه سطح عمیق نروید. مثلا: این خوب به نظر می رسد:
    div .red-letters {
    color: red;
  }
و این زیادی است:
    div .red-letters h1 p {
        color: red; 
  }
کار می کند ، اما استفاده از انتخابگرهای بیشتر ممکن است منجر به کاهش بار صفحه شود زیرا مرورگر مجبور است از طریق هر الگو چرخه داشته باشد. من نمی خواهم شما کد کثیف بنویسید.

نتیجه

هیچ دو پروژه ای دقیقاً یکسان نیستند ، بنابراین باید بدانید که کدام گزینه ها برای هر سناریو بهترین هستند ، تمرین و تجربه لازم است. این همراه با تجربه است.اولین قدم این است که فقط بتوانید آن را کارآمد کنید.

نوشته های مشابه

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

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

دکمه بازگشت به بالا