แจกของฟรี

ต้องทำความเข้าใจกันก่อนว่า อันนี้เป็นมาตรฐานการเขียน css ที่ทาง WordPress แนะนำ ไม่ว่าจะเป็นการใช้ในการทำ theme หรือทำ plugin โดยเราไม่จำเป็นต้องเขียนให้เหมือนอย่างที่มาตรฐานแนะนำก็ได้ แต่ถ้าเขียนตามมาตรฐานจะทำให้คนอื่นที่มาพัฒนาต่อ หรือนำ theme, plugin ของเราไปใช้ต่อ สามารถอ่านโค้ด css ของเราได้ง่าย

โดย WordPress ก็แบ่งอธิบายเป็นส่วน ๆ เพื่อให้ทำความเข้าใจเป็นขั้นตอนดังนี้ครับ


Structure

โครงสร้างในการเขียน css ของแต่ละคนจะแตกต่างกันออกไปอยู่แล้ว แต่วิธีนี้จะเป็นวิธีที่ทำให้ css ของเราง่ายต่อการอ่าน โดยหลัก ๆ ในการเขียนก็คือ

• ใช้ tab ในการทำให้แต่ละคุณสมบัติเยื้อง อย่าใช้การกด space bar เพื่อเว้นวรรค
• เว้น ระยะห่าง 2 บรรทัดสำหรับแบ่งแต่ละส่วน เช่น header, footer, sidebar เป็นต้น และเว้นระยะห่าง 1 บรรทัดสำหรับแบ่งบล็อกในส่วนนั้น ๆ เช่น logo ใน header, menu ใน header, banner ใน header เป็นต้น
• selector แต่ละตัวควรจบด้วย , หรือ { ถ้ามี และคุณสมบัติควรเริ่มด้วย 1 tab และจบด้วย ; ส่วน } ควรอยู่ในระดับเดียวกับ selector

มาดูตัวอย่างกันดีกว่าครับ จะได้เข้าใจมากขึ้น (หัวข้อแรกคงเข้าใจอยู่แล้ว มาเริ่มที่หัวข้อที่สองเลยแล้วกัน)

เว้นระยะห่าง 2 บรรทัดสำหรับแบ่งแต่ละส่วน#header {    width: 200px;} #content {    width: 100px;} #footer {    width: 400px;}
เว้นระยะห่าง 1 บรรทัดสำหรับแบ่งบล็อกในส่วนนั้น ๆ#header {    width: 200px;}#header h2 {    font-size: 24px;} #logo {    background: url(images/logo.png) no-repeat left top;} #menu {    width: 300px;} #content {    width: 100px;} #footer {    width: 400px;}
จากตัวอย่าง จะทำให้เรารู้ว่า logo และ menu อยู่ในส่วนของ header เพราะมีการเว้นระยะห่าง 1 บรรทัด


selector แต่ละตัวควรจบด้วย , หรือ { ถ้ามี และคุณสมบัติควรเริ่มด้วย 1 tab และจบด้วย ; ส่วน } ควรอยู่ในระดับเดียวกับ selector#selector-1 h2,#selector-2 h2,#selector-3 h2 {    font-size: 24px;    color: #F00;}


Selector

ในส่วนของ Selector ก็จะเป็นพวกการตั้งชื่อ class หรือ ID เพื่อให้คนอื่นอ่านแล้วเข้าใจได้ว่า class หรือ ID ตัวนี้ มีไว้สำหรับอะไร มาดูข้อเสนอแนะกันนะครับ
ให้ใช้ตัวพิมพ์เล็ก และคั่นระหว่างคำด้วย – หลีกเลี่ยงการใช้ camelcase และ _ ตัวอย่างเช่น
#contact-form {    /* ใช้ตัวพิมพ์เล็ก และคั่นด้วย - */} #contactForm {    /* รูปแบบนี้เราเรียกว่า camelcase พยายามหลีกเลี่ยงการใช้งาน */} #contact_form {    /* เช่นกันหลีกเลี่ยงการคั่นคำด้วย _ */}

• ตั้งชื่อให้อ่านแล้วเข้าใจได้ว่า class หรือ ID นี้มีไว้สำหรับอะไร เช่น .box หรือ #main-menu เป็นต้น อย่าตั้งชื่อแบบว่า #b1p6 คนอื่นมาอ่านก็ไม่เข้าใจว่า b1p6 คืออะไร
• Selector ที่มี Attribute ให้ใช้ ” ” ครอบค่านั้น เช่น

/* แบบถูกต้อง */input[type="text"] {     line-height: 1.1;} /* แบบผิด */input[type=text] {     line-height: 1.1;}
อย่าใส่ Selector เกินความจำเป็น เช่น div.item ใช้แค่ .item ก็เพียงพอแล้ว



Property

พยายามเขียนให้สั้น กระชับ และระวังการเขียนซ้ำ เช่นก่อนหน้านี้เคยกำหนดสีมาแล้ว แต่มากำหนดสีซ้ำอีก อีกอย่างถ้าเราเขียนเพื่อใช้กับ theme ที่เป็น responsive อย่ากำหนดความกว้างลงไป เช่น width: 200px; แต่แนะนำให้ใช้เป็น width: 20%;

property ค้องนำด้วย : และช่องว่าง เช่น
width: 20%;float: left;
ทุกค่าของ property ต้องเป็นตัวเล็ก ยกเว้นชื่อฟอนต์
font-family: Helvetica, Thonburi, Arial, Tahoma, sans-serif;

• สำหรับสี ให้ใช้ hex code หรือ rgba หลีกเลี่ยงใช้ตัวอักษรพิมพ์ใหญ่กับโค้ดสี และเราสามารถย่อโค้ดสีได้ เช่น #ffffff ย่อเป็น #fff หรือ #CC00FF ย่อเป็น #C0F
• ใช้ shorthand เมื่อมีโอกาสใช้

ที่มา: http://www.wordpress.in.th/wordpress-article/css-coding-standards-wordpress-1/