illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

Code Guide یا راهنمای کدنویسی HTML و CSS (جلسه 9) : Shorthand notation و Comments

0 116 ۹ آذر ۹۵

در این مطلب با ادامه راهنمای کدنویسی HTML و CSS در خدمتتون هستم.code guide

در جلسه قبل در مورد قواعد با یک ویژگی تنها و استفاده از عملگرها در Less و Sass، نکاتی رو بیان کردیم. در این جلسه قصد داریم نکات دیگه رو در اختیارتون قرار بدیم. در این جلسه در مورد Shorthand notation یا خلاصه نویسی ویژگی ها و Comments یا توضیح نکاتی رو خدمتتون عرض میکنیم.

Shorthand Notation یا خلاصه نویسی

سعی کنید تا جایی که امکان داره از خلاصه نویسی ویژگی ها، در مواقعی که بعضی از مقادیر رو به اجبار وارد میکنید، استفاده نکنید. این کار باعث میشه که یک مقدار چندتا جا تعریف بشه و Overuse بشه. ویژگی های متداولی که این اتفاق براشون میوفته شامل موارد زیر هستند:

  • Padding
  • Margin
  • Font
  • Background
  • Border
  • Border-radius

اکثر مواقع نیازی نیست که همه مقادیر یک ویژگی رو تک به تک مشخص کنیم. برای مثال Heading درون یک صفحه فقط margin های بالا و پایین نیاز داره و چپ و راست رو نیازی نیست که براش تعریف کنیم. پس تا جایی که ممکنه بهتره که همون مقادیر بالا و پایین رو بازنویسی یا Override کنیم. استفاده بیش از حد و مفرط از ویژگی های خلاصه نویسی شده موجب به وجود اومدن کدی نامنظم میشه که بازنویسی های غیرضروری درون اون انجام میشه.

مثلا کد زیر رو در نظر بگیرید:

میبینید که در کد بالا خلاصه نویسی های زیادی انجام گرفته. مثلا در کد بالا فقط میخاستیم که margin پایین رو مشخص کنیم و با این خلاصه نویسی 3 مقدار غیرضروری رو override کردیم. بهتره که در اینجا از margin-bottom استفاده بشه. ویژگی background مقادیری رو قبول میکنه. اما بهتره که همیشه رنگ رو برای background-color قرار بدین و تصویر رو برای background-image. برای ویژگی border-radius هم بهتره هر کدوم رو بصورت جداگانه تعریف کنیم. پس کد نهایی و بهینه شده بصورت زیر خواهد بود:

برای مطالعه بیشتر در مورد ویژگی های خلاصه نویسی شده میتونین به این مقاله از سایت Mozilla Developer مراجعه کنید.

Comments یا توضیحات

کدها به دست انسانها ساخته و توسعه داده میشن. مطمئن بشید که کدی که مینویسید، توصیفی باشه و به خوبی Comment گذاری شده باشه و برای دیگر برنامه نویسان قابل درک باشه. پس سعی کنید تا جایی که لازمه برای کدهاتون توضیح قرار بدین تا اگر دیگران به کد شما نگاه کردن و یا اینکه بعدها خودتون خواستید کدهاتون رو ویرایش کنید، بهتر و سریعتر بتونین با کد وفق پیدا کنید. پس به سادگی از Comment ها نگذرید و توضیحات ساده یا نام کلاس رو درون اون قرار ندید.

مثلا کد زیر رو در نظر بگیرید:

میبینید که به سادگی اومده و نام همون کلاس رو درون Comment قرار داده. این خیلی مطلوب نیست و باید اون رو بهینه تر کنید. بهتره کد زیر رو بجای اون قرار بدین:

میبینید که یک توضیح برای این Class داده شده و گفته شده که یک المنت برای قرارگیری modal-title و modal-colse هست و با خواندن اون با هدف این کلاس تا حد زیادی آشنا خواهیم شد.

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

موفق و پیروز باشید.

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

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

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram