قواعد کلی شیوه کد نویسی
پروتکل : استفاده از پروتکل ( http / https )و یا همان پیش نویس آدرس تصاویر و دیگر فایل رسانه ای در هنگامی که فایل مورد نظر در هر دو پروتکل موجود است کار صحیحی نیست. پیشنهاد میشود برای آدرس دهی فایل موجود در سایت خود از آدرس نسبی و برای فایل خارجی بدون نام این پروتکل کد نویسی کنید. مانند مثال زیر
/* توصیه نمیشود */
.example {
background: url( http://tortak.com/images/example);
}
/* صحیح */
.example {
background: url(//tortak.com/images/example);
}
قواعد کلی قالب بندی
قالب بندی زیر کد : یکی از شیوه های افزایش خوانایی کد در زبان برنامه نویسی و طراحی وب مختلف نوشتن دندانهای کدهایی است که به یک مجموعه تعلق دارند. برای دندانه کردن قسمتی از کدهای خود بجای استفاده از کلید Tab یا مجموعهای از Tab بهتر است از دو فاصله ( Space ) پشت سرهم استفاده کنید.
- صفحه اصلی
- درباره
.example {
color: red;
}
نوشتن با حروف کوچک : برای نوشتن نام تگها و خواص آنها در HTML و نوشتن خواص مربوط به CSS بهتر است همیشه از حروف کوچک استفاده کنید.
استفاده از فاصله در آخر عبارات : یکی از عادتهای طراحان و وبمستر ها استفاده ازیم فاصله در انتهای عبارات است. استفاده از این فاصله به هیچ عنوان پیشنهاد نمیشود به این علت که اگر شما از تگ HTML مانند
به درستی استفاده کنید فاصله مورد نظر به خودی خود ایجاد میشود بین عبارات و یا میتوانید از خواص موجود در CSS برای انجام این کار استفاده کنید. در کد زیر منظور از (_) فاصله , یا همان Space است.
متن مورد نظر_
متن مورد نظر
قواعد کلی استفاده از متا تگ ( Meta )
کد بندی محتوای فایلها : در هنگام نوشتن کدهای جدید مطمئناً شوید که برنامه ویرایشگر متن شما هم اکنون از UTF-8 بدون بایت اضافی جهت ( BOM ) استفاده میکند برای مثال در نرم افزار Notepad ۶ برای انجام این کار از منوی Encoding گزینه Encode UTF-8 without BOM را کلیک کنید. همچنین استفاده از متا کد بندی محتوا در فایل HTML و اسناد دیگر با استفاده از کدی شبیه به مفید است اما فایل CSS به صورت پیش فرض باید به این صورت ذخیره سازی شده باشند تا در تمامی مرورگر به خوبی ترجمه شوند.
نظرات : برای معرفی کار قسمتهای مختلف کد خود به دیگران میتوانیم از نظرات برای توضیح کار هر بخش و چگونگی آن استفاده کنیم. البته این مورد کاملاً اختیاری است و مقدار توضیح در هر یک از نظرات نوشته شده بسته به گستردگی کل طرح شما ممکن است متفاوت باشد.
استفاده از TODO : در صورتی که تغییراتی در یک بخش از کد انجام میدهید بهتر است با استفاده از کلمه TODO و نوشتن تغییری که انجام دادهاید یا دلیل آن به از (:) میتوانید روند توسعه سایت و کدها را برای دیگر کد نویسان و خود راحت کنید. در پروژههایی که به صورت گروهی بر روی کدها کار میکنید پیشنهاد میشود که بعد از عبارت TODO مانند مثال زیر نام خود را نیز بنویسید.
{# TODO(Ali.Yazdi): centering #}
Test
شیوه یا سبک نوشتن کدهای HTML
تعیین نوع سند : مرورگر وب و موتورهای جستجوگر با دیدن کد در ابتدای اسناد HTML شما متوجه میشوند که شما از HTML5 برای طراحی و ساخت صفحه وب یا سرویس خود استفاده کردهاید. نوشتن این کد در ابتدای همه فایل HTML الزامی است.
کد نویسی صحیح HTML : همیشه سعی کنید کدهای HTML سایت شما بر اساس ساختار کلی این زبان و صحیح نوشته شده باشند تا در تمامی مرورگر به خوبی نمایش داده شوند. برای تائید ساختار و امتحان کدهای HTML5 خود از سرویس W3C HTML validator میتوانید استفاده کنید ممکن است با نوشتن بعضی از قسمت مانند مثال زیر کد شما خیلی کوتاهتر و سبکتر شود اما استفاده بیش از حد از این موضوع صحیح بودن کد شما لطمه میزند.
استفاده درست از عناصر HTML : همیشه برای رسیدن به هدف نهایی و طراحی خود از هر عنصری ( element ) در کدهای HTML دقیقاً برای همان منظوری استفاده کنید که برای آن ساخته شده است. مثلاً از عنصر
برای عناوین ، از
برای پاراگراف و متون ، از برای لینک دادن و … .
معرفی محتوای چند رسانهای : همیشه برای عنصرهای چند رسانهای که در سایت خود استفاده میکنید مانند تصاویر ، ویدئو و تصاویر متحرکی که با عنصر ساخته شدهاند نسخه یا محتوایی قابل فهم نیز برای موتورهای جستجوگر و دیگر کد نویسان و طراحان وب در نظر بگیرید. برای مثال برای تصاویر از خاصیت 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 ) که در بالاتر بررسی کردیم دندانه دار و با نظم کنید.
نمونه متن برای نمایش در صفحه وب ...
- مریم
- مهشید
- نیلوفر
درآمد | مالیات |
---|---|
$ 8.50 | $ 4.50 |
شیوه یا سبک نوشتن کدهای 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 ]
منبع تور تک