RSCSS: แค่เปลี่ยนวิธีคิด 1% ชีวิตการเขียน CSS ก็ดีขึ้น 99%
การเขียน CSS นั้นจะว่าง่ายก็ง่าย ตรงที่ไม่มีกฏเกณฑ์อะไรมาก ตั้งชื่อ Class, ID อะไรก็ได้ / เขียน Selector ซ้อนกี่ชั้นก็ได้ / CSS Property จะเรียงก่อนหลังยังไงก็ได้ แต่พอเขียน CSS มาหลายปีแล้ว ผมกลับพบว่านี่แหละที่เป็นเรื่องที่ยากของ CSS
ด้วยความที่ข้อบังคับมันไม่ค่อยมี ทำให้ต่างคนต่างเขียน CSS สไตล์ของตัวเอง ซึ่งเวลาทำงานคนเดียวเป็นฟรีแลนซ์คงไม่ค่อยมีปัญหา แต่ถ้าทำงานในทีมหลายคน หรือทำโปรเจคระยะยาว ตอนนั้นจะเริ่มเกิดปัญหาความมั่วของสไตล์การเขียน CSS ทันทีครับ
บทความแนะนำ: CSS Guideline เปิดตำราสอนการเขียน CSS อย่างมืออาชีพ
ทาง Designil เคยนำเสนอบทความเกี่ยวกับการเขียน CSS ที่ดีสำหรับการทำงานเป็นหมู่คณะไปหลายบทความ ไม่ว่าจะเป็น CSS Guideline ด้านบน หรือ เทคนิคการเขียน CSS ของเว็บไซต์ Github.com จากเจ้าของ Bootstrap ซึ่งถ้าให้ทั้งทีมอ่านกันครบ ผมมั่นใจว่า CSS ในโปรเจคจะทำงานร่วมกันง่ายขึ้นมากครับ
วันนี้มาถึงเรื่องของมาตรฐานการตั้งชื่อคลาสใน CSS ที่ผมเคยแนะนำตัวหนึ่งชื่อว่า BEM CSS กันไปแล้วในบทความ เขียน CSS ให้ดีขึ้นง่าย ๆ ด้วยเทคนิค BEM ซึ่งมันก็ดีจริง ๆ มืออาชีพในต่างประเทศใช้กันเยอะแยะ และผมใช้มาปีกว่า ๆ ก็รู้สึกชอบมาก
มาถึงวันนี้ได้พบกับมาตรฐานการตั้งชื่ออันใหม่ ที่พออ่านแล้วรู้สึกว่าดูดีมาก ช่วยแก้ข้อเสียของมาตรฐานการตั้งชื่อทั้งของ Bootstrap และของ BEM ไปพร้อม ๆ กัน แถมโค้ดสั้นกว่า… มารู้จักกับ RSCSS กันครับ :)
RSCSS คืออะไร
RSCSS หรือ Reasonable System for CSS Stylesheet Structure เป็นระบบ CSS ที่คิดค้นขึ้นโดยบริษัท RS จากการนำความรู้ด้านดนตรี ทำนองเพลงมาใช้ควบคู่ไปกับการเขียนโค….
พอก่อน เดี๋ยวเข้าใจผิดกันจริง ๆ RSCSS เกิดขึ้นมาจากแนวคิดของคุณ Rico Sta. Cruz เป็นนักพัฒนาเว็บไซต์ที่เจอปัญหาของการตั้งชื่อ CSS Class ในปัจจุบันว่าต่างก็มีข้อเสียที่ RSCSS สามารถแก้ไขได้
ข้อเสียของการตั้งชื่อแบบ BEM
(ถ้ายังไม่อ่าน ผมแนะนำให้อ่านบทความ เทคนิคการเขียน CSS แบบ BEM ก่อนนะครับ)
การตั้งชื่อแบบ BEM จะแบ่งโค้ดเป็น Block – Element – Modifier โดยทำให้แต่ละ Element แยกชัดเจนด้วยเครื่องหมายขีดกลาง 2 ตัว (–) และ Underscore 2 ตัว (__) ซึ่งข้อดี คือ มันชัดเจนมากครับ ขีด 2 ตัวยาวแทงตามาก
แต่เวลาเราใช้ BEM ในระดับที่ลึก ๆ หลายชั้น บางคนจะเขียน Selector จนกลายเป็นชื่อ Class ยาวมาก ๆ ดูไม่งาม ไฟล์ HTML จะโค้ดยาว พิมพ์นาน เสียเวลาอีกด้วย
.home__banner__button { /* Designil.com CSS */ }
.home__banner__button--red { /* Designil.com CSS */ }
.home__banner__button--is-active { /* Designil.com CSS */ }
หรือลองมาดูโค้ดตัวอย่างจากสไลด์ของคุณ Rico เลยครับ ว่าเวลาเราเขียน BEM แบบ “เยอะเกินไป” จะเห็นว่าโค้ดมีการเขียนคำว่า photo-card ซ้ำ ๆ กันหลายรอบมาก ซึ่งเค้าบอกว่าน่าจะมีวิธีที่ทำให้โค้ดคลีนกว่านี้
แถมท้ายนิดหน่อย: วิธีที่ผมใช้อยู่เวลาเขียนชื่อคลาสด้วย BEM คือ ถ้า Element ซ้อนกันเกิน 2 ชั้น ผมจะเอาชื่อของ 2 ระดับแรกมารวมกันเลยครับ เพื่อให้ชื่อ Selector คลีนขึ้นอีกหน่อยนึง จากโค้ดตัวอย่างด้านบนก็จะกลายเป็น
.home__banner { /* Designil.com CSS */ }
.homeban__button { /* Designil.com CSS */ }
.homeban__button--red { /* Designil.com CSS */ }
ข้อเสียของการตั้งชื่อแบบ Bootstrap
ถ้าเกิดใครเคยใช้ Bootstrap มาก่อน (หรือถ้ายังไม่รู้จัก อ่านได้ในบทความ รวมสุดยอด Web Design CSS Framework ที่น่าใช้) จะทราบว่า Bootstrap มีเทคนิคการตั้งชื่อที่ใช้ขีดกลางคั่น 1 อัน (-) ระหว่างแต่ละชั้นครับ ลองดูจากรูปด้านล่างนี้
ซึ่ง Bootstrap เน้นการให้ Element 1 ตัวใช้หลาย Class ร่วมกันครับ เช่น ถ้าต้องการปุ่มสีน้ำเงินขนาดใหญ่ 1 ปุ่ม เราใส่คลาส .btn จะได้ปุ่ม เสร็จแล้วใส่คลาส .btn-primary จะได้ปุ่มสีน้ำเงิน เสร็จแล้วใส่คลาส .btn-lg (large) จะได้ปุ่มขนาดใหญ่
<button type="button" class="btn btn-primary btn-lg">ปุ่ม Bootstrap Class เยอะมาก</button>
จะเห็นว่าปุ่ม 1 ปุ่มใช้ Class เยอะมาก แถมมีการใช้คำว่า btn ซ้ำ ๆ กันทุกอัน และนี่ยังไม่รวมถึงกรณีที่เราใช้ Component อื่น ๆ ของ Bootstrap มาร่วมด้วย เช่น Dropdown ที่ต้องใส่คลาส .dropdown-toggle เข้าไปในปุ่มอีก
มารู้จักกับ RSCSS ที่จะช่วยแก้ปัญหาของ BEM / Bootstrap ให้หมดไป
หลังจากที่ได้รู้ข้อเสียของการตั้งชื่อทั้ง 2 แบบด้านบนไปแล้ว คุณ Rico ก็เลยปิ๊งไอเดียในการสร้างมาตรฐานการตั้งชื่อใหม่ที่ชื่อว่า RSCSS ขึ้นมานั่นเองครับ มาดูกันว่า RSCSS หน้าตาเป็นยังไง
มองทุกอย่างเป็น Component / Element
ก่อนอื่น เค้าจะมองว่าหน้าเว็บไซต์เราประกอบไปด้วย Component ต่าง ๆ เช่น ฟอร์มนี้ทั้งหมดชื่อว่า .news-form
.news-form { /* Designil.com RSCSS */ }
ภายใน Component ก็จะแบ่งเป็น Element ต่าง ๆ เช่น หัวข้อ (title), ช่องกรอก (input), ปุ่ม (button)
การตั้งชื่อคลาสของ Element ควรเป็นชื่อคลาสที่ใช้ คำเดียว เท่านั้น เช่น .title, .heading, .button, .input, .field, .action etc. และไม่ควรใช้แท็ก HTML แบบไม่ตั้งชื่อคลาสเป็น Element
ในการเขียน CSS Selector ของ Element ควรเขียนในรูปแบบ .component > .element เพื่อป้องกัน CSS ไปกระทบกับ Element ชื่อเดียวคลาสกันที่ซ้อนอยู่ด้านในอีกที
จากตัวอย่างข้างบน โค้ดก็จะออกมาเป็น
.news-form > .title { /* Designil.com Code */ }
.news-form > .input { /* Designil.com Code */ }
.news-form > .button { /* Designil.com Code */ }
หรือถ้าใช้ SASS หรือ LESS CSS เข้ามาช่วยก็สามารถทำให้โค้ดสวยงามขึ้น ซึ่งจริง ๆ พวกโค้ดตัวอย่างของ RSCSS ก็ใช้ฟีเจอร์การซ้อน Selector (Nesting) เพราะฉะนั้นแนะนำให้ใช้ SASS / LESS ครับ เพื่อความสวยงามของโค้ด ลองดูตัวอย่างด้านล่างครับ
.news-form {
> .title { /* Designil.com Code */ }
> .input { /* Designil.com Code */ }
> .button { /* Designil.com Code */ }
}
ป.ล. สมัครรับข่าวสาร Designil Newsletter ของจริงที่นี่เลยครับ รวมเรื่องที่น่าสนใจด้าน Design / Front-end ครับ รีบหน่อยนะ เดี๋ยวจะส่งแล้ว สมัครรับข่าวสาร Designil Newsletter
การใช้ RSCSS สำหรับ Component ที่มีหลายรูปแบบ (Variant)
แน่นอนว่าบาง Component ก็มีหลายรูปแบบ เช่น ฟอร์มค้นหา เราอาจจะมีทั้งแบบยาวและแบบสั้น ซึ่งใน Bootstrap เวลา Component มีหลายรูปแบบ ก็ใช้วิธีตั้งชื่อคลาสเดิม ตามด้วยขีดกลาง (-) แล้วตามด้วยชื่อรูปแบบ เช่น .btn-lg, .btn-xs
ทีนี้ก็จะเกิดปัญหาเวลาใช้งานแบบที่ได้กล่าวไว้ด้านบน คือจะกลายเป็น class=”btn btn-xs” เขียนคำว่า btn ซ้ำหลายรอบโดยไม่จำเป็น ใน RSCSS เลยมีการแก้ปัญหาเป็นแบบนี้ครับ
ใน RSCSS จะไม่ย้ำชื่อคลาสเดิมครับ แต่จะใช้ขีดกลางแล้วตามด้วยชื่อรูปแบบเลย เช่น .-prefixed, .-compact โดยโค้ด SCSS ฟอร์มค้นหาด้านบนจะออกมาเป็นประมาณนี้
.search-form {
&.-prefixed { /* Designil.com CSS */ }
&.-compact { /* Designil.com CSS */ }
}
นอกจาก Component แล้ว ระดับ Element ก็สามารถมีหลายรูปแบบได้ โดยเขียนด้วย Pattern ชื่อเดิมไปเลย ตัวอย่างเช่น
.shopping-card {
> .title { /* Designil.com CSS */ }
> .title.-small { /* Designil.com CSS */ }
}
ซึ่งผมก็เพิ่งทราบตอนศึกษา RSCSS ว่าเราสามารถใช้ขีดกลาง (-) หรือ underscore (_) มานำหน้าชื่อคลาสได้เลย แต่ส่วนตัวคิดว่าขีดกลางจะพิมพ์ง่ายกว่า เพราะไม่ต้องกด Shift
การใช้ RSCSS สำหรับคลาส Utility, Helper
คลาส Utility หรือ Helper เป็นคลาสพิเศษที่ใช้เพื่อช่วยตกแต่งเล็ก ๆ น้อย ๆ เพิ่มเติม และสามารถใช้ได้กับ Component / Element ไหนก็ได้ เช่น คลาส .text-right สำหรับจัดตัวหนังสือให้อยู่ด้านขวา หรือ .center-block สำหรับจัดกล่องให้อยู่ตรงกลาง เป็นต้น
คลาสพวกนี้มักจะมีการใช้ !important อยู่ เพื่อให้พอใช้ร่วมกับคลาสไหนก็ทำงานได้เลย ไม่โดนปัญหาจาก CSS Specifity เขียนทับ
ใน RSCSS นั้น Helper Class จะใช้วิธีตั้งชื่อแบบ Underscore (_) ตามด้วยชื่อคลาส เช่น ._nomargin, ._center, ._text-center
ลองดูตัวอย่างโค้ดจากเว็บไซต์ของ RSCSS ด้านล่างเลยครับ
._unmargin { margin: 0 !important; }
._center { text-align: center !important; }
._pull-left { float: left !important; }
._pull-right { float: right !important; }
สาเหตุที่ใช้ Underscore แทน เพราะจะทำให้เวลาเขียนใน HTML เรามองเห็นชัดเจนระหว่างคลาสไหนเป็น Element และคลาสไหนเป็น Utility ครับ ลองดูตัวอย่างด้านล่างครับผม
<div class='order-graphs -slim _unmargin'> </div>
เราจะเห็นว่าการเขียนแบบ RSCSS ใน HTML ชื่อคลาสแต่ละส่วนจะให้ความชัดเจนว่าส่วนไหนเป็นอะไรเหมือน BEM โดยที่โค้ดสั้นลงกว่าเยอะ เพราะไม่ต้องมาเขียนชื่อคลาสหลักซ้ำหลาย ๆ รอบ และใช้ 1 ขีดแทน 2 ขีดครับผม
สรุป RSCSS น่าใช้หรือไม่ ใช้ตอนไหนดี
ปัจจุบันผมใช้ BEM อยู่ครับ แต่ตอนนี้พอได้รู้จัก RSCSS น่าจะได้หยิบมาใช้ในโปรเจคในอนาคตเร็ว ๆ นี้ครับ เพราะรู้สึกว่าโค้ดมันอ่านง่าย และเวลาทำงานเป็นทีม ต้องสอนคนอื่นก็สอนง่าย อ่านประมาณ 10 นาทีก็ทำความเข้าใจได้แล้ว
ถ้าอยากเรียนรู้เกี่ยวกับ RSCSS แนะนำให้อ่านเพิ่มเติมได้จากเว็บไซต์หลัก RSCSS.io ครับ ในนั้นจะมีเทคนิคการใช้ SASS กับ RSCSS ด้วย หรือถ้าใครถนัดอ่านภาษาไทยมากกว่า ก็สามารถอ่าน RSCSS เวอร์ชั่นแปลไทย ของพี่ Apirak ได้เลยครับ
หากท่านใดมีข้อมูลอะไรอยากเสริม หรือสงสัยตรงไหน สามารถสอบถามไว้ในส่วน Comment ได้เลยนะครับ :) ถ้าชอบเนื้อหาแนวนี้ ก็แวะมาหาอ่านเพิ่มเติมใน Designil Facebook Page ได้เช่นกันครับ มีอัพเดทสิ่งดี ๆ กันให้เรื่อย ๆ ครับ
