Moshtaghi.ir » Blog Archive » اصولی برای داشتن کدی تمیز و بی نقص

اصولی برای داشتن کدی تمیز و بی نقص

19 نوامبر 08 طراحی وب css, html

یک کد html درست و تمیز، زیر بنایی برای داشتن یک وب‌سایت زیباست. همیشه وقتی قصد آموزش css به دیگران را دارم، ابتدا به آنها می‌گم که css تنها میتونه بهمراه یک HTML خوب خودش رو نشون بده! همونطور که لازمه داشتن یک خونه زیبا و مستحکم، فنداسیون اصولی است. درسته؟
در ادامه به شرح مختصر اصولی می‌پردازیم که در نوشتن HTML باید رعایت کنیم.

۱- Strict Doctype

توضیح خاصی نیست. به تصویر دقت کنید!

۲- کدگزاری کاراکتر‌ها ( characters encoding )

در قسمت head، باید نوع کدگزاری کاراکتر‌ها ( characters encoding ) را اعلان کنیم.ما از UTF-8 استفاده می‌‌کنیم که این خیلی خوبه. اما این کد رو بعد از Title لیست میکردیم. شما باید جای اینا رو عوض کنید و اعلان کدگذاری رو قبل از title ببرید. بنابراین قبل از خوندن همه محتوا به مرورگر می‌فهمونید که چگونه باید برای کدگزاری رفتار کنه.

در این صورت می‌تونیم از هر کاراکتر بامزه‌ای با اطمینان استفاده کنیم. برای مثال ما یک امپرسند در Title داریم. برای جلوگیری از بروز هر مشکلی در ترجمه این کاراکتر‌، به جای & از کد & استفاده می‌کنیم.

۳- ایجاد فرو رفتگی‌های درست

با یک نگاه به تصویر کاملاْ مشخص می‌شه که کدوم کد خوانا و زیباتره

۴- از CSS و Java Script خارجی استفاده کنید.

استفاده داخلی از CSS و JS اشتباه بزرگیه. زیرا شما با اینکار تنها در همین سند HTML می‌تونید از آنها استفاده کنید. این در حالیه که اگر بطور مجزا کد‌ها رو ذخیره کنید می‌شه بار‌ها و بار‌ها از اونها در ایجاد صفحات دیگر بهره برد و بنابراین تغییر در ظاهر کل صفحات نیز امکان‌پذیر و بسیار راحت می‌شه!

۵- جای گرفتن درست اشیا ( TAG )

برای مثال نام سایت ما My cat site است. برای نمایش این نام بصورت سرآمد ( header ) از تگ h1 استفاده میکنیم. تا اینجای کار ما کاملاْ درسته. حالا برای ایجاد پیوند به آن باید چه کرد؟ بله، از تگ <a> استفاده می‌کنیم. به اینصورت که هیدر را میان تگ لینک قرار می‌دهیم و کار تمومه. اما از نظر تکنیکی اینکار کاملاْ غیر اصولی و اشتباهه! تگ لینک یک عنصر inline است و هیدر Block .بلاک‌ها نباید داخل عناصر inline استفاده شن. راه حل این مسئله رو می‌تونید در تصویر ببینید.

۶- پاک کردن Div های بلااستفاده

استفاده مکرر از تگ div برای احاطه سایر عناصر صفحه رو بهتون پیشنهاد می‌کنم. معمولاْ به هنگام یادگیری مراحل طراحی وب، مردم آموزش می‌بینن که چطور عناصر صفحه رو با استفاده از div جمع و جور کنن و اونها رو با اعمال css جهت بدهند. این طرز تفکر باعث می‌شه که در بعضی مواقع که هیچ نیازی هم به استفاده div نیست، اینکار رو انجام بدن. به مثال زیر توجه کنید.

در این مثال می‌شه از همون تگ ul نهایت استفاده رو کرد و تمامی مقادیری رو که به topNav دادیم رو به bigBarNavigation بدیم و هیچ نیازی به تگ div پیدا نکنیم!

۷- استفاده بهتر از قرارداد‌های نام‌گذاری

توضیحی خاصی نیست، جز اینکه همیشه سعی کنید نامی رو انتخاب کنید که در موقعیت‌های مختلف بیانگر محتوای خود باشد. همونطور که در تصویر می‌بینید نام Red Italic شاید در حال حاضر نام خوبی باشه، اما ممکنه در آینده قرمز و بلد باشه. در اون صورت نام Red Italic اصلاْ مناسب نیست!

نام‌های خوب برای کلاس‌ها و شناسه‌ها (ID, Class ):
“mainNav,” “subNav,” “sidebar,” “footer,” “metaData,”
اینها کاملاْ شرح می‌دن که چه چیزی رو شامل شدن و در همه حال معنادار هستند.
و اما نام‌های نا مناسب برای کلاس و شناسه:
“bigBoldHeader,” “leftSidebar,” and “roundedBox.”

۸- واگذاری فنون چاپ به css

فکر می‌کنم این نکته زیاد بکار فارسی نیاد!
برای مثال شما می‌تونید در منوهای راهبری، بجای تایپ مستقیم حروف بزرگ در html از خصوصیت‌های css در بزرگ نشان دادن تمامی کاراکتر‌های کوچک بهره ببرید.

9. Class/id the <body>

می‌شه به عناصر هر دو نوع شناسه و کلاس ( ID/Class ) رو نسبت داد. این شیوه می‌تونه کمک بزرگی در ایجاد صفحات طولانی باشه.

۱۰- معتبر ساختن

هنگامی که شما می‌خواهید با استفاده از یک ماشین معتبر سازی کدتان را معتبر کنید، ممکن است ایراد‌های کوچکی را از کدتان بگیرد. ایرادهایی که در رندر صفحه شاید به چشم نیان، اما اشتباه هستند. مسلماْ کد‌های معتبر عمر بیشتری نسبت به کد‌های غیر اصولی دارند. به تصویر دقت کنید!

۱۱- رعایت ترتیب منطقی

دقیقاْ همونطور که در اسلام به این نکته که هر کاری رو باید بجاش انجام بدی توصیه شده، در w3c هم همینه! شما نباید footer رو قبل از Content و یا Navigation بیارید. حتی در صورتی که با استفاده از css و اعمال خصیصه‌هایی footer در پایین‌ترین بخش صفحه بنمایش در بیاد.
می‌شه گفت باید طوری قرار داد که زمانی که css هم استفاده نمی‌شه ترتیب بهم نخوره.

۱۲- فقط اصول گفته شد!

الان نکته‌هایی رو میدونید که با استفاده از اونها میتونید نوشتن یک کد درست و تمیز رو شروع کنید. و البته نکته اصلی همینه که این تنها اصول داشتن کد درست و تمیز بود. می‌تونید صفحات html خوبی با این اصول بنویسید. اما اگر از یک CMS استفاده می‌کنید، که شاید کد واقعاْ تمیزی نداشته باشه چی؟؟؟ باید تمرین کنید و بفهمید که چطور این تکنیک‌ها رو در صفحاتتون بکار بگیرید!!!

متن اصلی
پ ن / نوشته‌های بالا ترجمه دقیقی از متن اصلی نیست. یکم تغییر کرده!!!

وبلاگ شخصی مهدی مشتاقی