การลดขนาด CSS: เคล็ดลับและเครื่องมือ

การเรียนรู้ที่จะเขียน CSS ที่สะอาดและเหมาะสมนั้นต้องใช้การฝึกฝนอย่างมากและความปรารถนาที่จะทำความสะอาดโดยไม่รู้ตัว การรักษาความสะอาด CSS ของคุณไม่ได้เป็นเพียงความต้องการด้านจิตใจที่บ้าคลั่งในการทำความสะอาดเท่านั้น โดยเฉพาะอย่างยิ่งสำหรับไซต์ขนาดใหญ่ มันจะทำให้หน้าเว็บโหลดเร็วขึ้น เวลาในการโหลดเร็วขึ้นหมายถึงการใช้งานที่ดีขึ้นและความพึงพอใจของผู้ใช้ที่สูงขึ้น

หลายคนมีรหัสฮิสทีเรีย นี่ไม่ใช่เรื่องเลวร้าย

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

จะบีบอัดหรือไม่บีบอัด

ก่อนที่เราจะพูดถึงวิธีบีบอัด CSS สิ่งสำคัญคือต้องทราบว่ามักจะมีความสมดุลระหว่างการบีบอัดและความสามารถในการอ่านโค้ด ผู้เขียนโค้ดหลายคนภาคภูมิใจในองค์กรที่สะอาดตาของ CSS ของตน และไม่ต้องการให้โค้ดของตนถูกเรียกใช้ผ่านคอมเพรสเซอร์เพื่อลบความคิดเห็นและการขึ้นบรรทัดใหม่ ในฐานะนักออกแบบ คุณควรวิเคราะห์เป้าหมายของโค้ดที่คุณเขียน หากคุณกำลังสร้างเว็บไซต์ขนาดเล็กที่ต้องใช้ CSS เพียงไม่กี่บรรทัด ก็อาจไม่จำเป็นต้องบีบอัดเพิ่มเติม ในทำนองเดียวกัน หากคุณกำลังเขียนโค้ดที่ต้องแชร์กับทีมที่เปิดกว้าง การใส่ความคิดเห็นเพิ่มเติมและการขึ้นบรรทัดใหม่สามารถช่วยเพื่อนร่วมงานของคุณประหยัดเวลาได้มากและได้รับการขอบคุณอย่างจริงใจ อย่างไรก็ตาม หากคุณกำลังออกแบบเว็บไซต์ขนาดใหญ่ที่ต้องใช้ CSS จำนวนมาก คุณจะต้องใส่ใจกับขนาดไฟล์ของคุณและทำให้มันเล็กที่สุดเท่าที่จะเป็นไปได้

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

ด้วยเหตุนี้ เรามาเริ่มด้วยการดูเทคนิคบางอย่างในการทำให้ไฟล์ CSS มีน้อยที่สุด

คำจำกัดความสไตล์ที่ว่างเปล่า

เริ่มจากสิ่งที่ชัดเจนกันก่อน หากคุณมีสไตล์ที่ว่างเปล่า ให้ทิ้งมันไป อย่าแก้ตัวว่าคุณอาจต้องการมันในภายหลังและคุณรู้ว่ามันเลอะเทอะ อย่าเพิ่มเว้นแต่คุณจะมีเหตุผลที่ถูกต้อง

ตัวย่อ

ตัวย่อ CSS เป็นวิธีรวม CSS หลายบรรทัดให้เป็นบรรทัดเดียว การสร้างนิสัยในการใช้เทคนิคตัวย่อทั้งหมดที่คุณรู้จักสามารถลดจำนวนบรรทัดของโค้ดที่คุณต้องเขียนลงได้อย่างมาก นี่คือตัวอย่าง:

เวอร์ชันยาว:

 #คอนเทนเนอร์ {
    ช่องว่างด้านบน : 5px
    ช่องว่างภายในขวา : 10px
    ช่องว่างด้านล่าง : 30px
    ระยะห่างจากขอบซ้าย : 18px
-

ฉบับย่อ:

 #คอนเทนเนอร์ {
    การขยาย : 5px 10px 30px 18px ;
-

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับตัวย่อ CSS คุณสามารถไปที่บทความต่อไปนี้:

CSS สไปรท์

แนวคิดดั้งเดิมเบื้องหลังสไปรท์ CSS คือการลดจำนวนคำขอ HTTP เพื่อเพิ่มความเร็วในการโหลดหน้าเว็บ วิธีที่สไปรท์บรรลุเป้าหมายนี้คือการรวมภาพหลายภาพให้เป็นไฟล์ภาพเดียว ซึ่งโดยปกติจะเป็นภาพที่มีรูปแบบตาราง แต่ละภาพจะแสดงโดยการสลับตำแหน่งพื้นหลังของภาพต่อเรียงที่ใหญ่ขึ้น สำหรับโค้ด CSS การใช้เทคโนโลยีสไปรท์สามารถปรับปรุงการนำโค้ดกลับมาใช้ซ้ำได้อย่างมากและการบำรุงรักษา ซึ่งจะช่วยลดจำนวนโค้ด CSS ได้อย่างมาก

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ CSS Sprites โปรดดูบทช่วยสอนของ Chris Coyier เกี่ยวกับ CSS-Tricks:

แน่นอนว่า Front-End Observation ยังมี บทความอันทรงคุณค่าและเคล็ดลับเกี่ยวกับ CSS Sprites

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

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

ประเภทแบบอักษรที่เหมาะสม (แบบอักษร-ตระกูล)

เมื่อขนาดไฟล์เป็นปัญหาใหญ่ อย่ารวมแบบอักษรอื่นไว้ในตระกูลแบบอักษรของคุณ กำจัดสัมภาระที่ไม่จำเป็นและลดตัวเลือกพิเศษของคุณเหลือหนึ่งหรือสองรายการ

ก่อน:

 #container { ตระกูลแบบอักษร : Palatino , Georgia , Times , serif ;

หลังจาก:

 #container { ตระกูล แบบอักษร : Palatino , serif ;

เกี่ยวกับแบบอักษร ฉันขอแนะนำอย่างยิ่งให้อ่าน " Three Talks about Web Default Fonts " ที่เขียนโดย Yu Bo

ใช้สีเลขฐานสิบหก

เพื่อลดจำนวนไบต์ ค่าสี RGB ทั้งหมดจะถูกแปลงเป็นค่าเลขฐานสิบหกที่สอดคล้องกัน นี่อาจไม่มีความหมายมากนักในการเริ่มต้น แต่ไบต์ใดๆ ก็คุ้มค่า!

ก่อน:

 # คอนเทนเนอร์ { สี : rgb ( 131 , 100 , 219 ) ;

หลังจาก:

 #คอนเทนเนอร์ { สี : # 8364DB ;

ลบตัวแบ่งบรรทัด

ดูแอตทริบิวต์สไตล์แต่ละรายการและลบการคืนสินค้าที่ไม่จำเป็นออก คุณยังสามารถลบเครื่องหมายอัฒภาคสุดท้ายออกได้

ก่อน:

 #คอนเทนเนอร์ {
    ระยะขอบ : 5px ;
    การขยาย : 5px 10px 30px 18px ;
-

หลังจาก:

 #container { ระยะขอบ : 5px การ ขยาย : 5px 10px 30px 18px }