در این جلسه قصد داریم به Commenting یا کامنت گذاری در CSS بپردازیم. کامنت گذاری به معنی نوشتن یک متن در مورد کدهایی است که در CSS می نویسیم. در واقع این توضیحات قرار است کار ما و کسی که بعدا قصد دارد این کدها را بخواند راحت کند.
در جلسه ی سوم از آموزش CSS به نحوه ایجاد فایل CSS پرداختیم که اگر هنوز آن را مطالعه نکرده اید می توانید از لینک قرار داده شده به آن دسترسی داشته باشید.
گفتیم که با توضیح نویسی یا کامنت گذاری در CSS نحوه ی کار و ویژگی کد نوشته شده را بیان می کنیم. البته این کار مزایا و معایبی دارد که در همین جلسه به آن خواهیم پرداخت.
برای نوشتن توضیحات لازم است که در کنار کد مورد نظر و در بین علامت زیر توضیحات بیان شود؛
/* توضیحات لازم باید اینجا نوشته شود */
استفاده از این ویژگی مزایایی دارد که در زیر به آن اشاره می کنیم؛
اول این که, گاهی ممکن است ایده ای جذاب و منحصر به فرد در حین کد نویسی به ذهنمان برسد. این ایده را در همان لحظه به کدها اضافه می کنیم و از نتیجه بسیار هم راضی خواهیم بود. اما اگر پس از گذشت یک مدت که مجدد به آن کد مراجعه کنیم متوجه نمی شویم, چه نوشته ایم, ایده چه بود و چه کار کرده ایم!! در اینجاست که توضیحات به کمک ما می آیند.
در حین نوشتن ایده و کدهای مربوط به آن میتوانیم در توضیحات هرآنچه که لازم است را بیان کنیم تا در آینده و زمانی که نیاز به یادآوری بود با خواندن آنها همه چیز در ذهنمان مرور شود.
کدهای نوشته شده گاهی ممکن است در اختیار سایر توسعه دهندگان قرار بگیرند. در این موارد توضیحات میتواند کمک کند تا آنها بتوانند به راحتی کدها را با استفاده از توضیحات آنها بشناسند و متوجه کاربرد آنها شوند.
مزیت دیگر استفاده از کامنت گذاری در CSS یادداشت هایی است که برای خودتان قرار خواهید داد. برخی قسمت هایی که در حال کدنویسی آن هستید بعدا نیاز به تغییر و تصحیح دارد. در این موارد می توانید با عبارت هایی مانند ” بعدا اصلاح شود ” , ” نیاز به اصلاح بیشتر” , ” کامل نشد ” یا هر چیزی که یک نوع یادآوری و یادداشت برای خودتان باشد از کامنت گذاری استفاده کنید.
/* TODO: Remember to remove this rule :*/
/* KLUDGE: Setting a small negative margin but it’s not pretty: */
/* BUG: Rule breaks in IE 5.2 Mac : */
گاهی ممکن است بخواهیم کدهایی که نوشتیم برای مدتی اجرا نشود و در زمان دیگری از آن ها استفاده کنیم یا برای تست کردن آن را غیرفعال کنیم در این مواقع نیز می توانیم از توضیحات استفاده کنیم.هر قسمتی که مورد نیاز نیست را در بین علامت /* */ قرار می دهیم.
p {
/* color: white;*/
background-color: #2594A4;
}
یا
/*p {
color: white;
background-color: #2594A4;
}*/
بزرگترین عیب توضیح نویسی یا کامنت گذاری این است که سبب افزایش چشمگیر حجم فایل های CSS خواهند شد. بنابراین توصیه می کنیم فقط در موارد ضروری از این ویژگی استفاده کنید تا با حجم بالای فایل رو به رو نشوید.
البته اکثر ویرایشگرهای متن دارای ویژگی جستجو و جایگزینی هستند. یعنی به راحتی میتوان توضیحات را پیدا و آنها را حذف یا جایگزین کرد و این ویژگی ویرایشگرها تا حد زیادی مشکل توضیحات اضافه را حل خواهد کرد.
راه حل دیگر برای رفع این مشکل بهینه سازی CSS است. بهینه سازی CSS علاوه بر حذف توضیحات, فضاهای خالی بین کدها را نیز حذف می کند و باعث کاهش چشمگیر بایت های اضافی میشود.
مثال اول؛
<style>
/*———————– Header Styles ————————–*/
header{
background-color:blue; /*رنگ پس زمینه ی هدر آبی می شود*/
box-shadow: 0px 7px 15px -9px grey;/*برای کادر هدر سایه ایجاد میکند*/
}
مثال دوم؛
/********استایل بدنه*****/
body{
/* رنگ پس زمینه سبز روشن میشود */
background-color: lightgreen;
/* تنظیم سایز فونت*/
font-size: 62.5% /* 1em = 10px */
}
مثال سوم؛
p {
color: white; /* رنگ متن را سفید می کند*/
background-color: gray;
/* رنگ پس زمینه متن طوسی می شود */
}
مثال چهارم؛
a{
color:black;
}
a:hover{
color:red; /*وقتی ماوس روی لینک رفت رنگ آن قرمز شود*/
}
مثال پنجم؛
/*—————–mobile responsive—————-*/
@media (min-width:320px){
p {
font-size:14px; /*سایز فونت متن در حالت موبایل*/
}
}
</style>
✌😊🚀از بقیه‌ی جلسات آموزشی HTML و CSS جا نمونید.✌😊🚀
سلام
چرا با دوتا // یا # نمیشه کامنت گذاشت؟