ข้อความต้นฉบับ | . ผ่าน: 9 เคล็ดลับสำหรับไฟล์ CSS ที่เล็กลงและปรับให้เหมาะสม
ผู้แต่ง|ผู้แต่ง: สเตฟาน เวอร์โวร์ต
การแปล|ทรานส์: Luc
เนื่องจากไฟล์ CSS ถูกโหลดไว้ที่ส่วนหัวของหน้าเว็บ ผู้เยี่ยมชมแต่ละคนจึงดาวน์โหลดไฟล์เหล่านี้ เราจะปรับไฟล์และรูปภาพ PHP ให้เหมาะสม แต่มักจะเพิกเฉยต่อไฟล์ CSS วันนี้เราควรคิดถึงปัญหานี้และทำอะไรสักอย่างกับมัน
เป็นไปได้ที่จะเพิ่มประสิทธิภาพ CSS โดยใช้เครื่องมือเพิ่มประสิทธิภาพ CSS แต่ฉันคิดว่าทั้งประสิทธิภาพและพลังจะได้รับการปรับปรุงหากคุณเขียนโค้ดโดยใช้เทคนิคที่กล่าวถึงด้านล่าง
การเพิ่มประสิทธิภาพไฟล์ CSS ยังช่วยประหยัดปริมาณการเข้าชมและเพิ่มความเร็วในการโหลดหน้าเว็บอีกด้วย
1. ความคิดเห็น ความคิดเห็นมีประโยชน์อย่างยิ่งเมื่อเขียน CSS เพื่อให้เพื่อนร่วมงานที่ทำงานร่วมกันเข้าใจความหมายของโค้ด มีหลายวิธีในการใส่คำอธิบายประกอบ คุณสามารถใช้วิธีต่อไปนี้:
-
/*-----แสดงความคิดเห็น-------*/
-
คุณยังสามารถใช้วิธีการต่อไปนี้:
/*ความคิดเห็น*/
วิธีนี้จะบันทึกอักขระ 20 ตัว และสมมติว่ามีความคิดเห็น 15 รายการ ก็จะบันทึกได้ 300 อักขระ
2. รหัสสีแบบย่อ รหัสสีถูกกำหนดด้วยรหัส HEX ซึ่งมีอักขระ 6 ตัว แต่ในบางกรณีอาจใช้อักขระ 3 ตัวแทนได้ ดูตัวอย่างต่อไปนี้:
div { color: #ffffff; } /* รหัสย่อ: color:#fff;
div{ color: #ff88ff; } /* รหัสย่อ: color:#f8f;
div { color: #f8f7f2; } /* ไม่สามารถใช้รหัสย่อได้ */
3. รวมองค์ประกอบ ตัวอย่างเช่น หากมีองค์ประกอบจำนวนมาก เช่น h2, h3 และ h4 และองค์ประกอบทั้งหมดมีคุณลักษณะเหมือนกันและมีเพียงคุณลักษณะบางอย่างเท่านั้นที่แตกต่างกัน คุณสามารถเขียนได้ดังนี้:
h2, h3, h4 {
ช่องว่างภายใน:0;
ระยะขอบ:0;
สี:#333;
ระยะห่างระหว่างตัวอักษร:.05em;
การเว้นวรรคคำ:0.1em;
-
h2{ ขนาดตัวอักษร:1.2em;
h3{ ขนาดตัวอักษร:1.1em;
h4{ ขนาดตัวอักษร:1em;
การดำเนินการนี้จะผสานองค์ประกอบที่มีคุณลักษณะเดียวกันในขณะที่ประกาศแอตทริบิวต์ขนาดตัวอักษรที่แตกต่างกัน สามารถประหยัดพื้นที่ได้มาก
4. เมื่อค่าเป็น 0 จะละเว้น Out Px/Em/%
0 ไม่ต้องใช้เครื่องหมาย Px, Em และเปอร์เซ็นต์ เมื่อค่าของคุณเป็น 0 (ซึ่งฉันถือว่าคุณจะใช้) การละเว้นหน่วยจะบันทึกอักขระได้มากเป็นสองเท่า
div { การขยาย: 0px 5px 5px 10px }
/* ตัวย่อ: ช่องว่างภายใน: 0 5px 5px 10px;
5. รวมคุณลักษณะ คุณลักษณะบางอย่าง เช่น ระยะห่างจากขอบ และเส้นขอบ สามารถเขียนแยกกันได้ ตัวอย่างเช่น: ช่องว่างด้านบน ช่องว่างด้านขวา ช่องว่างด้านล่าง และช่องว่างด้านซ้าย
หากเป็นไปได้ ให้รวมเข้าด้วยกันเพื่อให้เขียนได้ง่ายขึ้นและประหยัดพื้นที่
div{
ช่องว่างภายใน:0 ;
ช่องว่างด้านบน: 50px;
ช่องว่างภายในด้านล่าง: 23px;
ช่องว่างภายใน: 4px; }
/* ตัวย่อ: การขยาย:50px 4px 23px 0;
หากค่าบนและล่างเท่ากันและค่าซ้ายและขวาเท่ากันคุณสามารถเขียน:
div{
ช่องว่างด้านบน: 5px;
ช่องว่างภายใน: 5px;
ช่องว่างภายใน:0 ;
ช่องว่างภายใน: 0px;
/* ตัวย่อ: ช่องว่างภายใน:5px 0; */
6. เลือกคลาส/ID อย่างชาญฉลาด
ชื่อคลาสและ ID ที่เลือกควรสั้น เข้าใจง่าย และมีความหมายมากที่สุด
หลีกเลี่ยงการเลือกชื่อเช่น "HeaderMiddleLeftCategories" ให้ใช้ "h-cats" แทน สิ่งนี้จะบันทึกอักขระจำนวนมาก
7. ทำความสะอาดไฟล์ CSS เพื่อประหยัดพื้นที่ เมื่อสร้างเว็บไซต์ด้วย CSS โค้ดที่เขียนอาจใช้งานได้หรือไม่ก็ได้ และใช้พื้นที่มาก ควรตรวจสอบไฟล์ CSS เพื่อหาข้อผิดพลาดและโค้ดที่ไม่ถูกต้องเพื่อประหยัดพื้นที่
8. ลบเครื่องหมายอัฒภาคออกจากแอตทริบิวต์สุดท้ายในตัวเลือก นี่คือเคล็ดลับที่ฉันค้นพบโดยใช้คอมเพรสเซอร์ CSS
ร่างกาย{
พื้นหลัง:#ccc;
สี:#333; }
/* รหัสย่อ: color:#333 */ดูสิ ฉันลบเครื่องหมายอัฒภาคตัวสุดท้ายออกแล้ว เอฟเฟกต์อาจไม่ชัดเจน แต่เพิ่มขึ้นเล็กน้อย 50 ตัวเลือกคือ 50 อักขระ
9. ลบช่องว่างที่ไม่มีประโยชน์และการขึ้นบรรทัดใหม่ คุณอาจต้องการลบช่องว่างและการขึ้นบรรทัดใหม่ทั้งหมดเนื่องจากใช้อักขระตัวเดียว แต่ปัญหาคือมันจะทำลายโครงสร้างของ CSS และลดความสามารถในการอ่าน
ปกติฉันจะไม่ทำเช่นนี้เมื่อปรับแต่งไฟล์ CSS เพราะโครงสร้างมีความสำคัญต่อฉันมากกว่า นี่คือการประนีประนอม ให้ใช้ไฟล์บนเว็บไซต์ที่ไม่มีแคร่คืนและช่องว่าง การบันทึกไฟล์ที่มีการขึ้นบรรทัดใหม่และการเว้นวรรคในเครื่องทำให้การแก้ไขสะดวกมาก
บทสรุป หากคุณต้องการเพิ่มประสิทธิภาพไฟล์ CSS อย่างเต็มที่ ฉันขอแนะนำให้ใช้คอมเพรสเซอร์ CSS เพื่อให้คุณสามารถเรียนรู้ทักษะข้างต้นได้ด้วยตัวเอง และปรับปรุงความเร็วในการเขียนและคุณภาพของโค้ด CSS
หากคุณมีเคล็ดลับอื่น ๆ โปรดฝากข้อความไว้