ทบทวนแนวคิด CSS in JS ใหม่

 (dev.to)
7 คะแนน โดย alstjr7375 2024-09-12 | 3 ความคิดเห็น | แชร์ทาง WhatsApp

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

ปัญหาอย่างสไตล์ชนกัน ประสิทธิภาพที่ลดลง และความยากในการบำรุงรักษา เป็นสิ่งที่รบกวนนักพัฒนาจำนวนมาก

บทความนี้อธิบายแนวทางใหม่ในการแก้ปัญหาเหล่านี้อย่างละเอียด โดยเฉพาะแนวคิด CSS in JS
โดยเริ่มจากภูมิหลังทางประวัติศาสตร์ของ CSS ไปจนถึงวิธีการทำสไตล์สมัยใหม่และระบบการออกแบบแห่งอนาคต ครอบคลุมหัวข้ออย่างกว้างขวาง

โครงสร้างของบทความมีดังนี้

  1. นิยามและภูมิหลังของ CSS ใน JS
    1. CSS ใน JS คืออะไร?
    2. ภูมิหลังของ CSS ใน JS
  2. บริบททางประวัติศาสตร์ของ CSS และการออกแบบ
    3. ภูมิหลังของ CSS
    4. ภูมิหลังของการออกแบบ
    5. ภูมิหลังของระบบการออกแบบ
  3. การวิเคราะห์วิธีจัดการสไตล์และข้อเสนอใหม่
    6. ที่ผ่านมามีการจัดการสไตล์กันอย่างไร?
    7. ควรจัดการสไตล์อย่างไร?
  4. แผนการนำ CSS ไปใช้ใน JS อย่างเป็นรูปธรรม
    8. ทำไมจึงมี CSS อยู่ใน JS?
    9. แนะนำโปรเจกต์ mincho
    10. CSS ที่เป็นมิตรกับ CSS ใน JS
    11. CSS ที่ขยายต่อได้ใน JS
  5. การบูรณาการเข้ากับระบบการออกแบบ
    12. CSS ใน JS สำหรับระบบการออกแบบ

โดยเฉพาะอย่างยิ่ง บทความนี้แนะนำแนวทาง SCALE CSS และแนวคิดใหม่ชื่อ StyleStack พร้อมเสนอ โปรเจกต์ mincho ที่พัฒนาบนพื้นฐานดังกล่าว โดยมีเป้าหมายเพื่อทำให้ CSS ที่เป็นมิตรกับ CSS และขยายต่อได้ถูกนำไปใช้ใน JS

เป้าหมายสูงสุดของบทความนี้คือการนำเสนอความเป็นไปได้ของโซลูชันการทำสไตล์ที่ดีกว่าให้แก่นักพัฒนา นักออกแบบ และผู้มีส่วนเกี่ยวข้องอื่น ๆ ในโปรเจกต์เว็บ
แม้จะเป็นบทความยาว แต่ขอบคุณที่สละเวลาอ่าน

บทความที่เกี่ยวข้อง

3 ความคิดเห็น

 
savvykang 2024-09-12

ขออภัยที่ไม่ได้เห็นด้วยกับโปรเจกต์นี้ แต่ผมคิดว่าวงการฟรอนต์เอนด์น่าจะต้องสร้างเครื่องมือหรือคอนเวนชันที่มีฉันทามติร่วมกันอย่างกว้างขวางมากขึ้น โดยมองในระยะยาวกว่านี้ สำหรับคนที่พอมีประสบการณ์กับสแตกอย่าง SCSS, LESS, AngularJS, Angular 2.0, React เทคโนโลยีใหม่ฝั่งฟรอนต์เอนด์ดูเหมือนถูกโอเวอร์เอนจิเนียร์เกินความจำเป็น และให้ความรู้สึกสิ้นเปลืองแรงไปมาก
 
slowandsnow 2024-09-12

ถ้าพูดถึงฉันทามติบนเว็บ ก็มีมาตรฐานเว็บอยู่ ในโลกของ CSS มีการนำการซ้อนแบบ scss เข้ามา และยังมีการถกเถียงพร้อมทั้งเพิ่มความสามารถอย่างต่อเนื่อง เช่น class, เมธอดแบบ functional programming, web component เป็นต้น
 
alstjr7375 2024-09-12

ผมคิดว่าวงการฟรอนต์เอนด์เองก็เพิ่งแตกแขนงออกมาได้ไม่นาน เลยดูเหมือนกำลังลองนั่นลองนี่กันอยู่ครับ
ตั้งแต่ไลบรารีอย่าง React, Vue ไปจนถึงเครื่องมือต่าง ๆ โดยรวมอย่าง bundler, linter และอื่น ๆ

ยิ่งไปกว่านั้น ต่างจากฝั่งแอปที่มีบริษัทสักแห่งกำหนด best practice แล้วเผยแพร่ออกไป ผมเลยคิดว่าความสับสนในฝั่งนี้ค่อนข้างมากเลยครับ!!