คลายโค้ด CSS ที่ย่อออนไลน์
นำสไตล์ชีตที่ย่อแล้วมาจัดให้อ่านง่ายอีกครั้ง selector แยกเป็นบรรทัด แต่ละ declaration อยู่คนละบรรทัด ส่วนบล็อกและ media queries เยื้องอย่างเป็นระเบียบเหมือนเขียนด้วยมือ
ทำไม CSS ในระบบจริงจึงยาวเพียงบรรทัดเดียว
สไตล์ชีตถูกย่อด้วยเหตุผลเดียวกับสคริปต์ โดย CSS ขวางการแสดงผลของหน้าเว็บ การลดทุกไบต์จึงช่วยให้หน้าเว็บวาดได้เร็วขึ้น cssnano, Lightning CSS และเครื่องมือปรับขนาดที่ใช้ร่วมกับ Sass และ PostCSS จะตัดช่องว่างและคอมเมนต์ ย่อค่าสี รวมกฎที่ซ้ำ และลบอัฒภาคตัวสุดท้ายของแต่ละบล็อก เฟรมเวิร์กแบบ utility ทำให้ผลลัพธ์แน่นขึ้นอีก เพราะสไตล์ชีตที่คอมไพล์จาก Tailwind อาจมีกฎเล็ก ๆ หลายพันกฎเรียงติดกันแทบไม่มีช่องว่าง
อ่านลำดับ cascade ให้เข้าใจอีกครั้ง
เหตุผลสำคัญของการจัดรูปแบบสไตล์ชีตคือการเข้าใจว่าทำไมกฎหนึ่งจึงมีผลหรือไม่มีผล เมื่อ selector แต่ละตัวอยู่บนบรรทัดของตัวเองและ declaration เยื้องอยู่ด้านล่าง คุณจะไล่ cascade ได้อย่างเป็นระบบ ทั้งค้นหากฎทั้งหมดที่ตรงกับองค์ประกอบ เปรียบเทียบค่า specificity ดูว่ากฎใดอยู่ท้ายสุด และหาคำสั่ง important ที่เขียนทับงานของคุณโดยไม่ตั้งใจ Media queries และเนื้อหาภายในจะแสดงเป็นบล็อกชัดเจน ทำให้ติดตามการแสดงผลตามขนาดหน้าจอได้ง่ายกว่าไฟล์ที่ย่อแล้ว
รองรับ CSS สมัยใหม่
ตัวจัดรูปแบบเข้าใจ CSS ปัจจุบัน ทั้ง custom properties, นิพจน์ calc และ clamp, รูปแบบย่อของ grid และ flexbox, container queries, กฎแบบซ้อน, layers, บล็อก supports และ keyframes รายการ selector ที่ยาวจะถูกแบ่งบรรทัดให้อ่านสะดวก และคอมเมนต์ที่ยังเหลือจากการบิลด์จะคงไว้ หากไฟล์มีทั้ง CSS มาตรฐานและพร็อพเพอร์ตีที่มีคำนำหน้าเฉพาะผู้พัฒนาเบราว์เซอร์ เครื่องมือจะคงทั้งสองแบบไว้และจัดวางให้ชัดเจนขึ้น
เคล็ดลับสำหรับสไตล์ชีตจากเฟรมเวิร์ก
เมื่อจัดรูปแบบสไตล์ชีตที่คอมไพล์จาก Tailwind หรือ Bootstrap ไฟล์จะยาวขึ้นอย่างรวดเร็ว การมีหลายหมื่นบรรทัดเป็นเรื่องปกติ เปิดเลขบรรทัดแล้วใช้การค้นหาของเบราว์เซอร์หาชื่อคลาสหรือพร็อพเพอร์ตีที่ต้องการ แทนการเลื่อนอ่านทั้งหมด หากเป้าหมายคือการลดขนาดไฟล์ ควรไปปรับการตั้งค่าบิลด์ เพราะกฎที่ไม่ได้ใช้งานถูกสร้างขึ้นก่อนขั้นตอนย่อโค้ดจะเริ่มเสียอีก
คำถามที่พบบ่อย
คลายสไตล์ชีตที่คอมไพล์จาก Tailwind ได้หรือไม่?
ได้ และเป็นหนึ่งในงานที่ใช้หน้านี้บ่อยที่สุด ผลลัพธ์จะยาวมากเพราะเฟรมเวิร์กสร้างกฎสำหรับแต่ละคลาส utility การเปิดเลขบรรทัดและใช้การค้นหาของเบราว์เซอร์จึงเป็นวิธีที่สะดวกในการไปยังส่วนที่ต้องการ
กู้คอมเมนต์กลับมาได้หรือไม่?
เก็บไว้ได้เฉพาะคอมเมนต์ที่ยังอยู่ในไฟล์ ตัว minifier ส่วนใหญ่ลบคอมเมนต์ทั้งหมด ยกเว้นข้อความที่ระบุว่าเป็นประกาศทางกฎหมาย เมื่อลบแล้วจะกู้คืนจากไฟล์ไม่ได้ ตัวจัดรูปแบบจะรักษาคอมเมนต์ที่เหลืออยู่และจัดวางให้เหมาะสม
ใช้กับ SCSS หรือ Less ได้หรือไม่?
หน้านี้ออกแบบมาสำหรับ CSS ปกติที่เบราว์เซอร์ดาวน์โหลดจริง ซอร์สของ preprocessor ที่มีตัวแปร mixin และไวยากรณ์การซ้อนเฉพาะของ SCSS หรือ Less ไม่ใช่ข้อมูลเข้าที่ออกแบบมารองรับ แต่รองรับกฎแบบซ้อนของ CSS มาตรฐาน