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

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

HTML sucks

I’ve read about this on a few sites but now I’m sure:
HTML is stupid!!1
I can’t believe there’s no way to control the styling of
my website without doing everything all over again!

My first CSS-only redesign

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.

It’s awesome!

نوشتن کاراکتر اضافی از مراجع : تا جایی که می‌توانید از بکار بردن کاراکتر اضافی موجود در مراجع UTF-8 مانند — ، ” و ☺ پرهیز کنید در کدهای خود تا خوانا تر شوند. تنها مورد استفاده صحیح از این کاراکترها را می‌توان در نوشتن کاراکترهای معنایی مانند < و & دانست و یا کاراکترهایی که نمایش داده نمی‌شوند مانند فاصله یا همان   در موارد مورد نیاز …

تگ‌های اختیاری : در HTML5 بسیاری از تگ را می‌توان برای کاهش حجم فایل و خوانا تر کردن آن برای دیگر توسعه دهندگان خود می‌خواهند به طور اجمالی کد ما را بررسی کنند مفید است. البته تنها تعدادی از برچسب یا همان تگ‌ها را مجاز به حذف کردن هستیم که آن هم شرایط خاصی دارد. برای اطلاعات بیشتر پیشنهاد می‌کنیم مطلب #optional-tags را بخوانید.

Sic.

Qed.

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

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

قالب بندی عمومی : برای نوشتن کد بلوک ، لیست و جدول از خط جدید برای هر یک از عناصر استفاده کنید و زیر عنصرها را مانند مثال زیر با دو فاصله ( Space ) که در بالاتر بررسی کردیم دندانه دار و با نظم کنید.

نمونه متن برای نمایش در صفحه وب ...

• مریم
• مهشید
• نیلوفر

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

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

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

/* توصیه نمی‌شود */
#yee-1911 {}
.button-blue {}
.clear {}

/* صحیح */
#gallery {}
#login {}
.video {}
.aux {}
.alt {}

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

/* توصیه نمی‌شود */
#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;

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

margin: 0;
right: 0;

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

font-size: .8em;

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

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

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

/* توصیه نمی‌شود */
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 {}

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

[ Google HTML/CSS Style Guide ]
منبع تور تک