استانداردهای کدنویسی CSS در وردپرس (2)

CSS Coding Standards in WordPress - Part 2

0 96

با قسمت سوم از «دوره تخصصی استانداردهای طراحی قالب وردپرس» در خدمت شما هستیم. در این قسمت به ادامه ی «استانداردهای تعریف شده برای استفاده از css در وردپرس» خواهیم پرداخت.

ادامه ی استانداردهای کدنویسی CSS در وردپرس

این استانداردها به شرح زیر هستند:

مقادیر (values)

راه های متفاوتی برای قراردادن «مقدار» در «پراپرتی» ها وجود دارد. موارد زیر را در این زمینه برای حفظ بالاترین کیفیت در کدنویسیرعایت فرمایید.

  • قبل از نوشتن مقدار پراپرتی (بعد از دونقطه) حتما یک فاصله بگذارید.
  • داخل پرانتزها فاصله ی خالی نگذارید.
  • در آخر آن ها یک سمیکالن ; قرار دهید.
  • به جای تک کوتیشن (‘) از دابل کوتیشن (“) استفاده کنید. مگر اینکه در مواقعی که نیاز بود، مثلا زمانی که می خواهید نام یک فونت را با خط فاصله بنویسید یا این که می خواهید مقدار پراپرتی content را وارد کنید.
  • پراپرتی font-weight باید با مقادیر عددی مشخص شود. مثلا به جای مقادیر bold یا normal از 400 یا 700 استفاده کنیم.
  • مقادیر صفر نباید دارای واحد باشند. یعنی مثلا 0px اشتباه است و 0 خالی درست است.
  • از صفر ابتدایی در مقادیر دسیمال مثل ()rgba استفاده کنید.
  • ویرگولی که مقادیر یک پراپرتی را از هم جدا می کند، باید شامل یک فاصله (اسپیس) قبل، و یک فاصله بعد از خود باشد یا این که هر مقدار در یک خط قرار داده شوند.
  • مقادیر قرار گرفته درون یک مقدار دیگر، مثل مقادیر درون ()rgba باید با یک فاصله یا اسپیس از هم جدا شوند.

کدنویسی صحیح:

کدنویسی غلط:

مدیا کوئری ها (Media queries)

استفاده از مدیا کوئری ها این امکان را فراهم می سازند تا مقدار DOM یا Document Object Model را برای سایز صفحه های مختلف کاهش دهیم.

  • پیشنهاد می شود که مدیا کوئری ها را دسته بندی کنید و آن ها را در انتهای استایل شیت بنویسید. (فایل wp-admin.css در این مقوله استثناء است)
  • قوانینی که برای مدیا کوئری نوشته می شوند باید در یک خط واقع شده باشند.

مثال:

کامنت نویسی

  • نوشتن کامنت هایی با بیش از 80 کاراکتر باعث رفتن به خط بعدی می شود. این امر باعث افزایش زمان دیباگ کردن می شود. همچنین درست است که کامنت ها مانند کدها خوانده نمی شوند، اما به هر حال حجم فایل را افزایش می دهند و این چیز خوبی نیست.
  • مطالب باید در یک استایل شیت بزرگ فهرست بندی شوند. در کامنت نویسی برای معرفی قسمت های مختلف یک استایل شیت، از اعداد برای بخش بندی و فهرست بندی قسمت های مختلف کد استفاده کنید. ( مثلا 1.0 و 1.1 و 2.0 و… )
  • کامنت های درون خطی (in-line) نباید دارای خط جدید خالی ای باشند که کامنت را از کدی که به آن مربوط می شود جدا کند.

مثال برای کامنت های درون خطی یا in-line

برای کامنت های چند خطی که دارای قسمت و زیر قسمت هستند:

تجربیات کدنویسی در زبان CSS

تجربه نشان می دهد که فایل های CSS یا استایل شیت ها، تمایل زیادی به طولانی شدن دارند. بنابراین استفاده از روش های هوشمندانه و داشتن یک سری قوانین و چارچوب برای کدنویسی این فایل ها، می تواند کمک زیادی به حفظ نظم و خوانایی می کند.

  • اگر با مشکلی در کدنویسی مواجه شدید، قبل از ادامه ی کار حتما اول آن مشکل را حل کنید و سپس اقدام به نوشتن بقیه ی کدها کنید.
  • اعدادتنها بد شانسی می آورند. مثل: .box { margin-top: 37px }
  • DOM با گذشت زمان تغییر خواهد کرد، پس عنصری را که می خواهید از آن استفاده کنید نه بر اساس «یافتن» آن، بلکه از طریق والدینش هدف گذاری کنید.
  • بدانید که چه زمانی از وپراپرتی hight استفاده کنید. مثلا زمانی که از عناصر خارجی (مانند تصاویر) استفاده می کنید. از پراپرتی line-height هم برای انعطاف بیشتر استفاده نمایید.
  • از بازتعریف یک پراپرتی و مقدار خودداری کنید. مثلا از display: block برای یک عنصر یا المانی که خودش block هست، استفاده نکنید.

خب! دوستان و همراهان گرامی به پایان قسمت سوم رسیدیم. لطفا سوالات و نظرات خود را در پایین همین برگه با ما به اشتراک بگذارید. در قسمت بعدی به بررسی «پرکاربردترین خلاصه نویسی های CSS مورد تایید وردپرس» و «استانداردهای تعریف شده برای کدنویسی html توسط کمپانی ورپرس» خواهیم پرداخت. با ما همراه باشید.


منبع: سایت WordPress

ترتیبی که روکسو برای یادگیری مطالب سری آموزش تخصصی استانداردهای طراحی قالب وردپرس به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

mezitli escort
mezitli escort