هنگامی که یک فایل 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 نامیده میشوند و میتوانند در مراحل بعدی توسعه خیلی مفید باشند.
منبع: [ جهت مشاهده لينك عضو شويد ! ]