WordPress CSS Coding Standards

มาถึงตา CSS Coding Standards บ้างล่ะ ถ้ายังนึกไม่ออกว่าทำไมต้องทำตาม Coding Standards ลองอ่าน WordPress Coding Standards สำคัญไฉน? ก่อนเนอะ

Structure

การ indent ก็จะเหมือนกับของ PHP แต่ละ section ควรจะเว้นสัก 2 บรรทัด แต่ละบล็อกใน section ก็ควรจะเว้นสัก 1 บรรทัด แล้วก็แต่ละ selector ควรจะอยู่ในบรรทัดของใครของมัน คู่ pair ของ property กับ value ก็ควรจะอยู่บรรทัดเดียวกัน จัดให้สวยๆ ในลักษณะนี้

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

Selectors

การตั้งชื่อ selector ก็ควรจะเป็นตัวเล็กหมด ถ้ามีหลายคำก็ให้แบ่งด้วย hyphen ( - ) ซึ่งก็ควรตั้งชื่อให้สื่อความหมายเล็กน้อย จะได้พอมองออกว่า element ไหน จะมี style เป็นอย่างไร  แล้วก็บางทีอย่าพยายามใช้เกินความจำเป็น อย่างเช่น div.container เราสามารถใช้แค่ .container ก็พอ (โดยทั่วไปแล้ว .container จะอยู่ที่ div อยู่แล้ว) ตัวอย่างการตั้งชื่อ selector ก็ตามนี้

#comment-form {
    margin: 1em 0;
}

ถ้าใช้ attribute ของ selector จะใช้ double quotes ตรงค่าของมัน

input[type="text"] {
    line-height: 1.1;
}

Properties

จะคล้ายๆ กับส่วนของ selector ที่กล่าวไว้ข้างต้น ให้พึงระวังตอนออกแบบไว้ว่า แค่อย่ากำหนด style ซ้ำๆ กัน เพราะจะ maintain ลำบาก แล้วก็ค่าของ properties ให้ใช้ตัวเล็กให้หมด ถ้าเป็นค่าสี ถ้าเราย่อได้ก็ย่อ เช่น #fff แทนที่จะเป็น #FFFFFF

พยายามใช้ CSS Shorthand กับพวก background, border, font, list-style, margin, และค่า padding ให้มากเท่าที่ทำได้ เพราะจะทำให้ stylesheet ของเราเล็กลง (โหลดได้เร็วขึ้นเล็กน้อย) แล้วก็อ่านง่ายมากขึ้น

การเรียงลำดับ Property

การเรียงลำดับจะช่วยให้โค้ด CSS ของเราดูไม่ยุ่งเหยิง มนุษย์เราจะรู้สึกดี เวลาที่เห็นอะไรๆ ที่เป็น pattern และอะไรๆ ที่เป็น pattern นี่แหละ จะทำให้เราอ่านได้ง่ายขึ้นด้วย โดย WordPress เค้าจะเรียงตามนี้

  • Display
  • Positioning
  • Box model
  • Colors and Typography
  • Other

ตัวอย่างดังนี้

#overlay {
    position: absolute;
    z-index: 1;
    padding: 10px;
    background: #fff;
    color: #777;
}

หรืออีกวิธีที่พบบ่อยๆ ก็จะเรียงตามตัวอักษรแทน ตัวอย่างเช่น

#overlay {
    background: #fff;
    color: #777;
    padding: 10px;
    position: absolute;
    z-index: 1;
}

แต่อย่างไรก็ได้ พึงระลึกไว้เสมอด้วยว่า ถ้าจะเรียงแบบไหน ก็ให้เรียงแบบนั้น ใช้ให้ตลอดทั้งโปรเจคนะ 🙂

Vendor Prefixes

ถ้า property นั้นมี vendor prefix ก็ให้เรียงจากที่ยาวสุดไปสั้นสุด อธิบายด้วยข้อความอาจจะมึน ดูตัวอย่างข้างล่างนี้ดีกว่า

.koop-shiny {
    -webkit-box-shadow: inset 0 0 1px 1px #eee;
    -moz-box-shadow:    inset 0 0 1px 1px #eee;
    box-shadow:         inset 0 0 1px 1px #eee;
    -webkit-transition: border-color 0.1s;
    -moz-transition:    border-color 0.1s;
    -ms-transition:     border-color 0.1s;
    -o-transition:      border-color 0.1s;
    transition:         border-color 0.1s;
}

จะเห็นได้ว่า box-shadow จะเอา -webkit- ขึ้น แล้วค่อยเป็น -moz- แล้วก็ส่วนค่า value ข้างหลัง ก็ให้เรียงเป็นแนวเดียวกัน แต่บางทีก็อาจจะมีกรณีพิเศษบ้าง ขึ้นอยู่กับสถานการณ์ในตอนนั้น

Values

ทำตามแต่ละข้อนี้แล้วโค้ดจะดูดีขึ้น 🙂

  • เว้นวรรคก่อนหน้า value (หลังโคล่อน)
  • ไม่ต้องมีเว้นวรรคข้างในวงเล็บ
  • ปิดท้ายด้วย ; ตลอด
  • ใช้ double quotes และใช้เท่าที่จำเป็น เช่น พวกชื่อฟอนต์ที่มีเว้นวรรคระหว่างชื่อ อย่าง "Helvetica Neue" แต่ถ้าอย่าง sans-serif ก็ไม่ต้อง
  • ค่า 0 ไม่ต้องใส่หน่วย ถ้าไม่จำเป็น
  • line-height ก็ไม่ควรจะต้องใส่หน่วยเช่นกัน ลองอ่านเหตุผล
  • เลขที่เป็นทศนิยมที่น้อยกว่า 1 ก็ควรใส่ 0 ไว้ข้างหน้า เช่น 0.5
  • ใช้คอมม่าเพื่อแยกค่าหลายๆ ค่าออกจากกัน ก็ควรจะตามด้วยเว้นวรรค หรือไม่ก็บรรทัดใหม่ แต่การใช้ขึ้นบรรทัดใหม่ก็ใช้ตอนที่เราเห็นว่าค่าที่ใส่ไปเริ่มจะยาวเกินไป แต่ถ้าเป็นพวก box-shadow หรือ text-shadow ก็ให้แต่ละค่าหลังจากค่าแรกขึ้นบรรทัดใหม่ไปเลย แล้วก็ indent ให้ตรงๆ กัน ลองดูตัวอย่าง
    .class { /* Correct usage of quotes */
        background-image: url(images/bg.png);
        font-family: "Helvetica Neue", sans-serif;
    }
    
    .class { /* Correct usage of zero values */
        font-family: Georgia, serif;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5),
                     0 1px 0 #fff;
    }

Media Queries

เวลาใช้ให้พยายามจัดกลุ่มแล้วเอาไว้ส่วนล่างๆ ของ stylesheet เพราะว่าจะทดสอบได้ง่าย เพราะจะดูแค่ CSS ด้านบนว่าทำงานถูกหรือเปล่า การจัดสไตล์ก็จัดตามปกติ มี indent เช่น

@media all and (max-width: 699px) and (min-width: 520px) {
    /* เขียนพวก selector ในนี้ */
}

Commenting

ใช้เหมือนๆ กับที่ใช้ใน PHP หรือภาษาอื่นตามปกติ เช่น

/* This is a comment about this selector */

.another-selector {
    position: absolute;
    top: 0 !important; /* I should explain why this is so !important */
}

/**
* Section
*
* Description of section, whether or not it has media queries, etc.
*/

.selector {
    float: left;
}

จริงๆ ก็มีวิธีเขียนคอมเม้นต์คล้ายๆ กับทำ table of content เพื่อช่วยในการค้นหา แต่ขอไม่กล่าวถึงนะครับ เพราะคิดว่าขึ้นอยู่กับการตั้งชื่อมากกว่าที่ทำให้ช่วยค้นหาได้ง่าย

ที่เว็บต้นฉบับมีเขียน Best Practices เอาไว้หน่อย ลองตามกันไปอ่านดู

ก่อนจบ.. อยากให้ไปอ่าน Principles of writing consistent, idiomatic CSS ด้วย เป็น style guide ของการเขียน CSS 🙂

 

อ้างอิงจากต้นฉบับ WordPress CSS Coding Standards


Mils Burasakorn

Mils Burasakorn