CSS Guideline – เปิดตำราสอนเทคนิคเขียน CSS อย่างมืออาชีพ !!
การเขียน CSS ส่วนใหญ่เราจะเขียนตามหนังสือ ตามเว็บไซต์ที่สอนมาครับ ซึ่งยังมีเทคนิคต่าง ๆ ที่ไม่มีหนังสือเล่มไหนสอน ไม่ว่าจะเป็นการเขียน CSS ให้เป็นระเบียบ สามารถกลับมาแก้ไขได้ง่าย และนำไปให้เพื่อนร่วมทีมเขียนได้ ในบทความนี้จะมาพูดถึงเทคนิค CSS ที่จะทำให้โค้ดของคุณกลายเป็นโค้ดแบบมืออาชีพ
สาเหตุที่เขียนบทความนี้ เพราะได้ไปอ่าน CSS Guideline ของคุณ CSSWizardy มาครับ เห็นว่ามีประโยชน์มาก จึงขออนุญาตนำมาเรียบเรียงเอาไว้ให้คนไทยได้อ่านกันคร้าบ
เขียน CSS ไฟล์เดียว หรือหลายไฟล์ดี
บางคนอาจจะชอบทำงาน CSS รวมเป็นไฟล์เดียวยาว ๆ (เมื่อก่อนแอดมินก็ชอบเขียน CSS ยาว ๆ ครับ เคยซัดไป 3,000 กว่าบรรทัด กลับมาดูอีกทีงงมากว่าอะไรอยู่ตรงไหน) ซึ่งนั่นก็ไม่ผิดครับ แต่การแยกหลาย ๆ ไฟล์จะทำให้เราทำงานเป็นระเบียบมากกว่า ซึ่งเดี๋ยวนี้สามารถใช้ sass ในการแยกไฟล์เฉพาะตอนทำ แล้วตอนเสร็จก็รวมเป็นไฟล์เดียวให้อัตโนมัติได้ครับ
อย่างไรก็ตาม ถ้าชอบเขียนเป็นไฟล์เดียว จะแนะนำการใส่ Comment ใน CSS เพื่อแบ่งโค้ดให้อ่านง่ายครับ
แบ่ง CSS ยาว ๆ ให้เป็นระเบียบด้วย Comment
ถ้าไฟล์ CSS ยาวมาก ๆ เราอาจจะใส่สารบัญไว้ด้านบนสุดเลยก็ได้ว่าในไฟล์นี้แบ่งเป็นส่วน ๆ ยังไงบ้าง ดังเช่นโค้ดด้านล่าง
[css]/*————————————*
$CONTENTS
*————————————*/
/**
* CONTENTS…………You’re reading it!
* RESET……………Set our reset defaults
* FONT-FACE………..Import brand font files
*/[/css]
จะมีการบอกว่าไฟล์นี้แบ่งเป็นส่วน Content, ส่วน Reset, ส่วน Font-face อะไรแบบนี้ครับ คนที่เข้ามาอ่านไฟล์ CSS ทีหลังก็จะเข้าใจได้ง่ายว่าเราเขียนอะไรก่อนอะไรหลัง
ซึ่งแต่ละส่วนก็จะมีการแบ่งด้วย Comment ด้านบนสุดของแต่ละส่วน แบบนี้
[css]/*————————————*
$RESET
*————————————*/
[/css]
ซึ่งหลังจากจบแต่ละส่วน เค้าแนะนำว่าให้เว้นที่ว่าง 5 บรรทัดก่อนเริ่ม Section ใหม่ เพื่อให้เวลาเลื่อนลงมาเร็ว ๆ จะสังเกตเห็นได้ง่ายว่าขึ้น Section ใหม่ตอนไหน
อย่างไรก็ตาม อันนี้เป็นเทคนิคส่วนตัวของทาง CSSWizardry ครับ เราไม่จำเป็นต้องเอาไปใช้เป๊ะ ๆ อาจจะลองดูแนวคิดแล้วไปปรับใช้ตามความถนัดและความเหมาะสม
เรียงลำดับแต่ละส่วนในไฟล์ CSS อย่างไรดี
แนะนำว่าเราควรเรียงลำดับ CSS ในไฟล์ดังนี้ครับ
- Reset CSS
- Element ทั่วไป แบบไม่ได้ใส่ class, ID เช่น h1, ul
- Object ทั่วไป เช่น h1.title
- Component ที่สร้างมาจากการรวม Object หลาย ๆ อันเป็นก้อนเดียว เช่น div.welcome
- Style ที่เหลือ เช่นพวกกล่องบอก error ของฟอร์ม
สาเหตุที่ต้องจัดเรียงแบบนี้ เพราะ CSS จะอ่านจากบนลงล่างครับ แปลว่าถ้าเขียน CSS Selector เดียวกันด้านบนกับด้านล่าง ค่าต่าง ๆ ด้านล่างจะถูกนำไปใช้แทนด้านบน ซึ่งการเขียนเรียงแบบนี้จะทำให้การเพิ่มเติม CSS ทำได้ง่ายครับ ลองคิดดูว่าถ้า Reset CSS มาอยู่ด้านล่างสุด ที่เราเขียนไปด้านบนทั้งหมดก็ถูกลบออกหมดเลย
เทคนิคจัดระบบ CSS ในส่วน Selector
บางครั้งเราเขียน Selector เลือก Element ข้างนอก แล้วพอ Selector ต่อมาเราก็เลือก Element ข้างใน ซึ่งถ้าเราใส่ย่อหน้าให้กับ Selector ตัว Element ด้านในจะทำให้พออ่านโค้ดแล้วเราเข้าใจทันที ว่า Element ตัวนี้อยู่ใน Element ข้างนอกอีกที ลองดูตัวอย่างครับ
[css]
.widget {
/* CSS Code */
}
.widget-title {
/* CSS Code */
}[/css]
ในกรณีนี้ คือ h1 class widget-title เป็นส่วนหนึ่งของ div class widget อีกทีครับ ถ้าเขียน CSS แบบนี้เรามองผ่าน ๆ ก็พอนึกได้แล้ว HTML เขียนเป็นแบบไหน
หลักการตั้งชื่อ Class ใน CSS
จริง ๆ แอดมินคิดว่าการตั้งชื่อคลาสใน CSS นี่แล้วแต่ความถนัดส่วนตัวครับ แต่ตามความถนัดของผม ผมจะชอบเขียนโดยให้ class แบ่งคำด้วย (-) เช่น .widget-title ส่วน ID จะแบ่งคำด้วย (_) เช่น #widget_title
สาเหตุที่ class แบ่งด้วย (-) ก็เพราะหลาย ๆ ครั้งที่ตั้งชื่อ class แล้วมี prefix เหมือนกัน เช่น .widget-title กับ .widget-content ซึ่งการแก้ไขโดยปกติผมจะชอบ copy ชื่ออันเก่ามาทั้งคำแล้วค่อยเปลี่ยนชื่อ คำที่ถูกแบ่งด้วย (-) ถ้าดับเบิลคลิกที่คำ มันจะเลือกเฉพาะคำนั้นครับ แต่ถ้าคำไหนแบ่งด้วย (_) แล้วดับเบิลคลิก มันจะมาทั้งตัวหน้าตัวหลังเลย
ลองดับเบิลคลิกดูได้ครับ .widget-title กับ .widget_title
กลับมาที่บทความข้างต้นครับ ทางผู้เขียนบทความได้แนะนำการตั้งชื่อแบบ BEM ย่อมาจาก Block, Element, Modifier
การตั้งชื่อ Class ใน CSS ด้วยวิธี BEM
BEM จะตั้งชื่อคลาสแบบนี้ครับ
[css]
.block {}
.block–element {}
.block__modifier {}
[/css]
- block คือ Component ด้านนอกสุด
- element คือ Object ทั่วไปที่อยู่ใน block
- modifier คือ รูปต่าง ๆ ของ block
ถ้ายังงงอยู่ไม่ต้องตกใจครับ ลองดูโค้ดตัวอย่างด้านล่างครับ โดยเราจะถือว่า block เป็นคนคนหนึ่ง (person) ซึ่ง hand (มือ) ถือเป็น element หนึ่งของคน แล้ว modifier ก็คือตัวบอกว่าเป็นแขนซ้าย (left) หรือแขนขวา (right)
[css].person {}
.person–hand {}
.person–hand__left {}
.person–hand__right {}[/css]
ลองเอาแนวคิดนี้ไปปรับใช้กับการเขียน CSS ของเราดูครับ ส่วนตัวแอดมินคิดว่าวิธีนี้เจ๋งดี เป็นระเบียบดี แต่ก็ต้องมีการพูดคุยตกลงกับเพื่อนร่วมงานเพื่อให้เข้าใจในโค้ด CSS ตรงกันด้วยครับ
การกำหนดหลาย class บน element เดียวกัน
บางคนอาจยังไม่ทราบว่าใน 1 Element เราสามารถกำหนด class ให้มันได้มากกว่า 1 class ครับ ซึ่งการใส่หลาย class ใน element เดียวกัน ควรเคาะ Space Bar 2 ช่องเพื่อให้อ่านได้ง่ายว่าแบ่งเป็นหลายคลาส เช่น
[html]
<div class=”class_one class_two”></div>
[/html]
แบ่งเป็น class พื้นฐาน กับ class เจาะจง
สมมติว่าเรามีกล่อง 3 กล่องที่ขนาดเท่ากัน แต่พื้นหลังคนละสี การกำหนดขนาดทีละกล่องแบบนี้ไม่ดีครับ
[css]
.box-red { width: 100px; height: 100px; background: red; }
.box-blue { width: 100px; height: 100px; background: blue; }
.box-green { width: 100px; height: 100px; background: green; }[/css]
ถ้าอยู่ ๆ เราต้องการแก้ให้กล่องเป็นขนาด 120x120px เราก็ต้องมาแก้ใหม่ทุกบรรทัด เพราะฉะนั้นถ้าหลาย Element แชร์ค่าเดียวกัน เราสามารถแบ่งเป็น class พื้นฐาน (.box) กับ class เจาะจง (.box-red, .box-blue, .box-green) ได้แบบนี้ครับ
[css]
.box { width: 100px; height: 100px; }
.box-red { background: red; }
.box-blue { background: blue; }
.box-green { background: green; }
[/css]
เวลาจะเอาไปใช้ ก็กำหนดทั้งคลาส box และ box-red ให้กับกล่องที่อยากให้พื้นหลังสีแดง โดยถ้าจะแก้ขนาดก็แค่แก้ของ .box { } อย่างเดียว กล่องทุกสีก็จะเปลี่ยนตามแล้วครับ
งดกำหนด width, height ให้กับ Component
เราไม่ควรกำหนด width, height ให้กับตัว Component เป็นเลขหน่วย px โดยตรง เราควรจะกำหนดขนาดในส่วน Grid, Layout ข้างนอก เพื่อให้ยืดหยุ่นได้ตอนเป็น Fluid Layout หรือ Responsive
โดยเฉพาะอย่างยิ่งการกำหนด height ให้กับ Component บางคนอาจยังไม่รู้ว่าเราสามารถกำหนด line-height แทนได้ ซึ่ง line-height จะยืดหยุ่นกว่าการใช้ height
ถ้าเราใช้ Grid System ช่วยในการทำ Layout เราไม่ควรกำหนด CSS เพิ่มเติมให้กับตัว Grid เลย (เช่น width, margin, padding) แต่ให้กำหนดค่าพวกนี้กับ DIV ที่อยู่ใน Grid อีกที
ถ้าใครเคยใช้ Grid อย่าง Bootstrap จะพบว่าถ้าเราไปใส่ค่าต่าง ๆ ใน Grid โดยตรงจะทำให้ Layout เละเลยครับ ถึงเดี๋ยวนี้จะแก้ได้ด้วย CSS3 box-sizing แล้ว แต่ในเมืองไทยที่คนใช้ IE6, IE7 เต็มไปหมดไม่น่าเหมาะครับ
เขียน CSS Shorthand เฉพาะตอนที่ใช้
การเขียน Shorthand ก็คือตัว property CSS ที่รวบรวม property หลาย ๆ อันมาเป็นบรรทัดเดียวครับ เช่น background: ที่รวม background-color, background-image, background-position etc. มาเป็นบรรทัดเดียว
บางครั้งที่เราต้องการกำหนดสีพื้นหลังอย่างเดียว ให้จะเลือกใช้ background-color: red; แทน background: red; เพราะอันหลังจะไปทับค่า background-image, background-position ที่เราตั้งค่าไว้ทั้งหมดครับ ซึ่งกรณีนี้แอดมินก็เขียนพลาดบ่อยมากครับ บางทีหน้าเว็บก็เสียไปเลย
เลิกกำหนด ID ใน CSS ได้แล้ว
หลาย ๆ คนคงเคยเรียนมาว่า ID จะต้องมีอันเดียวในหน้า ส่วน class มีได้หลายอันในหน้าเดียวครับ ซึ่งถ้าคิดกันดี ๆ แล้วจะเห็นว่า class มีอันเดียวในหน้าก็ได้ไม่ใช่เหรอ
การใช้ ID กำหนดจะทำให้ตัว selector ถูกกำหนดอย่าง specific ขึ้นไปอีกครับ ก็คือถ้าเราเขียน HTML แบบนี้
[html]<div class=”box” id=”welcome”></div>[/html]
ไม่ว่าเราจะเขียน CSS Selector .box {} มาก่อนหรือหลัง #welcome {} ก็ตาม ตัว ID Selector #welcome {} จะถูกเขียนทับแทน .box {} เสมอครับ ซึ่งทำให้หลาย ๆ ครั้งที่เราพยายามกำหนด CSS ให้กับ Element แล้วค่าที่เรากำหนดไม่ยอมขึ้น เป็นเพราะมันโดน ID เขียนทับนั่นเอง
อย่างไรก็ตาม การใช้ ID เหมาะกับการเรียกด้วย Javascript ครับ เพราะ Javascript สามารถตามหา Element ด้วยคำสั่งพื้นฐานอย่าง getElementById ได้เลย
เลือก Selector แบบเจาะจงไปเลย ดีกว่ามัวแต่เลือกหลายชั้น
เรามักจะชอบเขียน Selector แบบหลายชั้นกันครับ เช่น
[css].box p a { }[/css]
ซึ่งการเขียนแบบหลายชั้นจะทำให้ Browser ตอนประมวลผลต้องไปตามหาทีละชั้น (แต่ก็ไม่ได้ใช้เวลาเยอะเท่าไร) ปัญหาจริง ๆ ของมันก็คือ ถ้าเราเปลี่ยนลำดับใน CSS เช่น เราเอา a มาไว้นอก p ก็จะทำให้ selector ที่เขียนไว้ด้านบนใช้งานไม่ได้้เลย
การเขียน CSS เราไม่ควรคาดหวังว่า HTML จะไม่มีการเปลี่ยนแปลงเลยครับ เพราะฉะนั้นวิธีการที่ดีกว่า คือ กำหนด class ให้กับแท็ก a ที่เราจะเล็งเลย และใช้ Selector ดังนี้
[css].box-link {}[/css]
ไปตรง ๆ จะทำให้เวลาเราเลื่อน Element ตัวนี้ไปที่อื่น หรือต้องการกำหนด Style นี้กับลิงค์ในส่วนอื่น ก็สามารถทำได้ง่าย ๆ และไม่ต้องเพิ่ม CSS Selector ใหม่ทุกครั้งครับ
———————————–
สำหรับบทความนี้ก็ขอจบแต่เพียงเท่านี้ครับ ถ้าสงสัยอะไรยังไงสามารถทิ้งคอมเม้นท์ไว้ได้ มาตอบแน่นอนครับ หรือไปติดตามรับข่าวสารเกี่ยวกับ Web Design เพิ่มเติมได้ทาง Facebook Page ของเราครับ ขอบคุณครับ
ขอขอบคุณรูปประกอบจากคุณ See-ming Lee
