فهرست محتوا

CSS

HTML

قانون طلایی

Every line of code should appear to be written by a single person, no matter the number of contributors.

همیشه از این قوانین یا موارد شخصی خودتان استفاده کنید. هر خطای کوچک یا بزرگی بود آن را گزارش دهید. در صورت داشتن هرگونه نظر ، پیشنهاد ، انتقاد یا مشارکت یک Issue ثبت کنید.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company" />
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

ترکیب

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

نوع سند HTML5

اجرای حالت استاندارد و رندر گیری بهتر در هر مرورگی با قراردادن این تگ در ابتدای هر فایل HTML انجام خواهد شد.

<html lang="en">
  <!-- ... -->
</html>

ویژگی Language

نقل قول از توضیحات HTML5 :

Authors are encouraged to specify a lang attribute on the root html element, giving the document’s language. This aids speech synthesis tools to determine what pronunciations to use, translation tools to determine what rules to use, and so forth.

در مورد ویژگی lang بیشتر بخوانید. جهت مشاهده لیست کدهای زبان به IANA مراجعه کنید.

<!-- IE10 and below only -->
<meta http-equiv="x-ua-compatible" content="ie=edge" />

سازگاری با IE

این روزها دیگر نیاز نیست جهت سازگاری با Internet Explorer از تگ <meta> مربوط به آن استفاده کرد ، مگر آن که بخواهید از IE نسخه 10 و قبل تر از آن پشتیبانی کنید. این تگ در IE11 حذف شد و دیگر در Microsoft Edge استفاده نمی شود.

جهت اطلاعات بیشتر, این مقاله را بخوانید.

<head>
  <meta charset="utf-8" />
</head>
<body>
  <p>Use an em dash like so—no HTML entity required.</p>
</body>

رمزنگاری کارکتر ها ( رمزگذاری یونیکد )

با اعلام نوع کدگذاری می توانید به راحتی از ارائه صحیح محتوا به کاربران اطمینان پیدا کنید. همچنین این مورد به شما کمک می کند تا از کارکتر های رایج علائم به جای کد HTML آن ها استفاده کنید. برای مثال — به جای &emdash;. البته بعضی کارکتر ها که برای XML رزرو شده اند همچنان باید به حالت قبل استفاده شوند مانند ampersand, non-breaking spaces, less/greater than and quotes—you.

رمزنگاری پیشنهادی UTF-8 می باشد.

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css" />

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

وارد کردن CSS و JavaScript

طبق قواعد HTML5 ، نیازی به تعریف ویژگی type برای فایل های جاوا اسکریپت یا CSS نیست. مانند text/css و text/javascript که این موارد به صورت پیشفرض اعمال شده و صحیح هستند.

لینک قواعد HTML5

<!-- Good -->
<button>...</button>

<!-- Not good -->
<div class="btn" onClick="...">...</div>

صحیح و شفاف

همیشه برای حفظ استاندارد های HTML تلاش کنید. تا جای ممکن کدهایی با کمترین علامت گذاری و مشکل بنویسید

<a class="..." id="..." data-toggle="modal" href="#"> Example link </a>

<input class="form-control" type="text" />

<img src="..." alt="..." />

ترتیب ویژگی ها

ویژگی ها HTML جهت خوانا تر بودن کد باید به ترتیب قرار بگیرند.

ویژگی هایی که برای شناسایی المان ها بیشتر رایج هستند باید در ابتدا بیایند ، مانند class, id, name, و data. باقی ویژگی های شناسایی در مرحله دوم و سپس ویژگی های دسترسی و ظاهری تعریف می شوند.

<input type="text" disabled />

<input type="checkbox" value="1" checked />

<select>
  <option value="1" selected>1</option>
</select>

مقادیر Boolean

ویژگی های صحیح و غلط نیازی به تعریف مقدار ندارند. در XHTML شما باید مقداری برای آن ها داشته باشید ولی در HTML5 چنین چیزی نیاز نیست.

جهت مطالعه بیشتر به این صفحه از WhatWG مراجعه کنید.

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

اگر شما باید مقداری را تعریف کنید ولی به آن نیاز ندارید, از این راهنمایی استفاده کنید :

If the attribute is present, its value must either be the empty string or […] the attribute’s canonical name, with no leading or trailing whitespace.

خلاصه اینکه, نیاز به تعریف مقدار نیست.

<!-- Not so great -->
<span class="avatar">
  <img src="..." />
</span>

<!-- Better -->
<img class="avatar" src="..." />

کاهش تگ ها

تا جای ممکن تگ های اضافی در کد خود استفاده نکنید تا در پایان ، کد HTML کوتاه ، منظم و خوانا تری داشته باشید. برای مثال کد روبرو را نگاه کنید :

تنظیمات ویرایشگر

تنظیمات ویرایشگر خود را به این صورت قرار دهید تا کدهای تمیز و خوانا تری داشته باشید :

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

مطالعه بیشتر :

CSS

// Bad CSS
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin: 0px 0px 15px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 2px #ccc, inset 0 1px 0 #ffffff;
}

// Good CSS
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgb(0 0 0 / 0.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

ترکیب

در این مورد سوالات بیشتری دارید ? به این مقاله در ویکیپدیا مراجعه کنید.

.declaration-order {
  // Positioning
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  // Box model
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;

  // Typography
  font: normal 14px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
  text-decoration: underline;

  // Visual
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  // Misc
  opacity: 1;
}

ترتیب ویژگی ها

در یک بلاک ، ویژگی هایی که در یک دسته بندی مرتبط وجود دارند باید به ترتیب قرار بگیرند :

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

برای مثال در حالی که ویژگی border بخشی از Box Model می باشد ، برخی سیستم ها به صورت کلی ویژگی box-sizing را ریست کرده و با border-box جایگزین می کنند. در این صورت ویژگی border-width دیگر اثری در ابعاد شی ما نخواهد داشت. این مورد همراه با تعریف کردن دو ویژگی border و border-radius باعث خواهند شد این موارد زیرمجموعه بخش Visual یا بصری قرار بگیرند.

ترکیب‌ها و توابع پیش‌پردازنده باید در هر جایی که مناسب‌تر است ظاهر شوند. برای مثال ویژگی border-top-radius به جای border-radius قرار خواهد گرفت یا ویژگی responsive-font-size به جای font-size قرار خواهد گرفت.

جهت مشاهده لیست کامل ویژگی ها و ترتیب آن ها به این مقاله مراجعه کنید.

// Without logical properties
.element {
  margin-right: auto;
  margin-left: auto;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

// With logical properties
.element {
  margin-inline: auto;
  border-block: 1px solid #eee;
}

ویژگی های منطقی

ویژگی های منطقی ( Logical ) جایگزین هایی برای ویژگی های جهت و ابعاد هستند مانند block و inline. به صورت پیشفرض block به جهت های عمودی ( بالا و پایین ) اشاره می کند در حالی که inline به جهت های افقی ( راست و چپ ) اشاره می کند. شما می توانید این ویژگی ها را در تمام قالب های CSS خود با مرورگر های جدید استفاده کنید.

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

مطالعه بیشتر :

.element {
  color: rgb(255 255 255 / 0.65);
  background-color: rgb(0 0 0 / 0.95);
}

رنگ ها

به علت پشتیبانی از رنگ های سطح 4 در تمام مرورگرهای اصلی از این به بعد ویژگی های rgba و hsla به عنوان میانبر برای rga و hsl به حساب می آیند ، بنابراین شما می توانید مقدار شفافیت ( Alpha ) را تنظیم کنید. همچنین در نسخه های جدید از قالب تنظیم مقادیر با فاصله نیز پشتیبانی می شود. جهت تطابق پذیری در آینده سعی کنید از این روش استفاده کنید.

جدای از مقدار رنگ و قالب تعریف آن ، سعی کنید که همیشه رنگ شما قوانین حداقل کنتراست WCAG را رعایت کرده باشد. نسبت 4.5:1 برای 16px یا کمتر و نسبت 3:1 برای مقادیر بزرگتر.

بیشتر بخوانید :

<!-- Use link elements -->
<link rel="stylesheet" href="core.css" />

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

از import@ استفاده نکنید

در مقایسه با <link> قطعا ‌import@ بسیار کند تر عمل می کند. این مورد باعث می شود درخواست های اضافی ثبت شود و خطایابی را بسیار سخت تر می کند. می توانید از راه های جایگزین استفاده کنید :

جهت اطلاعات بیشتر, این مقاله از Steve Souders را مطالعه کنید.

.element {
  ...;
}
.element-avatar {
  ...;
}
.element-selected {
  ...;
}

@media (min-width: 480px) {
  .element {
    ...;
  }
  .element-avatar {
    ...;
  }
  .element-selected {
    ...;
  }
}

انتخاب گر های media@

در صورت استفاده از این انتخاب گر ها ، آن ها در نزدیک ترین مکان به بلاک های مربوطه قرار دهید. هیچوقت آن ها را به صورت جداگانه در جای دیگر ( مثلا آخر کد ها - مانند خیلی از قالب های آماده که خریداری می کنید ) قرار ندهید. جهت سهولت در برنامه نویسی و خطایابی های آینده ، آن ها را کنار بلاک مربوطه استفاده کنید.

// Single declarations on one line
.span1 {
  width: 60px;
}
.span2 {
  width: 140px;
}
.span3 {
  width: 220px;
}

// Multiple declarations, one per line
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url("../img/sprite.png");
}
.icon {
  background-position: 0 0;
}
.icon-home {
  background-position: 0 -20px;
}
.icon-account {
  background-position: 0 -40px;
}

تعریف های یک خطی

در صورتی که بلاک شما فقط یک ویژگی دارد , آن ویژگی و براکت ها را تنها در یک خط قرار دهید تا ویرایش آن سریعتر شده و خوانا تر شود هر قانونی که دارای چند ویژگی باشد باید به صورت خطهای جدا تعریف شود..

نکته کلیدی این مورد ، خطایابی است. برای مثال اگر یک CSS Validator به شما بگوید که در خط 183 مشکلی وجود دارد ، اگر شما تعریف یک خطی داشته باشید کاملا متوجه مشکل خواهید شد. و در صورتی که چند ویژگی داشته باشید ، خط های جداگانه به راحتی شما کمک خواهند کرد.

// Bad example
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

// Good example
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

حالت های خلاصه

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

معمولا نیاز نداریم تا تمام مقادیر را به صورت خلاصه تعریف کنیم. مثلا برای سربرگ ها فقط Margin های بالا و پایین تعریف می شوند. پس بنابراین اگر نیاز بود این دو مقدار را بازنویسی کنید. تعریف یک مقدار 0 به معنی بازنویسی مقدار پیشفرض مرورگر یا ویژگی قبلی خواهد بود.

استفاده بیش از حد از ویژگی‌های ( خلاصه ) کوتاه‌نویسی منجر به کدهای نامرتب‌ تر و عوارض جانبی ناخواسته می‌شود.

Mozilla Developer Network یک مقاله مفید برای افرادی که با این شرایط آشنا نیستند منتشر کرده است..

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
  > th { … }
  > td { … }
}

کدنویسی تو در تو

تا حد امکان از تودرتوی غیرضروری در پیش پردازشگرها (Sass / Less) خودداری کنید - آن را ساده نگه دارید و از تودرتو معکوس خودداری کنید. این روش را فقط در صورتی استفاده کنید که باید سبک‌ها را به یک Parent اختصاص دهید یا اینکه چندین عنصر وجود دارد که باید تودرتو شوند.

بیشتر بخوانید :

// Bad example
.element {
  margin: 10px 0 @variable*2 10px;
}

// Good example
.element {
  margin: 10px 0 (@variable * 2) 10px;
}

عملگرها در پیش پردازنده ها

جهت خوانایی بهتر ، تمام عملگرهای ریاضی را به همراه عملوند ها در یک پرانتز جداگانه با فاصله های خالی قرار دهید.

// Bad example
// Modal header
.modal-header {
  ...
}

// Good example
// Wrapping element for .modal-title and .modal-close
.modal-header {
  ...
}

نظرات درون کد

کدهای شما ممکن است توسط افراد دیگری نیز خوانده یا خطایابی شوند ( برای مثال در پروژه های متن باز یا پروژه های گروهی ). سعی کنید همیشه نظرات مفید و کارآمدی در مورد کدهایی که نوشته اید قرار دهید.

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

// Bad example
.t { ... }
.red { ... }
.header { ... }

// Good example
.tweet { ... }
.important { ... }
.tweet-header { ... }

نام کلاس ها

استفاده از بسیاری از این قوانین در هنگام ایجاد ویژگی های سفارشی و نام متغیرهای پیش پردازنده ها نیز مفید است.

// Bad example
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

// Good example
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

انتخاب گر ها

بیشتر بخوانید :

.custom-table > tbody > tr > td,
.custom-table > tbody > tr > th {
  /* ... */
}

انتخاب گر های فرزندان

در صورت نیاز می توانید از ترکیب کننده فرزندان (>) استفاده کنید تا حالت آبشاری انتخابگر را برای ظاهر بعضی المان ها مانند جداول که معمولا به صورت Recursive هستند به راحتی محدود کنید. از این روش برای محدود کردن اعمال ظاهر روی فرزندان استفاده کنید تا از بازنویسی های بی مورد جلوگیری شود.

//
// Component section heading
//

.element { ... }


//
// Component section heading
//
// Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
//

.element { ... }

// Contextual sub-component or modifer
.element-heading { ... }

سازماندهی