ล่าสุดแอดมินมีโอกาสได้อ่านบทความวิธีเขียน CSS ของเว็บไซต์ Github ซึ่งเป็นเว็บไซต์ชื่อดังสำหรับโปรแกรมเมอร์ทุกคน บทความนี้เขียนโดยคุณ Mark Otto ครับ
คุณ Mark Otto เคยทำงานที่ Twitter มาก่อน และเป็นผู้เขียน Twitter Bootstrap ขึ้นมาครับ ภายหลังเค้าออกมาจาก Twitter เลยเปลี่ยนชื่อจาก Twitter Bootstrap เป็น Bootstrap อย่างเดียว ตอนนี้ทำงานอยู่ที่ Github (อ่านแล้วแอดมินอยากไปทำงานต่างประเทศมาก มีแต่บริษัทน่าทำเต็มไปหมด T_T)
นอกจากนั้นคุณ Mark Otto เค้ายังเคยทำงานอยู่ที่ ZURB ตอนปี 2007 ซึ่งเป็นบริษัทที่ทำ Foundation นั่นเอง โลกกลมมาก ๆ
อ่านเพิ่มเติม: CSS Framework คืออะไร? Bootstrap และ Foundation คืออะไร?
ผมเลยขออนุญาตสรุปความรู้ที่น่าสนใจ เกี่ยวกับวิธีเขียน CSS ของ Github มาให้อ่านดังนี้ครับ
สรุปการเขียน CSS ใน Github.com คร่าว ๆ
- CSS Preprocessor ที่เค้าเลือกใช้ คือ SCSS (อ่าน บทความสอนใช้ SASS ได้เลยครับ)
- เขียน CSS แยกไฟล์กันกว่า 100 ไฟล์ แล้วเอามา Compile รวมกันทีหลัง
- Compile ออกมาเป็น CSS 2 ไฟล์ เพื่อป้องกันบั๊กของ IE เวอร์ชั่นต่ำกว่า 10 ครับ (ยังไม่บอกว่าบั๊กอะไร จะเฉลยในรายละเอียดข้างล่างครับ)
- CSS ที่ Compile มาแล้ว รวมกันหนักประมาณ 90 kb เท่านั้น (สำหรับเว็บใหญ่อย่าง Github.com ถือว่าไม่เยอะครับ)
- ไม่ได้ใช้ การเขียนโค้ดแบบ BEM หรือ OOCSS เพราะมีคนเขียนหลายคน
- ใช้ Unit แบบ Pixel กับ Em เท่านั้น
- ใช้ Normalize.css กับ CSS Reset ที่เขียนขึ้นเอง
ทำไมต้องใช้ SCSS ?
หากเคยอ่านบทความ SASS คืออะไร? ทำไมคนทั้งโลกถึงใช้ น่าจะเห็นประโยชน์ของมันครับ และด้วยความยืดหยุ่นที่เหนือกว่า LESS แอดมินเองก็ได้ลองใช้ความสามารถของ SASS เหมือนกัน ซึ่ง LESS น่าจะทำไม่ได้ เช่น:
- ทำเว็บแบบ Adaptive แล้วรูปจะมี 3 ขนาด (Desktop, Tablet, Mobile) ซึ่งบางรูปจะมีแค่ 2 ขนาด หรือขนาดเดียว ผมก็เลยเขียน SCSS ให้เช็คว่าไฟล์ขนาดนั้น ๆ มีอยู่มั้ย ถ้าไม่มีก็จะไม่ถูกดึงมาเขียนใน CSS ตอน Compile
- ใช้ Mixin แปลง px เป็น em (อันนี้ท่าไม่ยากมาก)
- ใช้การ Replace รูปใน CSS ด้วย Compass ซึ่งแค่ใส่ชื่อรูปไปมันจะดึงความกว้าง x สูงรูปมาเขียน CSS ให้เองเลย
- ฯลฯ
เทคนิค SCSS พวกนี้ถ้าอยากอ่านบอกได้คร้าบ เดี๋ยวจะมาเขียนแชร์กัน
กลับมาที่เว็บ Github.com ครับ เว็บไซต์ Github ยังไม่ได้ใช้พวก Autoprefixer ซึ่งเป็นสคริปต์สำหรับใส่ CSS Prefix เข้าไปใน CSS3 โดยอัตโนมัติ แต่คุณ Mark บอกว่าน่าจะนำมาใช้เร็ว ๆ นี้
CSS Prefix คือ เวลาเขียน CSS3 ใหม่ ๆ แล้วบางบราวเซอร์ยังไม่รองรับ เราจะต้องใส่ CSS Property ที่เป็นของบราวเซอร์นั้นโดยเฉพาะ เช่น:
[css].box {
-moz-border-radius: 10px; // ใส่เพื่อให้ Firefox เก่า ๆ รองรับ
-webkit-border-radius: 10px; // ใส่เพื่อให้ Chrome เก่า ๆ รองรับ
border-radius: 10px; // สำหรับ Browser ใหม่ ๆ
}[/css]
ถ้ามี Autoprefixer เราก็เขียนแค่นี้ครับ
[css].box {
border-radius: 10px; // สำหรับ Browser ใหม่ ๆ
}[/css]
แล้วตอน Compile CSS ใช้ Autoprefixer ก็จะใส่ CSS Prefix ให้เราเองครับ ประหยัดเวลาได้เยอะมาก
เขียน CSS โดยไม่ใช้ BEM / OOCSS
เทคนิคการเขียนโค้ดแบบ BEM จะทำให้อ่านชื่อคลาส CSS แล้วเข้าใจได้ง่ายครับ คุณ Mark บอกว่าไม่ได้ใช้มาตรฐานของที่ไหน แต่มีกฏคร่าว ๆ ดังนี้:
- เน้นใช้ class ใน CSS Selector ไม่ใช้ ID
- ไม่ซ้อน { } หลายชั้นเกินไป
- ใช้ขีดเดียว (-) ในชื่อ class
- พยายามเขียน CSS ให้สั้นที่สุดเท่าที่จะเป็นไปได้
ซึ่งในเว็บแบบ Github.com ที่มีทีมเขียน CSS หลายคน การทำให้โค้ดทุกคนตรงตามกฏเหมือนกันเป็นไปได้ยากครับ เพราะฉะนั้นคุณ Mark เลยใช้ CSS Linting
CSS Linting คืออะไร? ทำไมต้องใช้
ถ้าใครเคยเขียน Javascript น่าจะเคยได้ยิน JS Lint ครับ ซึ่งเป็น Tool สำหรับอ่าน Javascript ว่าเขียนตรงตามมาตรฐานมั้ย ถ้าไม่ตรงจะมี Warning ขึ้นมาบอกทุกบรรทัด แต่ถ้าโค้ดพัง ก็จะมี Error ขึ้นมาบอก
CSS Linting ก็หลักการเดียวกันครับ แต่เป็นของโค้ด SCSS แทน โดยจะเช็คเรื่องต่าง ๆ ดังนี้:
- class ในไฟล์ CSS คลาสไหนที่เขียนไว้แต่ไม่ได้ถูกนำมาใช้งาน (ไว้จัดการ CSS ที่ไม่ได้ใช้ หรือเคยใช้แต่เลิกใช้ไปแล้ว)
- มีการใช้ CSS Selector ซ้ำ (CSS Selector ควรนำมารวมกันจะได้ไม่มีการซ้อนทับของ CSS Property)
- ต้องเขียน CSS ให้อ่านง่าย เช่น ซ้อน { } ไม่เกินกี่ครั้ง, มีการเว้นบรรทัดของแต่ละ Selector, มีการเว้นช่องหลัง : ใน CSS
ถ้าเกิด CSS ไฟล์ไหนไม่ตรงตามกฏที่ตั้งไว้ ก็จะขึ้น Warning มาแจ้งครับ
ทำไมต้องแบ่ง CSS ที่ Compile ออกมาเป็น 2 ไฟล์
Microsoft ได้ประกาศออกมาตอนปี 2011 ว่า IE ต่ำกว่า 10 จะรองรับ CSS Selector แค่ 4095 Selector ต่อไฟล์
เว็บไซต์ Github.com เค้าทำออกมาเพื่อให้รองรับ IE ตั้งแต่เวอร์ชั่น 9 ขึ้นไป ซึ่งเค้าใช้ CSS Selector ในเว็บไซต์ทั้งหมดประมาณ 7,000 Selector ครับ เลยต้องมีการแยกเป็น 2 ไฟล์ ไม่งั้นเปิดใน IE9 จะพัง
คุณ Mark ได้เปรียบเทียบ CSS Selector ของ Github กับเว็บไซต์ดังอื่น ๆ ดังนี้:
- Bootstrap เวอร์ชั่น 3.2 ใช้ CSS Selector 1,900 Selector
- Twitter ใช้ 8,900 Selector
- New York Times ใช้ 2,100 Selector
- Soundcloud ใช้ 1,100 Selector
อ่านแล้วแอดมินอยากลองไปนับของตัวเองเหมือนกันครับ ว่าใช้กี่ Selector สามารถไปดูได้จากเว็บไซต์ CSSStats เลยครับ
เว็บไซต์ Genie Records ที่แอดมินทำ ใช้ 2,557 Selector ครับ ส่วน Designil.com ใช้ XXX Selector ครับ แอดมินยังต้องพัฒนาฝีมืออีกเยอะ T___T
เลือกใช้ CSS Selector ให้ดี
คุณ Mark บอกว่าการเลือกใช้ CSS Selector ใน Github.com ไม่ได้เน้นมากเรื่องการเขียนแบบไหนให้เร็วที่สุด แต่จะใช้วิธีเขียนตามมาตรฐานหลัก ๆ เช่น ใช้ class แทน ID หรือ Element ตรง ๆ, ไม่ซ้อน { } มากเกินไป อะไรแบบนี้ครับ
อย่างไรก็ตาม เค้าจะระวังพวก Selector แปลก ๆ เช่น [css][class^=”octicon”][/css] เพราะใช้เยอะ ๆ แล้วจะทำให้ Browser crash ไปเลยครับ
เทคนิคจัดการโค้ด CSS เก่าใน Github
ด้วยความที่ Github.com เป็นเว็บไซต์เก่าจึงมีโค้ด HTML / CSS เก่าเหลืออยู่ครับ ซึ่งบางครั้งโค้ดเก่าเขียนไว้ไม่เหมาะสม ควรจะแก้ใหม่
เค้ามีวิธีจัดการกับโค้ดเก่าต่าง ๆ โดยถ้าเจอส่วนที่หน้าตาเหมือนกัน แต่ HTML / CSS ไม่เหมือนกัน ก็จับมาทำให้มันเหมือนกันซะ
คุณ Mark บอกว่า Process เค้าก็ง่าย ๆ คือพอเจออะไรที่ควรเอาออก ก็เอาออกเลย แล้วบอกทีม CSS ให้เขียนขึ้นมาใหม่ การทำงานใน Github จะไม่กำหนดว่าต้องปล่อยเป็นเวอร์ชั่น ๆ แต่เน้นความรวดเร็ว ถ้าเสร็จก็ปล่อยได้เลย โดยจะทั้งทีมที่ตามหาโค้ดที่ต้องลบ และทีมที่ตามเขียนโค้ดที่โดนลบแล้วขึ้นมาใหม่
รวมการเขียน CSS แบบ Github.com
ทีม Developer ของ Github.com ได้ทำ Styleguide ของ Github ซึ่งเปิดให้คนทั่วไปเข้ามาอ่านได้ครับ
เค้าเขียนไว้ละเอียดมาก ตั้งแต่วิธีการเลือก px หรือ em, การใส่โค้ดสี, การคอมเม้นท์โค้ด ถ้าสนใจลองตามไปอ่านกันดูคร้าบ
สำหรับบทความวันนี้ก็หวังว่าจะได้รู้จัก Tool ใหม่ ๆ เพิ่มขึ้น และลองเอาไปใช้ในงานกันครับ แอดมินก็ได้รู้อะไรเพิ่มเติมเยอะเหมือนกันจากบทความนี้ เลยเอามาแบ่งปันกัน
อยากอ่านเรื่องอะไรอีกทิ้งไว้ในคอมเม้นท์ได้เลยคร้าบ
