1. ใช้ตัวย่อ CSS
การใช้ตัวย่อจะช่วยลดขนาดไฟล์ CSS และทำให้อ่านง่ายขึ้น สำหรับกฎหลักของตัวย่อ CSS โปรดดูที่ "สรุปไวยากรณ์ตัวย่อ CSS ทั่วไป" ซึ่งจะไม่มีการอธิบายไว้ที่นี่
2. กำหนดหน่วยให้ชัดเจน ยกเว้นค่าเป็น 0
การลืมกำหนดหน่วยของมิติข้อมูลถือเป็นข้อผิดพลาดทั่วไปของมือใหม่ที่ใช้ CSS ใน HTML คุณสามารถเขียน width=100 ได้ แต่ใน CSS คุณต้องระบุหน่วยที่แน่นอน เช่น: width:100px width:100em มีข้อยกเว้นเพียงสองประการที่ไม่สามารถกำหนดหน่วยได้: ความสูงของแถวและค่า 0 นอกจากนี้ค่าอื่นๆ จะต้องตามหลังหน่วย ระวังอย่าเพิ่มช่องว่างระหว่างค่ากับหน่วย
3. คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
เมื่อใช้ CSS ใน XHTML ชื่อองค์ประกอบที่กำหนดใน CSS จะคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ เพื่อหลีกเลี่ยงข้อผิดพลาดนี้ ฉันขอแนะนำให้ใช้ตัวพิมพ์เล็กสำหรับชื่อคำจำกัดความทั้งหมด
ค่าของคลาสและรหัสยังคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ใน HTML และ XHTML หากคุณต้องเขียนตัวพิมพ์ผสม โปรดตรวจสอบอย่างรอบคอบว่าคำจำกัดความของคุณใน CSS สอดคล้องกับแท็กใน XHTML
4. ยกเลิกข้อจำกัดองค์ประกอบก่อนคลาสและรหัส
เมื่อคุณเขียนเพื่อกำหนดคลาสหรือรหัสสำหรับองค์ประกอบ คุณสามารถละเว้นคุณสมบัติองค์ประกอบก่อนหน้านี้ได้ เนื่องจาก ID นั้นไม่ซ้ำกันในเพจและสามารถใช้ได้หลายครั้งในเพจ มันไม่สมเหตุสมผลเลยที่คุณจะมีคุณสมบัติเป็นองค์ประกอบ ตัวอย่างเช่น:
div#เนื้อหา { }
fieldset.รายละเอียด { }
สามารถเขียนเป็น
#เนื้อหา { }
.รายละเอียด { }
สิ่งนี้จะบันทึกบางไบต์
5.ค่าเริ่มต้น
โดยปกติค่าเริ่มต้นของช่องว่างภายในคือ 0 และค่าเริ่มต้นของสีพื้นหลังจะโปร่งใส แต่ค่าเริ่มต้นอาจแตกต่างกันในเบราว์เซอร์ที่แตกต่างกัน หากคุณกลัวข้อขัดแย้ง คุณสามารถกำหนดค่าระยะขอบและช่องว่างภายในขององค์ประกอบทั้งหมดให้เป็น 0 ได้ที่จุดเริ่มต้นของสไตล์ชีต เช่นนี้
-
ระยะขอบ:0;
ช่องว่างภายใน:0;
-
6. ไม่จำเป็นต้องกำหนดค่าที่สืบทอดซ้ำๆ
ใน CSS องค์ประกอบลูกจะสืบทอดค่าแอตทริบิวต์ขององค์ประกอบหลักโดยอัตโนมัติ เช่น สี แบบอักษร ฯลฯ ที่กำหนดไว้ในองค์ประกอบหลัก สามารถสืบทอดได้โดยตรงในองค์ประกอบลูกโดยไม่มีคำจำกัดความซ้ำ แต่โปรดทราบว่าเบราว์เซอร์อาจแทนที่คำจำกัดความของคุณด้วยค่าเริ่มต้นบางอย่าง
7.หลักการแรกล่าสุด
หากมีคำจำกัดความหลายคำขององค์ประกอบเดียวกัน คำจำกัดความที่ใกล้เคียงที่สุด (ระดับต่ำสุด) จะได้รับการจัดลำดับความสำคัญ ตัวอย่างเช่น มีโค้ดชิ้นนี้
อัปเดต: ชุด Lorem ipsum dolor
ในไฟล์ CSS คุณได้กำหนดองค์ประกอบ p และการอัปเดตคลาส
พี {
ระยะขอบ:1em 0;
ขนาดตัวอักษร:1em;
สี:#333;
-
.อัปเดต {
แบบอักษรน้ำหนัก: ตัวหนา;
สี:#600;
-
จากคำจำกัดความทั้งสองนี้ class=update จะถูกใช้เนื่องจากคลาสอยู่ใกล้กว่า p คุณสามารถตรวจสอบ "การคำนวณความจำเพาะของตัวเลือก" ของ W3C เพื่อเรียนรู้เพิ่มเติม
8. คำจำกัดความหลายคลาส
แท็กสามารถกำหนดหลายคลาสพร้อมกันได้ ตัวอย่างเช่น: ขั้นแรกเรากำหนดสองสไตล์ สไตล์แรกมีพื้นหลัง #666 สไตล์ที่สองมีเส้นขอบ 10 px
.one{ความกว้าง:200px;พื้นหลัง:#666;}
.two{เส้นขอบ:10px ทึบ #F00;}
ในโค้ดเพจเราจะเรียกแบบนี้
เอฟเฟกต์การแสดงผลขั้นสุดท้ายคือ div นี้มีทั้งพื้นหลัง #666 และเส้นขอบ 10px ใช่ สามารถทำได้ คุณสามารถลองได้
9. ใช้ตัวเลือกสืบทอด
ผู้เริ่มต้น CSS ไม่รู้ว่าการใช้ตัวเลือกย่อยเป็นสาเหตุหนึ่งที่ส่งผลต่อประสิทธิภาพ ตัวเลือกย่อยสามารถช่วยให้คุณบันทึกคำจำกัดความของคลาสได้มากมาย ลองมาดูรหัสต่อไปนี้:
<div id=subnav>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>รายการที่ 1</a></li>>
<li class=subnavitemselected> <a href=# class=subnavitemselected> รายการ 1</a> </li>
<li class=subnavitem> <a href=# class=subnavitem> รายการ 1</a> </li>
</ul>
</div>
คำจำกัดความ CSS สำหรับโค้ดนี้คือ:
div#subnavul { }
div#subnavulli.subnavitem { }
div#subnavulli.subnavitem a.subnavitem { }
div#subnavulli.subnavitemselected { }
div#subnavulli.subnavitemselected a.subnavitemselected { }
คุณสามารถแทนที่โค้ดด้านบนด้วยวิธีต่อไปนี้
<ul id=subnav>
<li> <a href=#> รายการที่ 1</a> </li>
<li class=sel> <a href=#> รายการที่ 1</a> </li>
<li> <a href=#> รายการที่ 1</a> </li>
</ul>
คำจำกัดความของสไตล์คือ:
#นำทางย่อย { }
#ซับนาฟลี { }
#subnav และ { }
#subnav .sel { }
#subnav .sel { }
ใช้ตัวเลือกย่อยเพื่อทำให้โค้ดและ CSS กระชับและอ่านง่ายขึ้น
10. ไม่จำเป็นต้องเพิ่มเครื่องหมายคำพูดในเส้นทางภาพพื้นหลัง
หากต้องการบันทึกไบต์ ฉันไม่แนะนำให้อ้างอิงเส้นทางรูปภาพพื้นหลัง เนื่องจากไม่จำเป็นต้องใช้เครื่องหมายคำพูด ตัวอย่างเช่น:
พื้นหลัง:url(images
ระยะขอบ:0 อัตโนมัติ;
-
แต่ IE5/Win ไม่สามารถแสดงคำจำกัดความนี้ได้อย่างถูกต้อง เราใช้เคล็ดลับที่มีประโยชน์มากในการแก้ปัญหา: ใช้แอตทริบิวต์ text-align แบบนี้:
ร่างกาย {
การจัดตำแหน่งข้อความ: กึ่งกลาง;
-
#ห่อ {
ความกว้าง:760px;
ระยะขอบ:0 อัตโนมัติ;
การจัดแนวข้อความ: ซ้าย;
-
กฎ text-align:center; ของเนื้อหาแรกกำหนดว่าองค์ประกอบทั้งหมดของเนื้อหาใน IE5/Win จะอยู่ตรงกลาง (เบราว์เซอร์อื่น ๆ จะอยู่ตรงกลางข้อความ) และ text-align:left ที่สองคือการจัดกึ่งกลางข้อความใน #warp ด้านซ้าย
15. นำเข้าและซ่อน CSS
เนื่องจากเบราว์เซอร์รุ่นเก่าไม่รองรับ CSS วิธีการทั่วไปคือการใช้เทคนิค @import เพื่อซ่อน CSS ตัวอย่างเช่น:
@นำเข้า URL (main.css);
อย่างไรก็ตาม วิธีการนี้ใช้ไม่ได้กับ IE4 ซึ่งทำให้ฉันปวดหัวอยู่พักหนึ่ง ต่อมาฉันเขียนแบบนี้:
@นำเข้า main.css;
ด้วยวิธีนี้ CSS จึงสามารถซ่อนอยู่ใน IE4 ได้ ฮ่าฮ่า จะช่วยประหยัดได้ 5 ไบต์ด้วย หากคุณต้องการทราบคำอธิบายโดยละเอียดของไวยากรณ์ @import คุณสามารถดูได้ที่นี่ "แผนภูมิตัวกรอง css ของ centricle"
16. การเพิ่มประสิทธิภาพสำหรับ IE
บางครั้งคุณต้องกำหนดกฎพิเศษสำหรับข้อบกพร่องของเบราว์เซอร์ IE ที่นี่ฉันใช้วิธีแฮ็ก CSS มากเกินไปเพียงสองข้อเท่านั้น ไม่ว่า Microsoft จะดีกว่าในเวอร์ชันเบต้าของ IE7 หรือไม่ก็ตาม ปลอดภัยที่สุด
1. วิธีการใส่คำอธิบายประกอบ
(a) หากต้องการซ่อนคำจำกัดความ CSS ใน IE คุณสามารถใช้ตัวเลือกลูกได้:
html>เนื้อหา p {
-
(b) วิธีการเขียนต่อไปนี้สามารถเข้าใจได้โดยเบราว์เซอร์ IE เท่านั้น (ซ่อนจากเบราว์เซอร์อื่น)
* html พี {
-
(c) บางครั้งคุณต้องการให้ IE/Win ทำงานแต่ซ่อน IE/Mac คุณสามารถใช้แบ็กสแลชได้:
* html พี {
ประกาศ
-
2. วิธีการแสดงความคิดเห็นแบบมีเงื่อนไข
อีกวิธีหนึ่งซึ่งฉันคิดว่าผ่านการทดสอบตามเวลามากกว่า CSS Hacks คือการใช้ความคิดเห็นแบบมีเงื่อนไขแอตทริบิวต์ส่วนตัวของ Microsoft (ความคิดเห็นแบบมีเงื่อนไข) การใช้วิธีนี้ทำให้คุณสามารถกำหนดสไตล์บางอย่างสำหรับ IE แยกต่างหากได้ โดยไม่กระทบต่อคำจำกัดความของสไตล์ชีตหลัก
17. เคล็ดลับการแก้ไขข้อบกพร่อง: เลเยอร์มีขนาดใหญ่แค่ไหน?
เมื่อแก้ไขข้อผิดพลาด CSS คุณจะต้องเป็นเหมือนเครื่องพิมพ์ดีดและวิเคราะห์โค้ด CSS ทีละบรรทัด ฉันมักจะกำหนดสีพื้นหลังบนเลเยอร์ที่ต้องการ ดังนั้นจึงชัดเจนว่าเลเยอร์นั้นใช้พื้นที่เท่าใด บางคนแนะนำให้ใช้ border ซึ่งโดยทั่วไปเป็นไปได้ แต่ปัญหาคือบางครั้ง border จะเพิ่มขนาดขององค์ประกอบ และ border-top และ boeder-bottom จะทำลายค่าระยะขอบแนวตั้ง ดังนั้นจึงปลอดภัยกว่าที่จะใช้พื้นหลัง
คุณสมบัติอีกประการหนึ่งที่มักก่อให้เกิดปัญหาคือโครงร่าง โครงร่างดูเหมือน boeder แต่ไม่ส่งผลต่อขนาดหรือตำแหน่งขององค์ประกอบ มีเบราว์เซอร์เพียงไม่กี่ตัวเท่านั้นที่รองรับแอตทริบิวต์โครงร่าง เบราว์เซอร์เดียวที่ฉันรู้จักคือ Safari, OmniWeb และ Opera
18. สไตล์การเขียนโค้ด CSS
เมื่อเขียนโค้ด CSS ทุกคนมีนิสัยการเขียนเกี่ยวกับการเยื้อง การขึ้นบรรทัดใหม่ และการเว้นวรรคเป็นของตัวเอง หลังจากฝึกฝนอย่างต่อเนื่อง ฉันจึงตัดสินใจใช้รูปแบบการเขียนต่อไปนี้:
ตัวเลือก 1,
ตัวเลือก2 {
คุณสมบัติ:มูลค่า;
-
เมื่อใช้คำจำกัดความของสหภาพ ฉันมักจะเขียนตัวเลือกแต่ละตัวในบรรทัดของตัวเอง เพื่อให้ค้นหาได้ง่ายขึ้นในไฟล์ CSS เพิ่มช่องว่างระหว่างตัวเลือกสุดท้ายและเครื่องหมายปีกกา { และควรเขียนแต่ละคำจำกัดความในบรรทัดของตัวเองด้วย
ฉันคุ้นเคยกับการเพิ่มเครื่องหมายอัฒภาคหลังแต่ละค่าแอตทริบิวต์ แม้ว่ากฎจะอนุญาตให้ไม่จำเป็นต้องเขียนเครื่องหมายอัฒภาคหลังค่าแอตทริบิวต์สุดท้าย แต่หากคุณต้องการเพิ่มสไตล์ใหม่ ก็เป็นเรื่องง่ายที่จะลืมเพิ่มเครื่องหมายอัฒภาคและ ทำให้เกิดข้อผิดพลาดดังนั้นคุณยังเพิ่มมันให้ดีขึ้น
สุดท้าย เครื่องหมายปีกกาปิด } จะถูกเขียนบนบรรทัดด้วยตัวมันเอง
การเว้นวรรคและการแบ่งบรรทัดช่วยในการอ่าน
