در این مقاله در مورد توضیح نویسی (Commenting) در فایل‌های CSS بحث خواهد شد. علاوه بر بیان مزایا، در انتها معایب آن ذکر و راه‌حل مناسبی پیشنهاد می‌شود. سطح مقاله مبتدی بوده و در زیرگروه مقدمات و پایه آموزش CSS قرار می‌گیرد.

هنگامی که یک فایل CSS می‌نویسید، ممکن است با یک ایده‌ی خوب مواجه شوید یا برعکس به یک مشکل برخورد کنید و برای آن راه‌حلی بیندیشید. اما اگر پس از گذشت مدت زمانی دوباره به آن فایل برگردید احتمال دارد نتوانید آن ایده یا رویکردی را که از آن استفاده کرده‌اید به خاطر بیاورید. این مشکل در طراحی مجدد (Redesign) بخصوص اگر حجم کارهایتان زیاد باشد، جدای از اینکه وقت‌تان را خواهد گرفت ممکن است شما را دچار سردرگمی کند. همچنین اگر بخواهید مراحل پیاده‌سازی را برای فرد دیگری شرح دهید یا یک توسعه‌دهنده دیگر بخواهد کدهای شما را در آینده ویرایش کند، توضیح نویسی یک راه‌حل مناسب خواهد بود.

افزودن توضیح در CSS بسیار ساده است. یک توضیح در CSS با علامت */ شروع و با /* خاتمه می‌یابد. این نوع از توضیح‌نویسی به عنوان C style شناخته می‌شود چرا که در زبان برنامه‌نویسی C این متد کاربرد دارد. توضیحات می‌توانند در یک یا چند خط باشند و در هر جایی در کنار کد قرار بگیرند:

/* Body Styles */
body {
font-size: 67.5%; /* Set the font size */
}

افزودن توضیحات ساختاری
اولین توضیحی که معمولاً در سرآیند یک فایل CSS قرار می‌گیرد نشان می‌دهد که این استایل برای چیست، همچنین تاریخ ایجاد و شماره نسخه، نام و وب آدرس نویسنده را نیز در بر می‌گیرد:

/*–––––––––––––––––––––––––––––––––––––––––––––––––
Basic Style Sheet (for version 4 browsers)
version: 1.0
author: morteza alvani
email: info@example.com
website: http://www.alvanweb.com/
–––––––––––––––––––––––––––––––––––––––––––––––––*/

سپس کدها را به طور مشهود از هم تفکیک می‌کنیم. معمولاً این‌کار با قواعد عمومی نظیر تایپوگرافی، عناوین (headlines) و لینک‌ها شروع می‌شود. پس از آن وارد زیر ساخت پایه و جزیی می‌شویم به طور مثال می‌توانیم استایل طرح را به قسمت‌های: محتوای اصلی (main content)، محتوای فرعی (secondary content)، هدایت‌گر اصلی (main nav) و فرعی و در نهایت پانویس (footer) تقسیم کنیم. نظیر بخش اول از الگویی مثل زیر برای جداسازی قسمت‌های مختلف استفاده می‌کنیم. بزرگ بودن این توضیح باعث خواهد شد تا از لحاظ دیداری زودتر قسمت مربوطه را بیابیم:

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––*/

این یک مدل خیلی ساده و در عین حال جزئی است شما می‌توانید این قسمت‌ها را به زیر مجموعه‌های کوچک‌تری نیز تقسیم کنید که باعث سهولت در فهم و جستجوی آسان خواهد شد. کد‌نویسی یک سایت بزرگ این موضوع را به وضوح نشان خواهد داد. حتی در برخی موارد نمی‌توان به مورد فوق هم بسنده کرد و نیاز خواهیم داشت تا از یکسری کاراکتر اضافی پیش از توضیحی که در مورد کدها می‌نویسیم استفاده کنیم. چرا که ممکن است فایل‌های CSS ساختارهای مشابهی داشته باشند. به طور نمونه الگوی زیر را در نظر بگیرید:

/* =Typography
–––––––––––––––––––––––––––––––––––––––––––––––––*/

در این مثال جستجو برای ” typ= ” شما را مستقیماً به قسمت تایپوگرافی هدایت خواهد کرد. بنابراین با این روش می‌توانید در پروژه‌های یزرگ زمان جستجو را به حداقل کاهش دهید. بیشتر طراحان یک مدل اولیه دارند و از آن برای نظم دهی به استایل در همه طرح‌هایشان استفاده می‌کنند بنابراین نیازی ندارند تا در هر پروژه جدید مجدداً به توضیح‌نویسی کامل بپردازند.

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

/*Use the star selector hack to give IE a different font size http://tinyurl.com/5hf69*/
* html body {
font-size: 75%;
}

همچنین برای اینکه توضیحات خود را معنی‌دار تر کنید می توانید از واژه‌های کلیدی برای توضیحات مهم استفاده کنید. بالفرض از TODO برای یادآوری آنچه باید تغییر کند، از BUG برای مشکلی که وجود داشته است و از KLUDGE برای بیان راه حلی که استفاده کرده‌اید:

/* :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 */

همچنین می توانید از واژه TRICKY برای هشدار به سایر توسعه‌دهندگان در مورد پیچیدگی قسمتی از کد استفاده کنید. در قوانین برنامه‌نویسی، این واژه‌های کلیدی Gotcha به معنی I caught you نامیده می‌شوند و می‌توانند در مراحل بعدی توسعه خیلی مفید باشند.

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

بهترین گزینه شاید فعال کردن فشرده‌سازی سمت سرور باشد. اگر شما از سرور آپاچی استفاده می‌کنید با مسئول هاست خود در مورد نصب mod_gzip و mod_deflate صحبت کنید. بسیاری از مرورگرهای مدرن می توانند فایل‌های فشرده شده با GZIP را پردازش کنند و آن‌ها را در کسر کوچکی از زمان از حالت فشرده خارج کنند. این ماژول‌های آپاچی می‌توانند تشخصی دهند که آیا مرورگر می‌تواند این قبیل فایلها را پردازش کند یا خیر، اگر بتواند، یک نسخه فشرده شده از فایل را ارسال می‌کند. فشرده سازی سمت سرور می تواند تا حدود 80 درصد از حجم فایل‌های XHTML و CSS را کاهش دهد، در نتیجه پهنای باند مصرفی را کاهش می‌دهد و صفحات سریع‌تر بارگذاری خواهند شد. اگر شما دسترسی به این ماژول‌ها ندارید، می توانید با استفاده از این آموزش فایل‌هایتان را فشرده کنید. قبلا روش ترکیب PHP و فشرده‌سازی CSS در اینجا توضیح داده شده است.

• + CSS Mastery book (Chapter 1: SETTING THE FOUNDATIONS)
  + CSS Management and Optimization
  + Gzipping your CSS

+ منابعی که در تدوین این مقاله از آنها استفاده کرده‌ام.