วิธีการทำงานของ CSS beautification
Beautifier อ่านสไตล์ชีตทีละตัวอักษร ติดตามความลึกของการซ้อน (nesting) ของแต่ละบล็อก แล้ว re-emit ออกมาพร้อมการเว้นระยะที่สม่ำเสมอ โดยไม่เปลี่ยนผลลัพธ์การแสดงผลเลย — เปลี่ยนแค่หน้าตา
- แปลงเป็นโทเค็น. ไลบรารีสแกน input เป็น token stream: selector, ชื่อ property, ค่า, at-rule, comment และวงเล็บปีกกา โคลอน เซมิโคลอนที่คั่นระหว่างกัน โดย string และค่า url() ถูกมองเป็นหน่วยเดียว ทำให้วงเล็บปีกกาใน property content ไม่ถูกเข้าใจผิดว่าเป็น block delimiter
- ติดตาม nesting. ขณะเดิน token stream beautifier จะรักษา indent level แบบ real-time วงเล็บปีกกาเปิดจะทำให้ level ลึกขึ้น — ไม่ว่าจะเป็น rule block, media query หรือ keyframes — ส่วนวงเล็บปีกกาปิดจะดึง level กลับ ความลึกนี้กำหนดจำนวน indent unit ที่วางหน้าแต่ละบรรทัดในผลลัพธ์
- ใช้ตัวเลือกที่ตั้งไว้. ตัวเลือกการย่อหน้า (2 ช่องว่าง, 4 ช่องว่าง หรือ tab) กำหนดความกว้างของหนึ่ง level การตั้งค่าสไตล์วงเล็บปีกกาตัดสินว่าวงเล็บปีกกาเปิดจะอยู่บรรทัดเดียวกับ selector ที่นำหน้า หรือจะขึ้นบรรทัดใหม่เอง ส่วน toggle ที่เหลือเพิ่มบรรทัดว่างระหว่าง rule block และแยก selector ที่จัดกลุ่มไว้ออกเป็นบรรทัดต่างหาก
- ส่งออกอีกครั้ง. สุดท้าย formatter พิมพ์ token กลับออกมาพร้อม indentation และ line break ที่คำนวณไว้ โดยวางหนึ่ง declaration ต่อหนึ่งบรรทัดและเพิ่มช่องว่างหนึ่งตัวหลังโคลอน ผลลัพธ์คือสไตล์ชีตเดิมในรูปแบบที่มนุษย์สามารถสแกน cascade ได้
ทำไมต้องจัดรูปแบบ CSS
- อ่านสไตล์ชีตที่ถูกบีบอัด. Production CSS ส่งมาเป็นบรรทัดเดียวโดยไม่มีช่องว่างระหว่างกฎ การ beautify ช่วยคืนการขึ้นบรรทัดและการย่อหน้า ทำให้สามารถหา selector ที่อยู่เบื้องหลัง layout bug และดูว่ามัน set declaration อะไรไว้ แม้ไม่มี source map
- จัดการไฟล์ที่มี style ไม่สม่ำเสมอ. สไตล์ชีตที่หลายคนแตะมักมีการย่อหน้าและสไตล์วงเล็บปีกกาที่ปะปน ผ่าน beautifier ครั้งเดียวก็ normalize ทั้งไฟล์ให้เป็น layout เดียวกัน ทำให้ diff ถัดไปแสดงการเปลี่ยนแปลงของ cascade จริงๆ แทนที่จะเป็น whitespace noise
- เครื่องมือนี้ไม่ทำให้หน้าช้าลง. formatter ออนไลน์ส่วนใหญ่โหลดไลบรารีทั้งหมดทันทีที่เปิดหน้า เครื่องมือนี้ lazy-load js-beautify เฉพาะเมื่อคุณคลิก Beautify หรือเปิดโหมดสด การเปิดหน้าจึงใช้เพียงไม่กี่กิโลไบต์แทนที่จะเป็นหลายร้อย และการ render เริ่มต้นยังคงเร็ว
- โค้ดไม่ออกจากเบราว์เซอร์. Beautifier ทำงานบนอุปกรณ์ของคุณทั้งหมด CSS ของคุณไม่ถูกอัปโหลดขึ้น server เลย ซึ่งสำคัญมากเมื่อสไตล์ชีตที่กำลังตรวจสอบเป็นของลูกค้า มี internal class name หรืออยู่ภายใต้ข้อตกลงการรักษาความลับ
การใช้งานทั่วไป
CSS beautification เกิดขึ้นทุกครั้งที่ต้องอ่านสไตล์ชีตที่ไม่ได้ถูกเขียนมาเพื่อให้อ่าน
- Debug production: วาง minified stylesheet จาก Network tab เพื่อหา rule ที่ override layout ที่คาดไว้
- เตรียม code review: reformat สไตล์ชีตของ contributor ที่ indentation ไม่สม่ำเสมอก่อนเปิด pull request เพื่อให้ reviewer เห็น cascade ไม่ใช่ layout
- เรียนรู้และตรวจสอบ: ขยายสไตล์ชีตของ framework หรือ component library เพื่อศึกษาโครงสร้าง selector, media query และ custom property
ตัวอย่างที่ใช้งานได้จริง
ลองใช้ one-liner ที่บีบอัดแล้ว: a{color:red;margin:0}b{padding:0} วางด้านบนโดยตั้ง indentation เป็น 2 ช่องว่างและ brace style เป็น Collapse แล้วคลิก Beautify คุณจะได้ block ที่อ่านได้: a { บรรทัดต่างหาก, declaration color: red; และ margin: 0; indent ลึกขึ้นหนึ่ง level และวงเล็บปีกกาปิดเรียงอยู่ใต้ selector และ rule b อยู่ถัดไป เปลี่ยน brace style เป็น Expand แล้ววงเล็บปีกกาเปิดทุกตัวจะขึ้นบรรทัดใหม่ เปลี่ยน indentation เป็น Tab แล้วแต่ละ level จะใช้ tab character แทนสองช่องว่าง สไตล์เหมือนเดิมทุกประการ เปลี่ยนแค่ layout
FAQ
รันในเบราว์เซอร์ของฉันหรือไม่?
ใช่ ไลบรารี js-beautify โหลดแบบ lazy ครั้งแรกที่คุณคลิก Beautify หรือเปิดโหมดสด แล้ว cache ไว้ CSS ของคุณจะไม่ออกจากหน้าเลย ไม่มีการส่งข้อมูลไป server และไม่มีการอัปโหลด
การ beautify เหมือนกับ un-minify หรือไม่?
มันคืน formatting ที่อ่านได้ — indentation, line break และ spacing — แต่ไม่สามารถนำ comment ที่ถูก minification ลบออกไปคืนมาได้ หรือกู้คืนโครงสร้างที่ไม่เคยมีในไฟล์ มันเพียงแค่ reformat declaration และ selector ที่มีอยู่
การ beautify จะเปลี่ยนวิธีที่ style แสดงผลไหม?
ไม่ Beautification เพิ่มและลบแค่ whitespace และ line break เท่านั้น cascade ไม่ถูกแตะต้องและหน้าแสดงผลเหมือนเดิมทุกประการ ลำดับ property, specificity และค่าทั้งหมดคงไว้ตามที่เขียน
ตัวเลือก brace style หมายความว่าอย่างไร?
Collapse เก็บวงเล็บปีกกาเปิดไว้บรรทัดเดียวกับ selector (a {) ซึ่งเป็น CSS convention ทั่วไป Expand วางวงเล็บปีกกาเปิดทุกตัวในบรรทัดของตัวเอง toggle บรรทัดว่างและหนึ่ง selector ต่อหนึ่งบรรทัดควบคุมช่องว่างระหว่าง rule block และวิธีที่ selector แบบจัดกลุ่มอย่าง h1, h2, h3 แสดงผล
CSS beautification ฝั่งเบราว์เซอร์ให้สไตล์ชีตที่อ่านได้โดยไม่ต้องมี build step หรืออัปโหลด วางไฟล์ที่ถูกบีบอัดหรือรก เลือก indentation และ brace style แล้วคัดลอกหรือดาวน์โหลดผลลัพธ์ โค้ดไม่ออกจากอุปกรณ์ของคุณ ไม่ต้องมีบัญชี และไลบรารีโหลดเฉพาะเมื่อคุณขอเท่านั้น การเปิดหน้านี้จึงสิ้นเปลืองเพียงไม่กี่กิโลไบต์ ไม่ใช่เมกะไบต์