มาตรฐานการเขียน CSS สำหรับ WordPress : 1

อันนี้เป็นมาตรฐานการเขียน css ที่ทาง WordPress แนะนำ ไม่ว่าจะเป็นการใช้ในการทำ theme หรือทำ plugin โดยเราไม่จำเป็นต้องเขียนให้เหมือนอย่างที่มาตรฐานแนะนำก็ได้ แต่ถ้าเขียนตามมาตรฐานจะทำให้คนอื่นที่มาพัฒนาต่อ หรือนำ theme, plugin ของเราไปใช้ต่อ สามารถอ่านโค้ด css ของเราได้ง่าย     Structure โครงสร้างในการเขียน css ของแต่ละคนจะแตกต่างกันออกไปอยู่แล้ว แต่วิธีนี้จะเป็นวิธีที่ทำให้ css ของเราง่ายต่อการอ่าน โดยหลัก ๆ ในการเขียนก็คือ ใช้ tab ในการทำให้แต่ละคุณสมบัติเยื้อง อย่าใช้การกด space bar เพื่อเว้นวรรค เว้นระยะห่าง 2 บรรทัดสำหรับแบ่งแต่ละส่วน เช่น header, footer, sidebar เป็นต้น และเว้นระยะห่าง 1 บรรทัดสำหรับแบ่งบล็อกในส่วนนั้น ๆ เช่น logo ใน header, menu ใน header, banner ใน header เป็นต้น selector แต่ละตัวควรจบด้วย , หรือ { ถ้ามี และคุณสมบัติควรเริ่มด้วย 1 tab และจบด้วย ; ส่วน } ควรอยู่ในระดับเดียวกับ selector มาดูตัวอย่างกันดีกว่าครับ จะได้เข้าใจมากขึ้น (หัวข้อแรกคงเข้าใจอยู่แล้ว มาเริ่มที่หัวข้อที่สองเลยแล้วกัน) เว้นระยะห่าง 2 บรรทัดสำหรับแบ่งแต่ละส่วน ? 1 2 3 4 5 6 7 8 9 10 11 #header { width: 200px; } #content { width: 100px; } #footer { width: 400px; } เว้นระยะห่าง 1 บรรทัดสำหรับแบ่งบล็อกในส่วนนั้น ๆ ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 #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 ? 1 2 3 4 5 6 #selector-1 h2, #selector-2 h2, #selector-3 h2 { font-size: 24px; color: #F00; } Selector ในส่วนของ Selector ก็จะเป็นพวกการตั้งชื่อ class หรือ ID เพื่อให้คนอื่นอ่านแล้วเข้าใจได้ว่า class หรือ ID ตัวนี้ มีไว้สำหรับอะไร มาดูข้อเสนอแนะกันนะครับ ให้ใช้ตัวพิมพ์เล็ก และคั่นระหว่างคำด้วย – หลีกเลี่ยงการใช้ camelcase และ _ ตัวอย่างเช่น ? 1 2 3 4 5 6 7 8 9 10 11   #contact-form { /* ใช้ตัวพิมพ์เล็ก และคั่นด้วย - */ } #contactForm { /* รูปแบบนี้เราเรียกว่า camelcase พยายามหลีกเลี่ยงการใช้งาน */ } #contact_form { /* เช่นกันหลีกเลี่ยงการคั่นคำด้วย _ */ } ตั้งชื่อให้อ่านแล้วเข้าใจได้ว่า class หรือ ID นี้มีไว้สำหรับอะไร เช่น .box หรือ #main-menu เป็นต้น อย่าตั้งชื่อแบบว่า #b1p6 คนอื่นมาอ่านก็ไม่เข้าใจว่า b1p6 คืออะไร Selector ที่มี Attribute ให้ใช้ ” ” ครอบค่านั้น เช่น   ? 1 2 3 4 5 6 7 8 9 /* แบบถูกต้อง */ 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 ค้องนำด้วย : และช่องว่าง เช่น ? 1 2 width: 20%; float: left; ทุกค่าของ property ต้องเป็นตัวเล็ก ยกเว้นชื่อฟอนต์ ? 1 font-family: Helvetica, Thonburi, Arial, Tahoma, sans-serif; สำหรับสี ให้ใช้ hex code หรือ rgba หลีกเลี่ยงใช้ตัวอักษรพิมพ์ใหญ่กับโค้ดสี และเราสามารถย่อโค้ดสีได้ เช่น #ffffff ย่อเป็น #fff หรือ #CC00FF ย่อเป็น #C0F ใช้ shorthand เมื่อมีโอกาสใช้ ที่มาบทความ http://www.wordpress.in.th