آموزش رایگان CSS – جلسه 4

در این جلسه قصد داریم به Commenting یا کامنت گذاری در CSS بپردازیم. کامنت گذاری به معنی نوشتن یک متن در مورد کدهایی است که در 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 : */

غیر فعال کردن کدهای CSS

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

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 جا نمونید.✌😊🚀