Code Guide by @mdo, Translated by @SpencerAung

Golden rule

ဒီအများလက်ခံထားတဲ့ (သို့) ကိုယ်ပိုင် စည်းမျည်းတွေကို အမြဲသုံးဖို့ အားပေးပါရစေ။ သေးသေးလေးပဲဖြစ်ဖြစ် အကြီးကြီးပဲဖြစ်ဖြစ် အမှားပါခဲ့ရင် အသိပေးဖို့ တောင်းဆိုပါတယ်။ ဒီ guide မှာ ထပ်ထည့်ချင်ရင် သို့ ကူညီချင်ရင် ကျေးဇူးပြုပြီး Github မှာ issue ဖွင့်ပေးပါ။ ဘာသာပြန်တာနဲ့ ပတ်သက်ပြီး ကူညီချင်ရင်တော့ ဒီမှာ issue ဖွင့်ပေးနိုင်ပါတယ်။

ပါဝင်တဲ့လူ(contributor) ဘယ်လောက်များများ code လိုင်းကြောင်းတိုင်းက တစ်ယောက်တည်း ရေးထားသလို ဖြစ်နေပါစေ။

Syntax

Environment ပြောင်းသွားလည်း အမြဲပုံစံတူပေါ်အောင် space နှစ်ချက်နဲ့ soft tab ကိုသုံးပါ။
Nested element တွေကို indent တစ်ခါ(space နှစ်ချက်)ပဲလုပ်ပါ။
Attribute တွေမှာ အမြဲ double quote သုံးပါ။ Single quote ဘယ်တော့မှ မသုံးပါနဲ့။
Self-closing element တွေမှာ အဆုံးပိတ် slash မထည့်ပါနဲ့။ HTML5 specအရ သူတို့ကို ချန်ထားလို့ရပါတယ်။
ချန်ထားလို့ရတဲ့ closing tags တွေကို မချန်ခဲ့ပါနဲ့။ (ဥပမာ၊ </li> သို့ </body>).

<!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>

HTML5 doctype

HTML page တိုင်းမှာ doctype နဲ့စပြီး တတ်နိုင်သမျှ browser အားလုံးမှာ စံအဖြစ်နဲ့ တသမတ်တည်း ပေါ်အောင်လုပ်ပါ။

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

Language attribute

From the HTML5 spec:

Root html element မှာ lang attribute ထည့်ရေးခြင်းအားဖြင့် document ရဲ့ ဘာသာစကားကို သတ်မှတ်ဖို့ တိုက်တွန်းပါတယ်။ ထိုသို့လုပ်ခြင်းအားဖြင့် အသံထွက်ဖတ်တဲ့ စနစ်တွေက ဘယ်ဘာသာနဲ့ အသံထွက်ရမလဲဆိုတာ၊ ဘာသာပြန်စနစ်တွေကလည်း ဘယ်လို စည်းမျဥ်းသုံးရမလဲဆိုတာ အစရှိသဖြင့် သိနိုင်ပါတယ်။

Spec ထဲမှာ lang attribute အကြောင်း ဆက်လက်ဖတ်ရှုနိုင်ပါတယ်။

ဘာသာစကား အတိုကောက် code စာရင်းကိုတော့ Sitepoint မှာ သွားရောက်ကြည့်ရှုနိုင်ပါတယ်။

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

IE compatibility mode

Page ကို ဘယ် IE version သုံးပြီး ပြရမလဲ ဆိုတာ <meta> tag နဲ့ ဖော်ပြခွင့်ကို Internet Explorer မှာ ခွင့်ပြုထားပါတယ်။ တခြားအကြောင်းအရာမရှိရင် IE ကို နောက်ဆုံးပေါ် edge modeသုံးဖို့ လမ်းညွန်စေချင်ပါတယ်။

For more information, read this awesome Stack Overflow article.

ပိုပြီးသိချင်ရင် ဒီ အမိုက်စား Stack Overflow ဆောင်းပါးမှာသာ ဖတ်ကြည့်ပါ။

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Character encoding

Content တွေ ကောင်းကောင်းမွန်မွန်ပေါ်အောင် အလွယ်တကူ character encoding ကို သီးသန့်ကြေငြာပြီး စိတ်ချလက်ချသုံးနိုင်ပါတယ်။ အဲ့လိုဆိုရင် HTML ထဲမှာ character entities တွေ မသုံးလည်းရပါတယ်။ သူတို့ encoding က documentနဲ့ ညီရင်ပေါ့ (ပုံမှန်အားဖြင့် UTF-8 ပါ)။

<head>
  <meta charset="UTF-8">
</head>

CSS and JavaScript includes

HTML5 spec အရ၊ CSS နဲ့ Javascript files တွေထည့်တဲ့ အခါမှာ ပုံမှန်အားဖြင့် type ကို ကြေငြာပေးစရာ မလိုပါဘူး။ သူတို့တွေအတွက် text/css နဲ့ text/javascript တွေက default တန်ဖိုးတွေ မို့လို့ပါ။

HTML5 spec links

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

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

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

Practicality over purity

HTML စံနှုန်းနဲ့ လုပ်ထုံးတွေကို လိုက်နာဖို့ ကြိုးစားပါ။ ဒါပေမဲ့ လက်တွေ့မှာ အသုံးမဝင်တာတွေကိုတော့ လိုက်လုပ်စရာမလိုပါဘူး။ တတ်နိုင်သမျှ markup နည်းနည်းနဲ့ ရှင်းရှင်းလင်းလင်း ရေးပါ။

Attribute order

ဖတ်ရတာလွယ်အောင် HTML attributes တွေကို အစဥ်လိုက် သတ်သတ်မှတ်မှတ် ရေးပါ။

class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*

Class တွေက ပြန်သုံးလို့ ကောင်းတဲ့ component တွေဖြစ်တဲ့အတွက် သူတို့က အရင်လာရပါမယ်။ Id တွေက အတိအကျသုံးရတဲ့ အရာမို့လို့ လျော့သုံးသင့်ပါတယ် (ဥပမာ၊ in-page bookmarks)။ ဒါကြောင့် သူတို့က ဒုတိယ အနေနဲ့ လာပါမယ်။

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

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

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

Boolean attributes

Boolean attribute ဆိုတာ value သတ်မှတ်ပေးစရာမလိုတဲ့အရာပါ။ XHTML မှာ value ထည့်ပေးဖို့လိုပေမဲ့ HTML5 မှာတော့ မလိုပါဘူး။

ဒီ့ထက် ပိုဖတ်ချင်ရင်တော့ WhatWG ရဲ့ on boolean attributes ဆိုတဲ့ အပိုင်းကို ကြည့်ပါ:

Element တစ်ခုမှာ boolean attribute ပါရင် true value လို့ သတ်မှတ်ပါတယ်။ မပါရင်တော့ false value လို့ မှတ်ယူပါတယ်။

မလိုအပ်ပေမဲ့ attribute value ကို ထည့်မှရမယ်ဆိုရင်တော့ ဒီ WhatWG guideline အတိုင်းလိုက်လုပ်ပါ။

Attribute ထည့်မယ်ဆိုရင် သူ့ value သည် string အလွတ် သို့မဟုတ် [...] attribute ရဲ့ အမည် (အစနဲ့ အဆုံးမှာ မမြင်ရတဲ့ whitespace တွေမပါပဲ) ဖြစ်ရပါမယ်။

တိုတိုပြောရရင် value တစ်ခုမှ မထည့်ပါနဲ့။

<input type="text" disabled>

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

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

Reducing markup

HTML ရေးရင် မလိုအပ်တဲ့ paraent element တွေကို ဖြစ်နိုင်သမျှ လျော့သုံးပါ။ အဲ့လို HTML နည်းကောင်းလုပ်ဖို့က အကြီမ်ကြိမ် ပြန်စစ် ပြန်ပြင်ဖို့ လိုပါလိမ့်မယ်။ အောက်ပါ ဥပမာကို ကြည့်ပါ။

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

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

JavaScript generated markup

Javascript file ထဲမှာ markup ရောရေးထားရင် ရှာရခက်၊ ပြင်ရခက်၊ ပြီးတော့ performance လည်း လျော့နည်းစေပါတယ်။ တတ်နိုင်သမျှ ရှောင်ပါ။

Syntax

Environment ပြောင်းသွားလည်း အမြဲပုံစံတူပေါ်အောင် space နှစ်ချက်နဲ့ soft tab ကိုသုံးပါ။
Selector တွေကို ပေါင်းရေးရင် တစ်လိုင်းမှာ selector တစ်ခုပဲ ရေးပါ။
Block ကြေငြာရင် ဖတ်ရတာ ရှင်းလင်းအောင် ကွင်းစ အရှေ့မှာ space တစ်ခုခံပေးပါ။
Block ကွင်းပိတ်ကို လိုင်းအသစ်မှာ ရေးပါ။
Declaration တိုင်းမှာ : အဆုံးမှာ space တစ်ခုထည့်ပေးပါ။
Error report မှာ တိတိကျကျသိရအောင် declaration တိုင်းကို တစ်လိုင်းစီခွဲပြီး ရေးပေးပါ။
Declaration တိုင်းကို semi-colon နဲ့ ပိတ်ပေးပါ။ နောက်ဆုံး declaration ကတော့ ချန်ခဲ့လို့ရပါတယ်။ ဒါပေမဲ့ error ပိုဖြစ်တတ်ပါတယ်။
Comma ခံရေးရတဲ့ value တွေမှာ comma တစ်ခုပြီးတိုင်း space တစ်ခုထည့်ပေးပါ။ (ဥပမာ၊ box-shadow)
rgb(), rgba(), hsl(), hsla(), သို့ rect() တွေရဲ့ အတွင်းက value တွေမှာတော့ comma နောက်မှာ space မထည့်ပါနဲ့။ ဒီနည်းအားဖြင့် color value တွေနဲ့ တစ်ခြား property value တွေကို ခွဲခြားရလွယ်ကူစေပါတယ်။
Color parameter နဲ့ property value တွေကို သုညနဲ့ စ မရေးပါနဲ့။ (ဥပမာ၊ 0.5 အစား .5၊ -0.5px အစား -.5px
Hex value အားလုံးကို စာလုံးအသေးနဲ့ ရေးပါ။ ဥပမာ၊ #fff။ စာလုံးအသေးတွေက တစ်ခုနဲ့ တစ်ခု ပုံသဏ္ဌာန်မတူတဲ့အတွက် Document ကို တစ်ချက်ကြည့်ရုံနဲ့ အလွယ်တကူ ခွဲမြင်နိုင်လို့ပါ။
ရေးလို့ ရတဲ့နေရာတိုင်း hex value တွေကို အတိုကောက်ရေးပါ။ ဥပမာ၊ #ffffff အစား #fff။
Selector ထဲက attribute value တွေကို quote နဲ့ ရေးပေးပါ။ ဥပမာ၊ input[type="text"]။ တစ်ချို့နေရာတွေမှာပဲ ချွင်းချက်ရှိပြီး တသတ်မတ်တည်းဖြစ်ဖို့ ကောင်းတဲ့ အကျင့်တစ်ခုပါ။
သုည တန်ဖိုးတွေမှာ unit မထည့်ပါနဲ့။ ဥပမာ၊ margin: 0px; အစား margin: 0;။

ဒီမှာ သုံးသွားတဲ့ အခေါ်အဝေါ်တွေနဲ့ ပတ်သက်ပြီး မေးစရာရှိမယ်ဆိုရင် Wikipedia the Cascading Style Sheets ဆောင်းပါးရဲ့ syntax အပိုင်း ကိုကြည့်ပါ။

/* 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: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

Declaration order

သတ်ဆိုင်တဲ့ property declarations တွေကို အောက်ပါ အစီအစဥ်အတိုင်း ပေါင်းရေးသင့်ပါတယ်။

Positioning
Box model
Typographic
Visual

Positioning က ဘာကြောင့် အရင်လာရလည်း ဆိုတော့ element ကို document ရဲ့ ပုံမှန် flow ကနေ ဖယ်ထုတ်ပစ်နိုင်ပြီး box model နဲ့ ဆိုင်တဲ့ style တွေကို ပြင်ရေးလိုက်နိုင်လို့ပဲ ဖြစ်ပါတယ်။ အဲ့ဒါပြီးရင်တော့ component နေရာချပုံနဲ့ dimensions နဲ့ ဆိုင်တဲ့ Box model လာပါမယ်။

ကျန်တာတွေအကုန်လုံးက component အတွင်းမှာဖြစ်တဲ့အရာတွေ၊ တစ်နည်းအားဖြင့် အရှေ့က အပိုင်းနှစ်ခုကို သက်ရောက်မှု မရှိတာကြောင့် နောက်ဆုံးမှာ ထားတာ ဖြစ်ပါတယ်။

Property တွေနဲ့ သူတို့ အစီအစဥ် အပြည့်အစုံကို Recessမှာ သွားရောက်ကြည့်ရှုနိုင်ပါတယ်။

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

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

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

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

  /* Misc */
  opacity: 1;
}

`@import` မသုံးပါနှင့်

<link> နဲ့ ယှဥ်ရင် @import က ပိုပြီး နှေးပါတယ်။ Page request တွေလည်း ပိုလုပ်ပါတယ်။ မမျှော်လင့်ထားတဲ့ ပြဿနာတွေလည်း ဖြစ်တတ်ပါတယ်။ သူ့ကို ရှောင်ပြီး တစ်ခြားနည်းလမ်း သုံးပါ -

<link> elements များ သုံးပါ။
Sass သို့ Less အစရှိတဲ့ preprocessor တစ်ခုခုသုံးပြီး CSS code တွေကို file တစ်ခုထဲသို့ compile လုပ်ပါ။
Rails ၊ Jekyll နှင့် တစ်ခြား environment တွေမှာ ပါတဲ့ feature တွေသုံးပြီး CSS file တွေကို ပေါင်းပါ။

ပိုသိချင်ရင်တော့ Steve Souders ရဲ့ ဒီ ဆောင်းပါးကို ဖတ်ကြည့်ပါ။

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

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

Media query placement

ဖြစ်နိုင်သမျှ media queriey တွေကို သူတို့နဲ့ ဆိုင်တဲ့ rule set အနီးမှာ ထားပေးပါ။ အားလုံးစုပြီး stylesheet တစ်ခုထဲမှာ ထည့်တာမျိုး၊ document အဆုံးမှာ ထည့်တာမျိုး မလုပ်ပါနဲ့။ အဲ့လိုလုပ်ရင် နောင်မှာ မမြင်ပဲ မေ့ကျန်ခဲ့နိုင်ပါတယ်။ အသုံးများတဲ့ ပုံစံကို ဒီမှာ ကြည့်ပါ။

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

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

Prefixed properties

Vendor prefixed property တွေသုံးတဲ့ အခါမှာ multi-line edit လုပ်ရလွယ်အောင် property တစ်ခုစီကို value အလိုက် ဒေါင်လိုက် စီပေးပါ။

In Textmate, use Text → Edit Each Line in Selection (⌃⌘A). In Sublime Text 2, use Selection → Add Previous Line (⌃⇧↑) and Selection → Add Next Line (⌃⇧↓).

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

Single declarations

Declaration တစ်ခုပဲပါတဲ့ အခါမှာတော့ ဖတ်ရလွယ်၊ ပြင်ရမြန်အောင် rule set မှာ တစ်လိုင်းမဆင်းလို့ရပါတယ်။ တစ်ခုထက်ပိုတဲ့ declaration ဆိုရင်တော့ တစ်လိုင်းစီခွဲပေးပါ။

ဒီနေရာမှာ အဓိကအချက်ကတော့ error ကို ရှာနိုင်ဖို့ဖြစ်ပါတယ်။ ဥပမာ၊ CSS validator (အမှားရှာပေးတဲ့ program)က လိုင်း 183 မှာ ရေးပုံမှားနေတယ်လို့ ပြောတယ်ဆိုပါစို့။ Declaration တစ်ခုထဲဆိုရင် ရှာမတွေ့နိုင်စရာ အကြောင်းမရှိပါဘူး။ Declaration တွေများရင်တော့ လိုင်းသက်သက်စီ ခွဲထားတာက စိတ်မရှုပ်ရပါဘူး။

/* 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; }

Shorthand notation

တမင်ကြေငြာဖို့လိုတဲ့ အခါကလွဲပြီး value အားလုံးကို အတိုကောက်ရေးတာကို လျော့ဖို့ ကြိုးစားပါ။ အတိုကောက်အဖြစ်နဲ့ အသုံးလွန်တဲ့ property တွေကတော့

padding
margin
font
background
border
border-radius

တို့ပဲ ဖြစ်ပါတယ်။

အတိုကောက် ဖော်ပြလို့ရတဲ့ value တိုင်းကို မကြာခဏ သတ်မှတ်ပေးစရာမလိုပါဘူး။ ဥပမာအနေနဲ့၊ HTML heading မှာ top နဲ့ bottom margin ပဲ သတ်မှတ်ကြပါတယ်။ ဒါကြောင့် လိုအပ်တဲ့အခါမှသာ အဲ့ဒီ value နှစ်ခုကို ပြင်ရေးပါ။ အတိုကောက် property တွေကို အလွန်အကျွံသုံးခြင်းအားဖြင့် မလိုအပ်ပဲ ပြင်ရေးမိတာ(overwrite)၊ မရည်ရွယ်တဲ့ အကျိုးသက်ရောက်မှုတွေဖြစ်ပြီး အမှားများတဲ့ code ဖြစ်စေတတ်ပါတယ်။

အတိုကောက် ရေးပုံရေးနည်းနဲ့ သူတို့ ဘယ်လိုအလုပ်လုပ်လဲဆိုတာ သိချင်တဲ့ လူတွေအတွက် Mozilla Developer Network မှာshorthand properties ဆိုတဲ့ အရမ်းကောင်းတဲ့ ဆောင်းပါးတစ်ပုဒ်ရှိပါတယ်။

/* 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;
}

Nesting in Less and Sass

မလိုအပ်ပဲ nesting လုပ်ခြင်းကို ရှောင်ပါ။ Nesting လုပ်လို့ရတယ်ဆိုတိုင်း အမြဲမလုပ်သင့်ပါ။ Parent scope အတွက် style ရေးဖို့လိုတာမျိုး၊ element အရေအတွက်များများကို nest လုပ်ဖို့လိုတာမျိုးမှသာ nesting လုပ်ဖို့ စဥ်းစားပါ။

ဆက်လက် ဖတ်ရန်၊

Nesting in Sass and Less

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

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

Operators in Less and Sass

သင်္ချာ အတွက်အချက်ရေးတဲ့အခါ ဖတ်ရလွယ်အောင် တန်ဖိုး၊ ကိန်းဂဏန်း၊ သင်္ကေတတွေကြားမှာ space တစ်ခုခံပြီး ကွင်းစ၊ ကွင်းပိတ်နဲ့ ထည့်ရေးပေးပါ။

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

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

Comments

Code ကို ရေးသား ထိန်းသိမ်းပြုပြင်သူများမှာ လူတွေပဲ ဖြစ်ပါတယ်။ အဲ့ဒါကြောင့် မိမိ code ကို သူများ နားလည်လွယ်အောင် comment များနှင့် ရည်ရွယ်ချက်ကို ရှင်းလင်းအောင် ရေးသားပေးပါ။ ကောင်းမွန်တဲ့ code မှာ အကြောင်းအရာနဲ့ ရည်ရွယ်ချက်ကို comment များမှာ ဖော်ပြထားပါတယ်။ Component သို့ class name ကို ဒီအတိုင်းပြန်မရေးပါနဲ့။

Comment များရင် ဝါကျ အပြည့်အစုံနဲ့ ရေးပြီး မှတ်စုကြမ်းများကို စကားစု အတိုများဖြင့် ရေးပါ။

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

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

Class names

Class name တွေကို စကားလုံးအသေးနှင့် dash သုံးပါ။ (underscore သို့ camelCase မသုံးပါနှင့်)။ ဆက်စပ်နေတဲ့ class တွေကို ပုံမှန်အားဖြင့် dash နဲ့ခွဲပါတယ်။ (ဥပမာ၊ .btn နှင့် .btn-danger)
တတ်နိုင်သလောက် class name တွေကို တိုတိုနှင့် လိုရင်းသတ်မှတ်ပါ။
အလွန်အကျွံ နာမည် အတိုကောက်ပေးခြင်းကို ရှောင်ပါ။ button ကို .btn လို့ပေးတာ အသုံးဝင်ပေမဲ့ .s ဆိုတာမျိုးကတော့ ဘာအဓိပ္ပါယ်မှ မသက်ရောက်ပါ။
အဓိပ္ပါယ်ရှိတဲ့ နာမည်သုံးပါ။ အမြင်အရပေးတာထက် လုပ်ဆောင်ပုံ၊ တည်ဆောက်ပုံအရ ပေးပါ။
အနီးဆုံး parent သို့ base class နာမည်ပေါ် မူတည်ပြီး class နာမည် အစ (prefix) ကို သတ်မှတ်ပါ။
(style နှင့် ဆန့်ကျင်ဖက်ဖြစ်သော)လုပ်ဆောင်ပုံကို သတ်မှတ်ရာတွင် class များကို .js-* နှင့်စပေးပါ။ သို့သော် ထို class များကို CSS မှာ ထည့်မရေးပါနှင့်။

Sass နှင့် Less variable အမည်များ သတ်မှတ်ရာတွင်လည်း ဤစည်းမျဥ်းများကို အသုံးပြုနိုင်ပါသည်။

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

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

Selectors

Rendering performance အကောင်းဆုံးဖြစ်အောင် element tag အစား class ကို သုံးပါ။
အမြဲသုံးတဲ့ component တွေကို attribute selectors အများအပြားသုံးခြင်းကို ရှောင်ပါ။ (ဥပမာ၊ [class^="...")။ ထိုသို့လုပ်ခြင်းသည် browser စွမ်းဆောင်ရည်ကို ထိခိုက်စေတယ်လို့ သိထားပါတယ်။
Selector များကို တိုအောင်ထားပါ။ Selector တစ်ခုမှာ element သုံးခု အထိပဲ ကြိုးစား သတ်မှတ်ပေးပါ။
လိုအပ်ရင် class ကို အနီးဆုံး parent scope တစ်ခုထဲမှာပဲထားပေးပါ။ (ဥပမာ၊ prefixed class တွေ မသုံးတဲ့ အခါ)

ဆက်လက် ဖတ်ရှုရန်၊

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

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

Organization

Component အလိုက် code ကို အပိုင်းခွဲပြီး ထိန်းသိမ်းပါ။
Comment များကို တသမတ်တည်းပေးတဲ့ အစဥ်အလာကို တည်ဆောက်ပါ။
ကြီးမားတဲ့ document တွေမှာ လျှပ်တပြက်ကြည့်နိုင်ရန် white space ကို တူညီစွာသုံးပြီး code အပိုင်းခွဲပါ။
CSS file များကို page အစား component အလိုက်ခွဲပါ။ Page တွေ ပြောင်းလဲနိုင်သလို component တွေလဲ နေရာရွေ့နိုင်ပါတယ်။

/*
 * 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 { ... }

Editor preferences

Dirty diffs နဲ့ အဖြစ်များတဲ့ code အလွဲတွေကို ရှောင်ရှားရန် သင့် editor ကို အောက်ပါ setting များ သတ်မှတ်ပေးပါ၊

Space နှစ်ချက်စာအတွက် soft-tab ကိုသုံးပါ။
Save လုပ်ချိန်မှာ white space အဆုံးသတ်များကို ဖျက်ထုတ်ပေးပါ။
UTF-8 encoding သုံးပါ။
File အဆုံးမှာ လိုင်းအသစ်တစ်ခု ထည့်ပေးပါ။

Project ရဲ့ .editorconfig file မှာ စောစောက အချက်တွေကို ထည့်ရေးကြည့်ပါ။ ဥပမာအားဖြင့် Bootstrap မှာ ဘယ်လိုလုပ်ထားလဲဆိုတာကို ကြည့်ပါ။. EditorConfig အကြောင်း ဒီမှာ ဆက်လေ့လာနိုင်ပါတယ်။

Table of contents

HTML

CSS

Golden rule

HTML

Syntax

HTML5 doctype

Language attribute

IE compatibility mode

Character encoding

CSS and JavaScript includes

HTML5 spec links

Practicality over purity

Attribute order

Boolean attributes

Reducing markup

JavaScript generated markup

CSS

Syntax

Declaration order

@import မသုံးပါနှင့်

Media query placement

Prefixed properties

Single declarations

Shorthand notation

Nesting in Less and Sass

Operators in Less and Sass

Comments

Class names

Selectors

Organization

Editor preferences

`@import` မသုံးပါနှင့်