การเรียนรู้ที่จะเขียน CSS ที่สะอาดและปรับให้เหมาะสมนั้นต้องใช้การฝึกฝนอย่างมากและความปรารถนาที่จะทำความสะอาดโดยไม่รู้ตัว การรักษาความสะอาด CSS ของคุณไม่ได้เป็นเพียงความต้องการด้านจิตใจที่บ้าคลั่งในการทำความสะอาดเท่านั้น โดยเฉพาะอย่างยิ่งสำหรับไซต์ขนาดใหญ่ มันจะทำให้หน้าเว็บโหลดเร็วขึ้น เวลาในการโหลดเร็วขึ้นหมายถึงการใช้งานที่ดีขึ้นและความพึงพอใจของผู้ใช้ที่สูงขึ้น
หลายคนมีเครื่องรางรหัส นี่ไม่ใช่เรื่องเลวร้าย
บทความนี้จะสรุปเทคนิคที่คุณสามารถใช้เพื่อเพิ่มประสิทธิภาพ CSS ของคุณ รวมถึงเครื่องมือบีบอัดออนไลน์และเดสก์ท็อปบางตัวที่สามารถบีบอัดโค้ดของคุณได้โดยอัตโนมัติ
จะบีบอัดหรือไม่บีบอัด
ก่อนที่เราจะพูดถึงวิธีบีบอัด CSS สิ่งสำคัญคือต้องทราบว่ามักจะมีความสมดุลระหว่างการบีบอัดและความสามารถในการอ่านโค้ด ผู้เขียนโค้ดหลายคนภาคภูมิใจในองค์กรที่สะอาดตาของ CSS ของตน และไม่ต้องการให้โค้ดของตนถูกเรียกใช้ผ่านคอมเพรสเซอร์เพื่อลบความคิดเห็นและการขึ้นบรรทัดใหม่ ในฐานะนักออกแบบ คุณควรวิเคราะห์เป้าหมายของโค้ดที่คุณเขียน หากคุณกำลังสร้างเว็บไซต์ขนาดเล็กที่ต้องใช้ CSS เพียงไม่กี่บรรทัด ก็อาจไม่จำเป็นต้องบีบอัดเพิ่มเติม ในทำนองเดียวกัน หากคุณกำลังเขียนโค้ดที่ต้องแชร์กับทีมที่เปิดกว้าง การใส่ความคิดเห็นเพิ่มเติมและการขึ้นบรรทัดใหม่สามารถช่วยเพื่อนร่วมงานประหยัดเวลาได้มากและได้รับการขอบคุณอย่างจริงใจ อย่างไรก็ตาม หากคุณกำลังออกแบบเว็บไซต์ขนาดใหญ่ที่ต้องใช้ CSS จำนวนมาก คุณจะต้องใส่ใจกับขนาดไฟล์ของคุณและทำให้มันเล็กที่สุดเท่าที่จะเป็นไปได้
อาจต้องใช้เวลาสักระยะในการค้นหาส่วนผสมที่ลงตัวระหว่างการบีบอัดและความเป็นไปได้ แต่ทั้งคู่ก็คุ้มค่าที่จะสำรวจและการบรรลุความสมดุลระหว่างสิ่งเหล่านี้จะทำให้งานของคุณง่ายขึ้นมาก ในขณะเดียวกันก็เห็นได้ชัดว่าการบีบอัดไม่จำเป็นต้องทำให้การอ่านลดลงเสมอไป มีเทคนิคมากมายในการบีบอัดโค้ดซึ่งส่งผลให้โค้ดดีขึ้นและเป็นระเบียบมากขึ้น
ด้วยเหตุนี้ เรามาเริ่มด้วยการดูเทคนิคบางอย่างในการทำให้ไฟล์ CSS มีน้อยที่สุด
คำจำกัดความสไตล์ที่ว่างเปล่า
เริ่มจากสิ่งที่ชัดเจนกันก่อน หากคุณมีสไตล์ที่ว่างเปล่า ให้ทิ้งมันไป อย่าแก้ตัวว่าคุณอาจต้องการมันในภายหลังและคุณรู้ว่ามันเลอะเทอะ อย่าเพิ่มเว้นแต่คุณจะมีเหตุผลที่ถูกต้อง
คำย่อ
ตัวย่อ CSS เป็นวิธีการรวม CSS หลายบรรทัดให้เป็นบรรทัดเดียว การสร้างนิสัยในการใช้เทคนิคตัวย่อทั้งหมดที่คุณรู้จักจะช่วยลดจำนวนบรรทัดของโค้ดที่คุณต้องเขียนลงได้อย่างมาก นี่คือตัวอย่าง:
เวอร์ชันยาว:
#container{padding-top:5pxpadding-right:10pxpadding-bottom:30pxpadding-left:18px}ฉบับย่อ:
#คอนเทนเนอร์{ช่องว่างภายใน:5px 10px 30px 18px;}หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับตัวย่อ CSS คุณสามารถไปที่บทความต่อไปนี้:
CSS สไปรท์
แนวคิดดั้งเดิมเบื้องหลัง CSS Sprite คือการลดจำนวนคำขอ HTTP เพื่อเพิ่มความเร็วในการโหลดหน้าเว็บ วิธีที่สไปรท์บรรลุเป้าหมายนี้คือการรวมภาพหลายภาพให้เป็นไฟล์ภาพเดียว ซึ่งโดยปกติแล้วจะเป็นภาพที่มีรูปแบบตาราง แต่ละภาพจะแสดงโดยการสลับตำแหน่งพื้นหลังของภาพต่อเรียงที่ใหญ่ขึ้น สำหรับโค้ด CSS การใช้เทคโนโลยีสไปรท์สามารถปรับปรุงการนำโค้ดกลับมาใช้ซ้ำได้และการบำรุงรักษาได้อย่างมาก ซึ่งจะช่วยลดจำนวนโค้ด CSS ได้อย่างมาก
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ CSS Sprites โปรดดูบทช่วยสอนของ Chris Coyier เกี่ยวกับ CSS-Tricks:
แน่นอนว่า Front-End Observation ยังมีบทความอันทรงคุณค่าและเคล็ดลับเกี่ยวกับ CSS Sprites อีกด้วย
ลดความคิดเห็น
ฉันชอบใช้ความคิดเห็นในรหัสของฉัน ยิ่งฉันเพิ่มความคิดเห็นมากเท่าไร ฉันก็ยิ่งมองเห็นส่วนต่างๆ ของโค้ดได้เร็วขึ้นเท่านั้น อย่างไรก็ตาม หากคุณต้องการ CSS ที่ได้รับการปรับให้เหมาะสมที่สุดซึ่งใช้ทรัพยากรน้อย ความคิดเห็นที่มากเกินไปจะกินไบต์อันมีค่า ดังนั้นให้ลองลบความคิดเห็นที่ไม่จำเป็นออกทั้งหมดและฟอร์แมตความคิดเห็นที่คุณต้องเก็บไว้ให้เหลือน้อยที่สุด
ประเภทแบบอักษรที่เหมาะสม (แบบอักษร-ตระกูล)
เมื่อขนาดไฟล์เป็นปัญหาใหญ่ อย่ารวมแบบอักษรอื่นไว้ในตระกูลแบบอักษรของคุณ กำจัดสัมภาระที่ไม่จำเป็นและลดตัวเลือกพิเศษเหลือหนึ่งหรือสองรายการ
ก่อน:
#container{font-family:Palatino,Georgia,Times,serif;}หลังจาก:
#container{font-family:Palatino,serif;}เกี่ยวกับแบบอักษร ฉันขอแนะนำให้อ่าน "Three Talks about Web Default Fonts" ที่เขียนโดย Yu Bo
ใช้สีเลขฐานสิบหก
เพื่อลดจำนวนไบต์ ค่าสี RGB ทั้งหมดจะถูกแปลงเป็นค่าเลขฐานสิบหกที่สอดคล้องกัน นี่อาจไม่มีความหมายมากนักในการเริ่มต้น แต่ไบต์ใดๆ ก็คุ้มค่า!
ก่อน:
#คอนเทนเนอร์{สี:rgb(131, 100, 219);}หลังจาก:
#คอนเทนเนอร์{สี:#8364DB;}ลบตัวแบ่งบรรทัด
ดูแอตทริบิวต์สไตล์แต่ละรายการและลบการคืนสินค้าที่ไม่จำเป็นออก คุณยังสามารถลบเครื่องหมายอัฒภาคสุดท้ายออกได้
ก่อน:
#คอนเทนเนอร์{ระยะขอบ:5px;ช่องว่างภายใน:5px 10px 30px 18px;}หลังจาก:
#คอนเทนเนอร์{ระยะขอบ:5px;ช่องว่างภายใน:5px 10px 30px 18px}10 เครื่องมือบีบอัด CSS ออนไลน์
ตัวย่อ CSS สามารถทำให้งานส่วนใหญ่ในการล้างโค้ดของคุณเป็นไปโดยอัตโนมัติ หลายไฟล์จะบอกคุณว่าไฟล์ของคุณถูกบีบอัดกี่เปอร์เซ็นต์ ดังนั้นให้ลองใช้สองสามไฟล์เพื่อดูว่าอันไหนดีที่สุด
ไดรฟ์ CSS
ตัวเลือก:
โหมดการบีบอัด: การบีบอัดต่ำ, ปกติ, สูง
การบีบอัดความคิดเห็น: ไม่มีการบีบอัด ทั้งหมด หรือยาวกว่าค่าที่กำหนด
คอมเพรสเซอร์ CSS
ตัวเลือกเพิ่มเติม (คุณสามารถเลือกใช่หรือไม่ใช่สำหรับแต่ละรายการ):
จัดเรียงแอตทริบิวต์ใหม่
บีบอัดสี
บีบอัดฟอนต์-น้ำหนัก
ตัวเลือกตัวพิมพ์เล็ก
ลบพื้นที่ที่ไม่จำเป็นออก
ลบเครื่องหมายอัฒภาคที่ไม่จำเป็นออก
อรันเทียส
ตัวเลือกเพิ่มเติม (คุณสามารถเลือกใช่หรือไม่ใช่สำหรับแต่ละรายการ):
ลบความคิดเห็น
ลบความคิดเห็นที่มีความยาวอย่างน้อย x ไบต์
หนึ่งกฎต่อบรรทัด