جلسه ۴۹ – کامنت گذاری در CSS

کامنت گذاری در CSS چطور هست؟ آیا مثل HTML ، در CSS کامنت گذاری داریم؟ مثل تمام زبان های برنامه نویسی و کد نویسی دیگه، در CSS هم با مفهوم کامنت گذاری روبرو هستیم.

کامنت گذاری در کنار اینکه مفهوم علمی سبکش، دارای مفهوم معرفتی بسیار سنگینی هست!

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

کامنت ها و نحوه نوشتن اون ها در CSS

برای کامنت گذاشتن در CSS، کافیه به شکل زیر عمل کنیم:

مرحله ۱: یدونه */ میزاریم.

/*

مرحله ۲: هر چی می‌خوایم رو می‌نویسیم.

/*  نوشته ها و کد های مورد نظر

مرحله ۳: یدونه /* می‌زاریم. ختم کلام!

/* نوشته ها و کد های مورد نظر */

یا به صورت خلاصه تر و علمی تر:

کامنت ها، نوشته هایی در فایل CSS ما هستند که توسط مرورگر خوانده نشده و اثر داده نمی‌شوند.

چرا باید کامنت بگذاریم؟

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

قبل از این توضیحات مقاله آموزش جامع کامنت گذاری میزفا که علی اسماعیلی نوشته رو خوندید؟

دلایل اصلی ما عبارتند از:

کدمون رو بفهمیم

اولین دلیلی که بخاطرش باید به کامنت گذاری توجه کنیم، اینه که باید کدمون رو بفهمیم.

زمانی که ما، یه پروژه کوچیک یا بزرگ تعریف می‌کنیم، چه توسط زبان های برنامه نویسی مثل پایتون و چه توسط زبان های کد نویسی مثل HTML و CSS، نیاز داریم که همیشه برنامه نوشته شده رو بفهمیم.

ممکنه برنامه ای رو دو ماه پیش نوشته باشین و امروز که بازش می‌کنین هیچی از اون متوجه نشین!

چه بسا ممکنه برنامه سنگینی باشه، در اون صورت دو ماه که سهله، اگه سه روز روش کار نکنین، تو روز چهارم هیچی ازش متوجه نمیشین و مجددا باید از اول بنویسینش 🙂

در حالی که با نوشتن کامنت، این مشکل به حداقل می‌رسه.

کدمون رو بفهمن

خودمون کدمون رو میفهمیم، اما آیا این مسئله، در مورد دیگران هم صادقه؟

بیاین یه داستان فرضی کوچیک رو با هم مرور کنیم:

تصور کنین که دارین تو یک شرکت برنامه نویسی، کار می‌کنین. شما عضوی از یک تیم دو نفره هستین که باید به صورت مشترک رو یک پروژه سمت کاربر که از سمت سرپرست بهتون داده می‌شه، کار کنین!

مهلت انجام پروژه، ده روز تعریف شده.

مشخصه که پروژه دارای کد های CSS خیلی سختی خواهد بود، اما قسمت پویای پروژه، که با javascript نوشته می‌شه، به مراتب ساده تره.

با این حال چون شما تو CSS قوی تر هستین، نوشتن کد های CSS پروژه رو بر عهده می‌گیرین و قسمت javascript اون رو به هم تیمیتون محول می‌کنین. ده روز رو تقسیم می‌کنین: هفت روز نوشتن CSS و سه روز نوشتن javascript

۷ شبانه روز روی پروژه کار می‌کنین تا اینکه اون رو بعد از کلی زحمت و عرق ریختن تموم می‌کنین. حالا کافیه کد رو به دوستتون تحویل بدین که ۳ روزه کار رو ادامه بده.

دارین اماده می‌شین که سه روز برین شمال و یه استراحتی کنین که هم تیمیتون با جمله “خودت میفهمی چی نوشتی؟” شما رو صدا می‌کنه!!

چه اتفاقی افتاده؟

شما جوری کامنت گذاری کردین که فقط خودتون می‌فهمین چی نوشتین. مثل کد زیر:

/* یارو دایو لنگه */
div#particles-js div.lang{
   ...
}

/* یارو پاراگرافه که روش کلی کار کردم */
div.lang p{
   ...
}

/* پارتیکلارو اینجا میارم رو المنتای اصلی */
div#particles-js div.introduction{
   ...
}

چه اتفاقی میفته؟ یک روز کامل میشینین و کامنتارو دوباره تغییر می‌دین:

/* DIV.LANG */
div#particles-js div.lang{
...
}

/* PARAGRAPH IN DIV.LANG */
div.lang p{
...
}

/* INTRODUCTION IN HEADER */
div#particles-js div.introduction{
...
}

نتیجه چی میشه؟

• نمی‌رسین برین شمال.
• پروژه با یک روز تاخیر به اتمام می‌رسه.
• چون هم تیمیتون دو روز وقت داشت، با کلی استرس کارشو انجام داد و کار نهایی بی کیفیت شد.

این تنها یک داستان فرضی بود، می‌تونه تو خیلی از تیم ها، شرکت ها و موسساتی که برنامه نویسی به صورت اشتراکی انجام می‌شه، اتفاق بیفته.

پس کامنت رو جوری بنویسین که به کدتون ارزش اضافه کنه، و مقصود اون رو به خواننده برسونه. چه خودتون، و چه دیگران.

کدای (موقتا) بی ارزش رو پاک نکنیم، کامنت کنیم

منظورمون از کدای موقتا بی ارزش در آموزش CSS چیه؟

فرض کنین کدی به شکل زیر داریم:

h1{
   padding-left:20px;
   padding-right:10px;
   padding-bottom:5px;
}

اما هرکاری می‌کنیم، خروجی دلخواهمون رو نمی‌گیریم.

کار نکردن کد بالا دلایل زیادی می‌تونه داشته باشه که کاری بهشون نداریم، حالا فرض کنین که یه کد جدید به ذهنمون می‌رسه که احتمال می‌دیم با استفاده از اون، به نتیجه دلخواه برسیم.

برای استفاده از کد جدید، کد قبلی رو پاک نکنین، بلکه کامنتش کنین:

h1{
   /* padding-left:20px;
   padding-right:10px;
   padding-bottom:5px; */

   position: relative;
   left: 20px;
   right: 10px;
   bottom: 5px;
}

به چه دلیل اینکارو می‌کنیم؟

چرا که ممکنه کد جدید هم کار نکنه و شما بخواین مجددا روی کد قدیم فکر کنین و مانور بدین.

شاید فکر کنیم که خب اشکال نداره، پاکش می‌کنیم و اگه دوباره خواستیمش، از ctrl+z استفاده می‌کنیم، اما چنین چیزی زمانی که کد های خیلی زیادی دارین، می‌تونه باعث سردرگمی و حتی پاک شدن کد هایی بشه که کار می‌کردن 🙂

نباید های کامنت گذاری

این همه در مورد کامنت گذاری مطالعه کردیم.

حالا چه نکاتی رو باید مد نظر قرار بدیم؟

زیاد کامنت نزاریم

متوجه شدیم که کامنت گذاشتن، باعث روشن تر شدن کدمون و رسوندن منظور اون به مخاطب میشه.

اما این دلیل نمیشه که کامنت گذاشتن، در هر کجا و نا کجایی، مفید و مناسب باشه.

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

/* دستورات مربوط به کانواس در پارتیکل ها */
div#particles-js canvas{
/* مشخص کردن موقعیت عنصر */
   position: absolute;
/* ابعاد عنصر */
   width: 100%;
   height: 100% /* صد درصد گرفتیم که کل ارتفاع رو بگیره */;
/* مشخصات بک گراند عنصر */
   background-color: #111820;
   background-image: url("image.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 50% 50%;
/* عنصر توسط این دستور میاد زیر تمام عناصر دیگه */
   z-index: 0;
}

این روش از کامنت گذاشتن، نه تنها به روشن شدن کد کمکی نمی‌کنه، بلکه اون رو سخت تر از چیزی که هست نشون می‌ده.

تو کامنت داستان ننویسیم

این موضوع هم، کم شباهت به زیاد کامنت گذاشتن نیست.

تفاوتش در اینجاست که به جای پخش کردن کامنت ها، تمام اون ها رو یک جا بنویسیم:

/* دستورات مربوط به کانواس در پارتیکل ها
بعد از نوشتن دستور ها عنصر رو با ابسولوت موقعیت دهی میکنیم. بعدش میایم ابعاد رو تعیین میکنیم و
چون بک گراند باید فلان باشه هم بهش عکس میدیم و هم رنگ! اخر از همه اون رو زیر تمام عناصر
قرار میدیم */
div#particles-js canvas{
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: #111820;
   background-image: url("image.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 50% 50%;
   z-index: 0;
}

نتیجه گیری

تو این مقاله، مبانی کامنت گذاری رو با هم بررسی کردیم و با باید ها و نباید ها آشنا شدیم.

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

مدیر محتوا: علی اسمعیلی‌