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

روش های Commenting در CSS

آشنایی با کامنت گذاری در CSS
آشنایی با کامنت گذاری در 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;
}

نتیجه گیری

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

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

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

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

7 نظر

7 پاسخ

  1. سلام. وقت بخیر… من تازه شروع کردم به یادگیری html css…
    یه مطلبی نوشتین که گفتین مثلا تو یه شرکت برنامه نویسی کار میکنیم…
    نوشتین، نوشتن کدهای css سختر از js هستش…
    من با جاوااسکریپت اشنا نیستم ولی اونچه که اینور اونور دیدم به نظرم پیچیده بود…
    حالا واقعا کدومشون سختره؟!!!

    1. سلام امیر. ببین در حالت کلی javascript به مراتب سنگین تر و سخت تر از css هست، و اون چیزی که دیدی کاملا درست بوده 🙂
      اینجا منظورمون اینه که “در اون پروژه، قسمت CSS خیلی سخت تر از jsعه”
      مثلا فرض کن یک وب سایت به شدت پیچیده داریم از لحاظ طبقه بندی عناصر که مسلما به CSS پیچیده ای هم نیاز داره.
      اما تنها بخش javascript وب سایت، یک مودال لاگینه که با حدود 10 خط js اوکی میشه (مودال همون پنجره هایی هستن که یهو وسط وب سایت باز میشن. میتونن شامل فرم لاگین یا تبلیغ و غیره باشن)

      1. خیلی ممنون…❤️
        به نظر شما بعد از اینکه فرانت طراحی سایت رو یاد گرفتم، برای بک اند برم سمت فلسک پایتون؟!
        در واقع بعضیا میگن پایتون تو بک اند سایت ضعیفه و کند… بعضی میگن نه خوبه… من که تازه کارم خوب گیج میشم دیگه… خدایی گاهی ادم رو از ادامه راه کاملا نا امید میکنن…

        1. بستگی به هدف شما داره.
          هر نوع زبانی میتونه خوب باشه به شرطی که شما توش متخصص بشی و همش شاخه به شاخه نشی.
          پایتون خوبه asp خوبه php خوبه
          همه خوبن و پولساز به شرط متخصص شدن تو
          زیاد هم با نظرات بقیه تصمیم نگیر. الان به من بگی میگم برو تو کار سئو، به همکار من بگی میگه برو تو کار asp و پایتون خوب نیست. هر کسی درباره چیزی میگه خوبه که خودش نتیجه گرفته و درباره چیزی بد میگه که خودش نتیجه نگرفته. وگرنه قانون نیست این حرف ها.

        2. خواهش میکنم امیر. ببین همونطور که پوریای عزیز هم گفت هیچکس به ماست خودش نمیگه ترش، بنابراین به نظراتی مثل جنگو سرعتش خیلی بالاست از همه فریموورکا بهتره یا لاراول داره منسوخ میشه یاد نگیر اصلا و ابدا توجه نکن. منم یه نکته رو به گفته های پوریا اضافه کنم، اونم اینه که تو به عنوان توسعه دهنده فرانت، میتونی خیلی شیک تو یه جای خوب استخدام شی و اصلا نیاز نداری که یک تکنولوژی بک اند رو کامل یاد بگیری. اما اگه میخوای مستقل کار کنی یا برنامه ای تو ذهنته که بک اند هم در اون هست، کلی تکنولوژی مختلف با نکات مثبت و منفی وجود داره که با هرکدوم حال کردی میتونی بری سمتش. مثلا خود من اول لاراول و php رفتم ولی بعد از چند ماه کلا شیفت کردم رو جنگو. حالا ممکنه تو از نود جی اس استارت بزنی، از همونم خوشت بیاد و ادامش بدی. همه چیز بستگی به تحقیق علمی و درست خودت تو منابع معتبر داره 🙂

    1. سلام شایان. خواهش میکنیم، خیلی خوشحالیم که مطلب برات مفید بوده?

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

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=