[-]
مهمان محترم به این انجمن خوش آمدید!
ورود به انجمنثبت نام در انجمن
زمان کنونی: سه شنبه 2 مرداد 1397, 12:31 قبل‏ازظهر
نام کاربری:
کلمه عبور:


ارسال پاسخ  ارسال موضوع 
حالت موضوع بندی | حالت خطی
« توضیح‌نويسی فایل‌های CSS
نویسنده متن پیام
meandyou
عضو علاقمند
*
کاربر فارس وب

ارسال ها: 75
گروه کاربری: کاربر فارس وب
ثبت نام: پنجشنبه 21 تير 1386
وضعیت: Offline

تعداد تشکرها از کاربران دیگر: 16
تشکر شده: 48 بار در 19 پست

در این مقاله در مورد توضیح نویسی (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 نامیده می‌شوند و می‌توانند در مراحل بعدی توسعه خیلی مفید باشند.

منبع: [ جهت مشاهده لينك عضو شويد ! ]


Sometimes that is the way you have to do it: you go right back to the beginning

[ جهت مشاهده لينك عضو شويد ! ]

آخرین ویرایش ارسال در: شنبه 20 مرداد 1386 8:13 بعدازظهر توسط meandyou.

شنبه 20 مرداد 1386 7:37 بعدازظهر مشاهده وب سایت این کاربر یافتن تمام ارسال های این کاربر نقل قول این ارسال در پاسخ
تشکر شده توسط: Silence
نویسنده متن پیام
Bonyanalam
موسس و مدیر كل فارس‌وب
*******
مدیران ارشد

ارسال ها: 789
گروه کاربری: مدیران ارشد
ثبت نام: شنبه 8 ارديبهشت 1386
وضعیت: Offline

تعداد تشکرها از کاربران دیگر: 13
تشکر شده: 519 بار در 272 پست

ممنون .

شماره های خطوط (1 . 2 . 3) احتمالا" از لیست html وارد کد ها شدن ، که بهتر بود که حذف می شدند .

پیشنهاد می کنم یک تاپیک با مضمون css باز کنید و در مورد نکته ها و تجربیاتمون به بحث بنشینیم .


كمي خودماني تر در [ جهت مشاهده لينك عضو شويد ! ]
[ جهت مشاهده لينك عضو شويد ! ]

[ جهت مشاهده لينك عضو شويد ! ]

شنبه 20 مرداد 1386 8:11 بعدازظهر مشاهده وب سایت این کاربر یافتن تمام ارسال های این کاربر نقل قول این ارسال در پاسخ
« قدیمی های بعدی | جدید های بعدی »
ارسال پاسخ  ارسال موضوع 

کاربران در حال بازدید از این مبحث
 1 مهمان

نمایش نسخه قابل چاپ
ارسال مطلب به یک دوست
اشتراک در این موضوع | افزودن موضوع به لیست موضوعات مورد علاقه

پرش به انجمن: