CSS Framework

คนที่ทำงานทางด้าน Front-End Developer คงจะคุ้นเคยกันดีกับ CSS Framework หลากหลายเจ้า ทั้งแบบ Open Source และแบบผูกขาดเสียเงินให้เลือกใช้

โดยทั่วไปแล้ว Framework เหล่านี้ ออกแบบมาเพื่อ

  • ประหยัดเวลาในการพัฒนา ไม่ต้องเขียนโค้ดเอง จับ Element หรือแก้ไขนิดๆหน่อยๆก็ได้เว็บๆนึงมาใช้แล้ว
  • มีมาตรฐานร่วมกันในการเขียน ไม่ใช่เขียน HTML/CSS ตามใจฉัน หรือวาง Structure แบบติสท์ๆ เข้าใจเองคนเดียว
  • มีรูปแบบ grid ให้เลือกใช้ได้หลากหลาย หรือจะ responsive ก็มีให้เสร็จสรรพ
  • ไม่ต้องมีความรู้ความเข้าใจ HTML หรือ CSS ที่ลึกซึ้ง ก็สามารถทำ Front-end ให้เสร็จสวยงามได้ภายในเวลาที่จำกัด
  • พัฒนาทันต่อเทคโนโลยี เพราะออกเวอร์ชั่นใหม่ๆ ที่แก้ไข feature ต่างๆมาเรื่อยๆ ไม่ต้องมานั่งตามเทคโนโลยีเอง
  • ฯลฯ

ข้อดีมีเยอะแยะมากมาย แต่ถ้าใครที่เข้าใจคำว่า “Web standard, Web Accessibility, Semantic Website ฯลฯ” หรือเป็นคนที่เข้ามาเขียนเว็บในยุคบุกเบิก และเกิดความเปลี่ยนแปลงจากการใช้

มาเป็น
แล้วละก็ น่าจะเห็นข้อด้อยของ “Framework” เหล่านี้เช่นกัน

ด้วยความที่ Framework มันพัฒนามาแบบเป็น structure เหมือนๆกัน ทำให้คนที่เอามาใช้งานหยิบจับแก้ไขอะไรได้ง่าย มันจึงต้องมี CSS/ HTML และ Javascript ที่เสมือนเป็น library ที่ครอบคลุมทุกๆ feature หรือ element รวมอยู่เป็นก้อนๆหนึ่ง ที่ไม่ว่าคุณจะใช้หรือไม่ใช้ Element เหล่านั้น คุณก็ต้อง include file ทั้งหมดอยู่ดี ทำให้เกิดโค้ดที่ไม่จำเป็นต่อการใช้งาน (หรือโค้ดขยะ) เกิดขึ้น

และผลในทางด้าน semantic website หรือ SEO ก็(อาจจะ)ได้น้อยลง “ถ้าคุณไม่เข้าใจคำว่า Semantic website + Web standard” เพราะ Framework บางเจ้า มีการกำหนดระดับความซับซ้อนของ HTML ที่มากเกินไป .. และ HTML เหล่านี้ยิ่งมีความซับซ้อนมาก กว่าจะเข้าไปถึงเนื้อหาแก่นแท้ของบทความได้ มันก็ยิ่งยาก ยิ่งยาก SEO ก็ยิ่งแย่

เราเคยมีโอกาสใช้ Framework ตัวนึง ขอไม่ระบุดีกว่าว่าตัวไหน แต่สิ่งที่พบก็คือ

  • มีระดับความซับซ้อนของ HTML ที่เยอะเกินความจำเป็น
  • HTML ที่ใช้ไม่สื่อความหมาย
  • มีวิธีการเขียน CSS ที่ฟุ่มเฟือยเกินไป
  • เจอ Bug ด้วยในบาง screen (เป็น responsive)

ดังนั้น จึงต้องขอบอกว่า ใครจะใช้เพื่อประหยัดเวลา อันนั้นเห็นด้วยมันจะมีประโยชน์มาก แต่ถ้ามีเวลามากอีกนิด อยากจะให้หันมาพิจารณาทางออกของการใช้ Framework ให้เกิดประโยชน์สูงสุดมากกว่า

อะไรที่ควรทำ ถ้าไม่ใช้ Framework?

  • ถ้าคุณเก๋าเกมส์ อย่าไปใช้เลย framework ทำ framework เป็นของตัวเองขึ้นมาก็ยังได้
  • กำหนดกติการ่วมกันในทีมว่าต้องเขียน HTML / CSS อย่างไร ให้มีทิศทางเดียวกัน ไม่ใช่เขียนตัวใครตัวมันแบบอินดี้
  • เมื่อได้รับดีไซน์มา อย่าลงมือโค้ดทันที แต่ให้วิเคราะห์ออกมาก่อนว่า ในแต่ละหน้านั้นมี Element ชนิดไหนบ้าง / เหมือนหรือต่างกันอย่างไร / ส่วนไหนสามารถนำมาใช้ร่วมกันได้ แล้วทำการลิสออกมา
  • มอง Element ในแต่ละกล่องให้เสมือนเป็น Object แล้วแต่ละ Object สามารถดึงมาใช้ร่วมกันได้มากน้อยแค่ไหน เช่น ในหน้า A — Object มีสีชมพู แต่ในหน้า B — object เป็นสีเขียว สองหน้านี้ก็ใช้ HTML/ CSS ร่วมกันได้ แต่เพิ่ม CSS property ให้ต่างกันแค่สีเท่านั้น

แล้วถ้าไม่มีเวลาล่ะ แล้วถ้าไม่เก๋าพอล่ะ แล้วถ้า …. ล่ะ ? เรามีอีกทางเลือก …

ก็ใช้ Framework นั่นแหละ … จบข่าว :p

Author: AbaiyaMook

copyright 2021 www.abaiyamook.com