เมื่อเราเผชิญกับไฟล์ css และ javascript ที่เพิ่มมากขึ้นในโครงการเว็บไซต์ ไม่ว่าจะเป็นสำหรับการพัฒนารองหรือการแยกวิเคราะห์เบราว์เซอร์ โค้ดของไฟล์เหล่านี้ควรได้รับการปรับให้เหมาะสม แต่การปรับให้เหมาะสมไม่ได้หมายความถึงเพียงการบีบอัดหรือลดขนาดไฟล์ องค์กรที่ชัดเจนและประสิทธิภาพการดำเนินงานสูงคือผลลัพธ์ที่เราต้องการ แล้วมีวิธีใดบ้างในการปรับปรุงโค้ด css ของเรา? ลองมาดูคำแนะนำด้านล่างกัน
1. การใช้
คำย่อสามารถลดระยะเวลาการทำงานและลดขนาดไฟล์ของคุณได้
ตั้งค่าที่แตกต่างกันสำหรับความแตกต่างที่คล้ายกัน:
ดู plaincopy ไปที่ clipboardprint หรือไม่
พี {
ขอบบน: 10px;
ขอบขวา: 20px;
ขอบล่าง: 30px;
ขอบซ้าย: 40px;
}
พี {
ขอบบน: 10px;
ขอบขวา: 20px;
ขอบล่าง: 30px;
ขอบซ้าย: 40px;
}
ใช้คำย่อ:
ดู plaincopy ไปที่ clipboardprint หรือไม่
p { ระยะขอบ: 10px 20px 30px 40px; }
p { ระยะขอบ: 10px 20px 30px 40px;
มาดูคำย่อของแบบอักษรที่ใช้กันทั่วไปกันดีกว่า
ลองอ่าน CSS Shorthand Guide (ภาษาอังกฤษ) และ CSS ที่มีประสิทธิภาพพร้อมคุณสมบัติชวเลข (ภาษาอังกฤษ) เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติชวเลข
2. หลีกเลี่ยงการใช้แฮ็ก
บล็อกของ Jon Hick hicksdesign.co.uk/journal การใช้ความคิดเห็นแบบมีเงื่อนไขของเบราว์เซอร์
การแฮ็กเป็นสิ่งที่ไม่ดี มันจะกำหนดโค้ดเดียวกันสำหรับเบราว์เซอร์ที่แตกต่างกัน ทำให้ CSS ยุ่งยาก ตอนนี้เรารู้แล้วว่าควรใช้ความคิดเห็นแบบมีเงื่อนไขแทนการแฮ็ก ซึ่งเป็นที่ยอมรับใน IE6 และ IE7 และแม้แต่ทีม IE ก็แนะนำให้ใช้ ใช้ความคิดเห็นแบบมีเงื่อนไขเพื่อให้บริการโค้ด CSS เฉพาะสำหรับคุณลักษณะของเบราว์เซอร์ ดังนั้น โค้ด CSS หลักที่มีขนาดเล็กกว่าจึงถูกนำมาใช้เพื่อให้บริการเบราว์เซอร์ที่เป็นไปตามมาตรฐาน โดยจะถูกดาวน์โหลดเมื่อมีเงื่อนไขที่จำเป็นเกิดขึ้นเท่านั้น (เช่น ไฟล์ CSS เพิ่มเติม) !
ลองมาดูตัวอย่างโค้ดโดยใช้ความคิดเห็นแบบมีเงื่อนไขใน IE6:
ดู plaincopy ไปที่ clipboardprint หรือไม่
รหัสนี้ทำให้ IE6 ดาวน์โหลด ie6.css เพิ่มเติมเพื่อแยกวิเคราะห์โค้ด CSS เฉพาะของมัน ในทำนองเดียวกัน หากคุณกำหนดเป้าหมายไปที่ IE7 เพียงแทนที่ 6 และ 7 ด้านบน
3. ใช้ white space
ไม่ว่าจะเพื่อการอ่านของคุณเองหรือการพัฒนารอง คุณต้องรักษา white space ไว้ซึ่งมีบทบาทสำคัญ
เราไม่แนะนำให้คุณลบการจัดรูปแบบช่องว่างทั้งหมด เช่น แท็บ การขึ้นบรรทัดใหม่ การเว้นวรรค ฯลฯ เพื่อให้ได้ไฟล์ CSS ที่เล็กลง ขอแนะนำให้เยื้องโค้ดที่ซ้อนกันด้วยแท็บ และแอตทริบิวต์ทั้งหมดควรอยู่ในบรรทัดแยกกัน
เมื่อเปรียบเทียบรูปภาพด้านบนและด้านล่าง รูปแบบใดสามารถช่วยคุณประหยัดเวลาในการแก้ไขได้มากขึ้น พื้นที่สีขาวจะทำให้คุณจัดการโค้ดได้ง่ายขึ้น
4. ลบเฟรมเวิร์กที่ซ้ำซ้อนและรีเซ็ต
รีเซ็ตกฎที่ใช้โดยเฟรมเวิร์ก CSS 960 Grid System ของ Nathan Smith
หากคุณเลือกใช้เฟรมเวิร์ก CSS รวมถึงเฟรมเวิร์กที่คุณเขียนเอง หากคุณตรวจสอบโค้ด คุณจะพบว่ากฎบางกฎที่อยู่ในเฟรมเวิร์กนั้นใช้ไม่ได้กับเฟรมเวิร์กปัจจุบันของคุณ สามารถลบไฟล์.
สิ่งที่คิดได้คือการรีเซ็ต การรีเซ็ตที่ใช้โดย YUI Grid CSS และการรีเซ็ตของ Eric Meyer ได้รับความนิยมอย่างมากในปัจจุบัน แต่โดยปกติแล้วจะมีแอตทริบิวต์ทั้งหมดที่จำเป็นสำหรับเว็บไซต์ขนาดใหญ่ เช่น pre, code, sub, dfn, var ฯลฯ ไม่ได้ใช้เลยสำหรับเว็บไซต์ทั่วไป Eric Meyer จะสนับสนุนให้คุณทำเช่นเดียวกัน!
เฟรมเวิร์กและการรีเซ็ตจะช่วยให้งานของคุณได้เป็นอย่างดี แต่ถ้าคุณไม่ลบการใช้งานที่คุณไม่ต้องการออกไป มันจะดึงประสิทธิภาพและความสามารถในการอ่านเพจของคุณลงไป
5. CSS แบบขยาย
Stopdesign.com CSS โดย Doug Bowman ใช้ตัวเลือกพิเศษสำหรับเลเยอร์
อีกวิธีในการเพิ่มประสิทธิภาพโค้ดของคุณคือการประกาศคุณสมบัติเฉพาะสำหรับแต่ละเลเยอร์
6. บันทึกงานของคุณ
ในการทำงานร่วมกันเป็นทีม สิ่งสำคัญอย่างยิ่งในการสื่อสารมาตรฐานการเขียน มาตรฐานการเขียนโค้ด วิธีการใส่คำอธิบายประกอบ และสไตล์ กฎเกณฑ์จะขึ้นอยู่กับแนวทางมาตรฐานที่สอดคล้องกัน วิธีนี้จะป้องกันไม่ให้ผู้อื่นทำซ้ำงานที่คุณทำไปแล้วและป้องกันการขยายโค้ด
7. ใช้การบีบอัด
เพื่อประหยัดเวลาในการดาวน์โหลดและโหลดเบราว์เซอร์มากขึ้น การบีบอัดถือเป็นวิธีแก้ปัญหาที่ดี แต่เมื่อเผยแพร่เท่านั้น YUI Compressor และ CSSTidy เป็นผู้เชี่ยวชาญในด้านนี้ พวกเขาสามารถลบโค้ดที่ซ้ำซ้อนและตรวจสอบข้อผิดพลาดเมื่อคุณสมบัติทับซ้อนกัน
โปรแกรมแก้ไขยอดนิยมหลายตัว เช่น BBEdit, TextMate และ TopStyle สามารถช่วยคุณจัดรูปแบบโค้ด CSS ตามที่คุณต้องการได้ คุณยังสามารถใช้ PHP เพื่อประมวลผล CSS ของคุณผ่านเทคโนโลยีการบีบอัดเซิร์ฟเวอร์ คุณสามารถค้นหาเครื่องมือเพิ่มประสิทธิภาพ CSS และการบีบอัด CSS เพิ่มเติมได้
จนถึงจุดหนึ่ง ขั้นตอนเหล่านี้ช่วยลดการเกิดข้อผิดพลาดให้เหลือน้อยที่สุด แต่ก็ไม่ได้สมบูรณ์แบบ ในทำนองเดียวกัน ทางที่ดีไม่ควรใช้กับไฟล์ที่มีการแฮ็ก CSS นี่เป็นอีกเหตุผลหนึ่งที่ต้องเก็บแฮ็กไว้ในไฟล์แยกกัน
เสร็จ
------------------------------------------------- ----------------------------------
โค้ดที่สะอาดและปรับให้เหมาะสมไม่ได้เป็นเพียงเกี่ยวกับขนาดไฟล์ของคุณเท่านั้น แต่ยังเกี่ยวกับอีกด้วย การบำรุงรักษาและความสามารถในการอ่าน หลักการข้างต้นไม่ได้มีไว้สำหรับ CSS เท่านั้น แต่ยังสามารถนำไปใช้กับ HTML, Javascript และภาษาการเขียนโปรแกรมอื่น ๆ ได้อีกด้วย ไฟล์ CSS ไม่ได้มีไว้เพื่อการนำเสนอต่อผู้ใช้เว็บไซต์ของคุณเท่านั้น หลักการข้างต้นสามารถช่วยประสบการณ์ผู้ใช้และประสบการณ์ของนักพัฒนาได้ ใช้หลักการเหล่านี้กับโครงการในอนาคตของคุณ และคุณจะบรรลุผลลัพธ์ที่สำคัญอย่างแน่นอน