เราเขียนโค้ดตามรูปแบบตามมาตรฐานไปทำไม? Coder มือใหม่หลายๆคนอาจจะยังไม่รู้หรือบางคนทำงานหรือเรียนมานานแล้วก็ไม่ได้ใส่ใจก็มี (ลองดูสิจะเห็นความแตกต่างมากครับ ไม่เฉพาะกับ CSS นะครับ การเขียนโปรแกรมทุกภาษาเลย) การเขียนให้เป็นมาตรฐานนี้มันจะช่วยให้โค้ดของเรานั้นสามารถจัดการได้ง่ายขึ้น ดูเป็นระบบระเบียบมากขึ้น แล้วยิ่งในกรณีที่มีคนอื่นทำงานร่วมกับเราด้วย จะได้ลดปัญหาที่อาจจะเกิดขึ้นได้ จากการอ่านโค้ด เพราะโค้ดที่เราเขียนขึ้นมานั้นหากเขียนถูกต้องตามมาตรฐานแล้วมันจะทำให้อ่านได้ง่ายขึ้น และนั่นก็จะช่วยให้ debugging ได้ง่ายขึ้นอีกด้วย

Block Style

selector {
    property: value;
}

• แต่ละ selector ควรแบ่งเป็นบรรทัดของตัวเอง ถ้าต้องการประกาศหลายๆ selector ต่อกัน ควรใช้เครื่องหมาย comma (,) ปิด selector แล้วตัวต่อมาก็ขึ้นบรรทัดใหม่
• Property-value ก็ควรแบ่งเป็นบรรทัดเหมือนกัน และควรใช้ indent มา 1 tab และปิดด้วยเครื่องหมาย semicolon (;)
• การใช้เครื่องหมายปีกกาปิด (}) ควรไว้ชิดซ้ายสุด ตรงกับตำแหน่งที่เราเปิด selector เอาไว้
• แต่ส่วนแต่ละส่วนโดยการเว้นบรรทัดว่างไว้ 2 บรรทัด แต่ภายใน block เดียวกัน ไม่ควรเว้นว่างไว้

แบบที่ถูกต้อง:

#selector-1,
#selector-2,
#selector-3 {
    background: #fff;
    color: #000;
}

แบบที่ไม่ถูกต้อง:

#selector-1, #selector-2, #selector-3 {
    background: #fff; color: #000;
    }

แบบนี้ก็ไม่ถูกต้อง:

#selector-1 { background: #fff; color: #000; }

Selectors

• การตั้งชื่อตัว selector ควรใช้ตัวอักษรตัวพิมพ์เล็ก (lowercase) และใช้เครื่องหมายยัตภังค์ (hyphen หรือเครื่องหมาย -) แทนการใช้ตัวพิมพ์ใหญ่มาเชื่อมต่อคำหรือใช้ตัวขีดเส้นใต้ (underscore หรือ _)
• ใช้ภาษาที่มนุษย์อ่านออก ตั้งชื่อให้สื่อความหมายว่า selector ตัวนี้คืออะไร

แบบที่ถูกต้อง:

#comment-form {
    margin: 0;
}

แบบที่ไม่ถูกต้อง:

#commentForm { /* Avoid camelcase. */
    margin: 0;
}
#comment_form { /* Avoid underscores. */
    margin: 0;
}
#c1-xr { /* What is a c1-xr?! Use a better name. */
    margin: 0;
}

Properties and Values

• Properties ควรเรียงตามลำดับตัวอักษร ยกเว้นในบางกรณี เช่น หากประกาศ width และ height ทั้งคู่ 2 properties นี้ควรอยู่ด้วยกัน
• Properties ควรตามด้วยเครื่องหมาย Colon (:) และเว้นวรรค 1 วรรค ก่อนระบุค่า
• ทุก properties และ values ควรเป็นตัวอักษรพิมพ์เล็ก (lowercase) ยกเว้นชื่อฟอนต์หรือ properties เฉพาะบางตัว
• ใช้ hex code สำหรับการใส่สี และพยายามไม่ใช้รูปแบบ RGB และตัวพิมพ์ใหญ่ (uppercase) และใช้ค่าที่สั้นที่สุดถ้าเป็นไปได้ เช่น ในกรณีให้ค่าสีขาว ควรให้เป็น #fff แทน #FFFFFF
• ใช้รูปแบบ shorthand (ยกเว้นในบางกรณี) สำหรับค่าใน background, border, font, list-style, margin และ padding (แล้ว shorthand คืออะไร? เดี้ยวจะมีตัวอย่างในท้ายหัวข้อนี้ครับ)

การใช้ prefixed ของแต่ละ vendor ก่อน

#selector-1 {
    -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
}

ในกรณี properties ของ position (top, right, bottom, left) ควรจัดเป็นกลุ่มโดยนอกเหนือกฏของการเรียงลำดับตัวอักษรไป และใช้ tab ในการ indent เข้าไปอีก 1 ที

#selector-1 {
    font-size: 1em;
    position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    width: 100px;
    z-index: 1;
}

ถ้าหาก width และ height ถูกประกาศมาด้วยกัน ก็ให้เขาทั้งคู่มาต่อกันเลย โดย height ควรอยู่ติดใต้ weight

#selector-1 {
    width: auto;
    height: auto;
}

ส่วน shorthand คืออะไร?
เช่น ในกรณีที่เราเขียน margin เราไม่จำเป็นต้องเขียนแบบนี้เลย เนื่องจาก margin ค่าจะไล่ตามทิศทางการหมุนของนาฬิกาอยู่แล้ว (clock-wise positions)

.box {
    margin-top: 10px;
    margin-right: 20px; 
    margin-bottom: 10px;
    margin-left: 20px;
}

ซึ่งเราสามารถเขียนแบบนี้ได้เลย ซึ่งทำให้โค้ดเราสั้นลงด้วย

.box {
    margin: 10px 20px 10px 20px;
}

รวมถึงหากเราจะให้ค่า top และ bottom มีค่าเท่ากันคือ 10px และ left และ right มีค่าเท่ากันคือ 20px เราก็สามารถเขียนแบบนี้ได้เลย

.box {
    margin: 10px 20px;
}

หรือในกรณีที่เหมือนด้านบน แต่ไม่ต้องการให้ bottom มีค่าอะไร ก็สามารถทำแบบนี้ได้เลย

.box {
    margin: 10px 20px 0;
}

ลองดูตัวอย่างของการเขียน border นะครับ

.box {
    border-top: 1px;
    border-right: 1px;
    border-bottom: 1px; 
    border-left: 1px;
    border-color: blue;
    border-style: solid}

เราก็สามารถรวมทั้งหมดมาเขียนแบบนี้ได้เลย

.box {
    border: 1px blue solid;
}

Comments

/* Short comments: one line with no trailing space. */
#selector-1 {...

#selector-1 {
    color: #000; /* A short comment can also follow one property/value pair. */
}

/*
For longer, multiple line comments that need more room,
add a newline before and after the comment.
Leave one line of space before the next block.
*/

#selector-1 {...

สำหรับการขึ้นหัวข้อใหม่ (section) ก็ควรเว้นบรรทัด 2 บรรทัดจากส่วนอื่นครับ

#previous-block {
    color: #000;
}


/* =Name of section
-------------------------------------------------------------- */

#selector-1 {...

หวังว่าคงเป็นประโยชน์ไม่มากก็น้อยนะครับ
ขอให้มีความสุขกับการเขียน CSS ครับ : )

รวบรวมและแปลจาก WordPress’s Codex : CSS Coding Standards และ CSS Shorthand