توسعه دهندگان موتور جستجوگر گوگل راهنمایی جدید برای بهینه سازی کدهای HTML و CSS انتشار داده‌اند که با خواندن و رعایت ترفند موجود در آن می‌توانید از این به بعد کدهای استانداردتری را در هنگام طراحی سایت بنویسید و مطمئناً باشید که سایت طراحی شده توسط شما توسط ربات‌های این موتور جستجوگر به خوبی خوانده و ثبت ( Index ) می‌شوند. البته با گسترش استفاده از HTML5 و CSS3 و مزایای آن‌ها نسبت به نسخه‌های قبلی این راهنما نیز اکثر موارد را برای استفاده در این زبان برنامه نویسی و طراحی وب فراهم کرده است.

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

ترفند کد نویسی در HTML و CSS توسط گوگل

خبر انتشار نسخه جدید این راهنما با نام Google HTML/CSS Style Guide 2.1 در وبلاگ رسمی وبمستر گوگل امروز با عنوان Coding guidelines for HTML and CSS انتشار پیدا کرده است. در این نوشته سعی می‌کنیم کل این راهنما را به صورت کامل و البته با زبانی ساده تر با هم مرور کنیم چون متأسفانه این سری راهنمایی‌ها در سرویس Google Code قرار دارد و دسترسی کاربران ایرانی به تمامی قسمت این سرویس از طرف گوگل مسدود شده است.

قواعد کلی شیوه کد نویسی

پروتکل : استفاده از پروتکل ( http / https )و یا همان پیش نویس آدرس تصاویر و دیگر فایل رسانه ای در هنگامی که فایل مورد نظر در هر دو پروتکل موجود است کار صحیحی نیست. پیشنهاد می‌شود برای آدرس دهی فایل موجود در سایت خود از آدرس نسبی و برای فایل خارجی بدون نام این پروتکل کد نویسی کنید. مانند مثال زیر

<!-- توصيه نمي‌شود -->
<script src="http://azinweb.com/js/gweb/analytics/autotrack.js"></script>
 
/* توصيه نمي‌شود */
.example {
background: url(http://azinweb.com/images/example);
}
 
<!-- صحيح -->
<script src="//azinweb.com/js/gweb/analytics/autotrack.js"></script>
 
 
/* صحيح */
.example {
background: url(//azinweb.com/images/example);
}

استفاده از فاصله در آخر عبارات : یکی از عادت‌های طراحان و وبمستر ها استفاده ازیم فاصله در انتهای عبارات است. استفاده از این فاصله به هیچ عنوان پیشنهاد نمی‌شود به این علت که اگر شما از تگ HTML مانند <p> به درستی استفاده کنید فاصله مورد نظر به خودی خود ایجاد می‌شود بین عبارات و یا می‌توانید از خواص موجود در CSS برای انجام این کار استفاده کنید. در کد زیر منظور از (_) فاصله , یا همان Space است.

<!-- توصيه نمي‌شود -->
<p>متن مورد نظر_</p>
 
<!-- صحيح -->
<p>متن مورد نظر</p>

نوشتن با حروف کوچک : برای نوشتن نام تگ‌ها و خواص آن‌ها در HTML و نوشتن خواص مربوط به CSS بهتر است همیشه از حروف کوچک استفاده کنید.استفاده از فاصله در آخر عبارات : یکی از عادت‌های طراحان و وبمستر ها استفاده ازیم فاصله در انتهای عبارات است. استفاده از این فاصله به هیچ عنوان پیشنهاد نمی‌شود به این علت که اگر شما از تگ HTML مانند <p> به درستی استفاده کنید فاصله مورد نظر به خودی خود ایجاد می‌شود بین عبارات و یا می‌توانید از خواص موجود در CSS برای انجام این کار استفاده کنید. در کد زیر منظور از (_) فاصله , یا همان Space است.

<!-- توصیه نمی شود -->
<A HREF="/">صفحه اصلی</A>
 
<!-- صحیح -->
<img src="google.png" alt="گوگل">

قواعد کلی استفاده از متا تگ ( Meta )

کد بندی محتوای فایل‌ها : در هنگام نوشتن کدهای جدید مطمئناً شوید که برنامه ویرایشگر متن شما هم اکنون از UTF-8 بدون بایت اضافی جهت ( BOM ) استفاده می‌کند برای مثال در نرم افزار Notepad   6 برای انجام این کار از منوی Encoding گزینه Encode UTF-8 without BOM را کلیک کنید. همچنین استفاده از متا کد بندی محتوا در فایل HTML و اسناد دیگر با استفاده از کدی شبیه به <meta charset=”utf-8″> مفید است اما فایل CSS به صورت پیش فرض باید به این صورت ذخیره سازی شده باشند تا در تمامی مرورگر به خوبی ترجمه شوند.

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

استفاده از TODO : در صورتی که تغییراتی در یک بخش از کد انجام می‌دهید بهتر است با استفاده از کلمه TODO و نوشتن تغییری که انجام داده‌اید یا دلیل آن به از (:) می‌توانید روند توسعه سایت و کدها را برای دیگر کد نویسان و خود راحت کنید. در پروژه‌هایی که به صورت گروهی بر روی کدها کار می‌کنید پیشنهاد می‌شود که بعد از عبارت TODO مانند مثال زیر نام خود را نیز بنویسید.

{# TODO(Ali.Pamenari): centering #}
<center>Test</center>

شیوه یا سبک نوشتن کدهای HTML

تعیین نوع سند : مرورگر وب و موتورهای جستجوگر با دیدن کد <!DOCTYPE html> در ابتدای اسناد HTML شما متوجه می‌شوند که شما از HTML5 برای طراحی و ساخت صفحه وب یا سرویس خود استفاده کرده‌اید. نوشتن این کد در ابتدای همه فایل HTML الزامی است.

کد نویسی صحیح HTML : همیشه سعی کنید کدهای HTML سایت شما بر اساس ساختار کلی این زبان و صحیح نوشته شده باشند تا در تمامی مرورگر به خوبی نمایش داده شوند. برای تائید ساختار و امتحان کدهای HTML5 خود از سرویس W3C HTML validator می‌توانید استفاده کنید ممکن است با نوشتن بعضی از قسمت مانند مثال زیر کد شما خیلی کوتاه‌تر و سبک‌تر شود اما استفاده بیش از حد از این موضوع صحیح بودن کد شما لطمه می‌زند.

<!-- توصيه نمي‌شود -->
<title>عنوان صفحه</title>
<article>اين صفحه براي امتحان ساخته شده است.</article>
 
<!-- صحيح -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>عنوان صفحه</title>
<article>اين صفحه براي امتحان ساخته شده است.</article>

استفاده درست از عناصر HTML : همیشه برای رسیدن به هدف نهایی و طراحی خود از هر عنصری ( element ) در کدهای HTML دقیقاً برای همان منظوری استفاده کنید که برای آن ساخته شده است. مثلاً از عنصر <h1> برای عناوین ، از <p> برای پاراگراف و متون ، از <a> برای لینک دادن و … .

معرفی محتوای چند رسانه‌ای : همیشه برای عنصرهای چند رسانه‌ای که در سایت خود استفاده می‌کنید مانند تصاویر ، ویدئو و تصاویر متحرکی که با عنصر <canvas> ساخته شده‌اند نسخه یا محتوایی قابل فهم نیز برای موتورهای جستجوگر و دیگر کد نویسان و طراحان وب در نظر بگیرید. برای مثال برای تصاویر از خاصیت alt ، برای ویدئو از عنوان یا رونوشت در صورتی که امکان داشت استفاده کنید. اگر تصویری صرفاً جنبه تزئینی داشت بجای استفاده از خاصیت alt بهتر است با استفاده از CSS آن تصویر را نمایش دهیم.

<!-- توصیه نمی‌شود -->
<img src="spreadsheet.png">
 
<!-- صحیح -->
<img src="spreadsheet.png" alt="توضیح کوتاه در مورد تصویر">

جدا بودن فایل خارجی : همیشه سعی کنید با یکی کردن فایل CSS خارجی و اسکریپت ها طول فراخوانی این‌گونه از فایل‌ها را در صورت ممکن کوتاه کنید. هر مقدار این دستورات کوتاه‌تر باشند توسعه دهندگان دیگر بهتر می‌توانند از کد ما را بخوانند و کد تمیز تری را در نهایت داریم.

<!-- توصيه نمي‌شود -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:</p>
<u>HTML is stupid!!1</u>
<center>I can’t believe there’s no way to control the styling of
my website without doing everything all over again!</center>
 
<!-- صحيح -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually
doing it: separating concerns and avoiding anything in the HTML of
my website that is presentational.
<p>It’s awesome!

نوشتن کاراکتر اضافی از مراجع : تا جایی که می‌توانید از بکار بردن کاراکتر اضافی موجود در مراجع UTF-8 مانند &mdash; ، &rdquo; و &#x263a; پرهیز کنید در کدهای خود تا خوانا تر شوند. تنها مورد استفاده صحیح از این کاراکترها را می‌توان در نوشتن کاراکترهای معنایی مانند < و & دانست و یا کاراکترهایی که نمایش داده نمی‌شوند مانند فاصله یا همان &nbsp; در موارد مورد نیاز …

ویژگی Type : در فراخوانی فایل text/css و text/javascript در HTML5 نیازی به استفاده از خاصیت Type وجود ندارد و این مقدار به صورت پیش فرض تعیین شده است.

<!-- توصيه نمي‌شود -->
<link rel="stylesheet" href="//azinweb.com/css/maia.css"type="text/css">
 
<!-- توصيه نمي‌شود -->
<script src="//azinweb.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>
 
<!-- صحيح -->
<link rel="stylesheet" href="//azinweb.com/css/maia.css">
 
<!-- صحيح -->
<script src="//azinweb.com/js/gweb/analytics/autotrack.js"></script>

شیوه یا سبک نوشتن کدهای CSS

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

نام گذاری کلاس و شناسه : در کدهای CSS برای نام گذاری کلاس استفاده شده در عناصر و شناسه آن‌ها ( ID ) برای نسبت دادن خاصیتی به آن از اسامی با معنا و نام‌هایی که برای آن عناصر رزرو شده‌اند استفاده کنید تا کدهای شما خوانا تر شوند.

نحوه نام گذاری صحیح کلاس و شناسه : از نام‌های کوتاه که ممکن است کدهای شما را غیر قابل فهم کنند و یا نام‌های خیلی بلند استفاده نکنید. نام Class و نام ID می‌تواند کمک بزرگی در شناسایی کار و هدف آن‌ها به دیگر توسعه دهندگان بکند.

/* توصیه نمی‌شود */
#yee-1911 {}
.button-blue {}
.clear {}
 
/* صحیح */
#gallery {}
#login {}
.video {}
.aux {}
.alt {}

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

/* توصیه نمی‌شود */
#navigation {}
.atr {}
 
/* صحیح */
#nav {}
.author {}

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

/* توصیه نمی‌شود */
ul#example {}
div.error {}
 
/* صحیح */
#example {}
.error {}

تعیین خصوصیان به صورت مختصر : سعی کنید سبک نوشتن خصوصیات مورد نظر خود را در CSS با استفاده از روش موجود برای این عمل مختصر و کوتاه کنید. برای مثال دو تکه کد زیر هر دو به یک صورت عمل می‌کنند اما کد دوم خیلی بهینه‌تر و سبک‌تر است.

/* توصیه نمی‌شود */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
 
/* صحیح */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

اختصاص مقدار صفر : در هنگامی که می‌خواهید به خاصیتی مقدار 0 را انتساب دهید فرقی نمی‌کند که واحد آن px ، em و … باشد. پس مانند نمونه زیر ساده و بدون تعیین واحد مقدار 0 را انتساب دهید.

margin: 0;
right: 0;

انتساب مقادیر بین 1 و -1 : برای انتساب مقادیر بین 1 و -1 نیازی نیست که قبل از اعشار از 0 استفاده کنید و می‌توانید مانند کد زیر مقدار مورد نظر خود را مشخص کنید.

font-size: .8em;

استفاده از گیومه در آدرس فایل : در آدرس دهی فایل با استفاده از url نیازی نیست که از نشانه‌هایی مانند (‘ ‘) و یا (” “) استفاده کنید.

@import url(//tortak.com/css/go.css);

مقادیر هگزادسیمال : در تعیین رنگ یک عنصر یا اشاره‌گر در CSS در حالتی که از مقادیر هگزادسیمال استفاده می‌کنید در صورت ممکن سعی کنید از نماد 3 کاراکتری این اعداد مانند مثال زیر استفاده کنید.

/* توصیه نمی‌شود */
color: #eebbcc;
 
/* صحیح */
color: #ebc;

استفاده از پیشوند در نام گذاری : در صورتی که قرار است برای پروژه بزرگ و چند بخشی کد نویسی کنید و یا قرار است از پروژه شما در پروژه‌های دیگر استفاده شود با استفاده از یک نام پیشوندی برای نام گذاری کلاس و ID می‌توانید کدهای خیلی قابل فهم تر و قابل ویرایش‌تری را بنویسید. نام پیشوندی خود را با استفاده از یک ( – ) از نام مورد نظر خود جدا کنید.

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

استفاده از ( – ) برای جداسازی : حتماً نام کلاس و ID موجود در کدهای CSS خود را به وسیله کاراکتر ( – ) جداسازی کنید و از استفاده از ( _ ) و یا کاراکتر دیگر برای این منظور استفاده نکنید.

/* توصیه نمی‌شود */
.demoimage {}
.error_status {}
 
/* صحیح */
#video-id {}
.ads-sample {}

استفاده از Hacks : یکی از روش‌هایی که برای نمایش سایت در همه مرورگر به یک صورت رایج شده است استفاده از Hacks است. اما گوگل به شما برای شناسایی مرورگر کاربران استفاده از این روش را پیشنهاد نمی‌کند. شاید استفاده از این روش راه خوبی برای رفع مشکل نمایشی در مرورگر اینترنت اکسپلورر و یا دیگر مرورگر وب باشد اما استفاده آن از در آینده می‌تواند ساختار کد CSS شما را خیلی پیچیده و غیر قابل فهم کند. تا جایی که ممکن است از استفاده از این‌گونه Hacks خودداری کنید.

قواعد قالب بندی CSS

ترتیب نوشتن خاصیت : برای اینکه خاصیت مختلف را برای یک کلاس یا ID خاصی در صفحه مشخص کنید می‌توانید از ترتیب حروف الفبای انگلیسی برای نظم دادن به ترتیب آن‌ها استفاده کنید. البته در هنگامی که نیاز به استفاده از خاصیت خاصی برای مرورگر مختلف هستید مانند پیشوند -moz می‌توانید برای نمایش این خاصیت در کنار خاصیت اصلی تعریق شده این ترتیب بندی را نادیده بگیرید.

background: red;
border: 3px solid;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: blue;
text-align: right;
text-indent: 4em;

قالب بندی زیر بلوک : در بسیاری از موارد ممکن است از یک بلوک کد CSS نیاز باشد در بلوک دیگری استفاده کنید. قالب بندی این گونه کدها برای بهتر نمایش داده شدن و قابل فهم تر بودن نیاز به این دارد که مانند مثال زیر آن‌ها را دندانه دار کنیم.

@media screen, projection {
 
html {
background: #fff;
color: #333;
}
 
}

استفاده از نقطه ویرگول ( ; ) : در پایان تعریف هر خاصیتی در CSS نیاز است که از علامت نقطه ویرگول ( ; ) استفاده شود. درست است که در صورتی که از این علامت در خط آخر یک بلوک استفاده نکنیم شاید مشکلی در نمایش عنصر در صفحه وب ما به وجود نیاید اما خوانایی و نظم کدهای ما را بهم می‌زند.

/* توصیه نمی‌شود */
.test {
display: block;
height: 150px
}
 
/* صحیح */
.test {
display: block;
height: 150px;
}

فاصله بعد از علامت ( : ) : برای خواناتر شدن کدهای CSS بعد از نام هر خاصیت در هنگام تعریف آن‌ها بهتر است بعد از علامت ( : ) که کار انتساب را انجام می‌دهد در این کدها از یک فاصله ( Space ) استفاده کنیم و سپس مقدار مربوطه را بنویسیم.

/* توصیه نمی‌شود */
.test {
display:block;
}
 
/* صحیح */
.test {
display: block;
}

ترتیب تعریف کلاس ، ID و مقادیر : در هنگامی که می‌خواهید به چند کلاس یا عنصر خاص مقادیری را انتساب دهید برای خوانا تر شدن کدها سعی کنید هر کدام از آن‌ها را در یک خط جدا تایپ کنید.

/* توصیه نمی‌شود */
a:focus, a:active {
position: relative; top: 2px;
}
 
/* صحیح */
h1,
h2,
h3 {
font-weight: normal;
line-height: 2.2;
}

جدا کردن بلوک : برای جداسازی بلوک و تعریف مختلف در کدهای خود از یک خط خالی مانند کدهای زیر استفاده کنید.

html {
background: #fff;
}
 
body {
margin: auto;
width: 50%;
}

قواعد اولیه کدنویسی CSS

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

/* Header */
 
#adw-header {}
 
/* Footer */
 
#adw-footer {}
 
/* Gallery */
 
.adw-gallery {}

این 35 نکته یا ترفند می‌تواند کمک بزرگی را برای طراحی وب به صورت استاندارد به شما بکند و با استفاده از آن‌ها می‌توانید بسیاری از مشکلات بوجود آمده از کار گروهی و یا کار کردن بر روی دیگر تکه کدها و پروژها را بین طراحان و توسعه دهندگان وب حل کند. نظر شما در این باره چیست؟

[ Google HTML/CSS Style Guide ]