1. เกี่ยวกับความคิดเห็น
ความคิดเห็นใน CSS มีความสำคัญมากเมื่อสร้างเว็บไซต์ xhtml+CSS เมื่อสร้างสไตล์ CSS คุณควรรักษานิสัยชอบแสดงความคิดเห็นแบบไม่เป็นทางการ โดยทั่วไป ฉันคุ้นเคยกับการเขียนความคิดเห็นในรูปแบบ "/* เนื้อหาความคิดเห็น*/" เนื่องจากในตัวแก้ไขที่มีฟังก์ชันเน้นสี เช่น EditPlus จะใช้ "/*********" ในภาษา C ที่ใช้กันทั่วไป ความคิดเห็นเช่น *******/" นั้นไม่มีความหมาย และไม่จำเป็นต้องเติมเนื้อหาที่ไม่มีความหมายมากมายเพื่อแยก เอกสารที่มีความคิดเห็นทำหน้าที่เป็นเอกสาร CSS ดั้งเดิมของเว็บไซต์ เมื่อเผยแพร่เว็บไซต์ คุณสามารถใช้เครื่องมือบีบอัด CSS เพื่อบีบอัด CSS และลบความคิดเห็นออกจากเอาต์พุต CSS เพื่อปรับปรุงประสิทธิภาพการถ่ายโอนไฟล์
2. เกี่ยวกับการตั้งชื่อ
เมื่อตั้งชื่อไฟล์ CSS ฉันชอบใช้ชื่อหรือตัวย่อภาษาอังกฤษที่ถูกต้องตามความหมาย ฉันอาจใช้ชื่อพินอินบางส่วนสำหรับส่วนที่ผิดปกติ นอกจากนี้ ในบางคลาสที่ต้องพึ่งพา ฉันอาจใช้ชื่อที่คล้ายกับ "list_banner" นั่นคือชื่อองค์ประกอบหลักบวก "_" บวกกับชื่อองค์ประกอบ
เรื่องการตั้งชื่อสามารถต่อรองได้ตามนิสัยของทีมนักออกแบบ แต่ทางที่ดีควรเพิ่มความคิดเห็นไว้หลังชื่อเพื่อให้คุณสามารถสร้างเอกสารเพื่อใช้อ้างอิงในอนาคตได้
3. เกี่ยวกับมรดก
ใน CSS ใช้ประโยชน์จากการสืบทอดให้เกิดประโยชน์ ตัวอย่างเช่น ใน div ที่ซ้อนกันสองรายการ องค์ประกอบหลักจะกำหนดแอตทริบิวต์สีพื้นหลังเป็นสีดำ หากพื้นหลังขององค์ประกอบย่อยเป็นสีดำ ก็ไม่จำเป็นต้องกำหนดคำจำกัดความซ้ำ การใช้การสืบทอด CSS อย่างเหมาะสมจะทำให้โค้ดของคุณมีประสิทธิภาพและคล่องตัวยิ่งขึ้น
4. เกี่ยวกับระดับของคำจำกัดความ CSS
เมื่อกำหนดคลาสใน CSS ขอแนะนำให้ใช้วิธีอธิบายคำสั่งแบบลำดับชั้น
โครงสร้างตัวอย่าง:
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <div id="เมนู"> <div class="เมนูลิสต์"> <div class="selectit"></div> </div> </div> |
ตัวอย่าง CSS:
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: #เมนู { ... } #menu .menulist { ... } #menu .menulist .selectit { ... } |
ในตัวอย่างด้านบน จากเอฟเฟกต์สุดท้าย ไม่จำเป็นต้องให้ #menu ปรากฏซ้ำๆ แต่จริงๆ แล้ว หากสามารถเพิ่ม #menu ไว้ข้างหน้าได้ จะทำให้ลำดับชั้นของเอกสารชัดเจนและอ่านง่ายขึ้น
5. เกี่ยวกับการเรียงลำดับสไตล์
เมื่อออกแบบสไตล์ชีต CSS เราเขียนโค้ดด้วยมือเป็นส่วนใหญ่ ซึ่งอาจทำให้เกิดความสับสนในการเรียงลำดับสไตล์ในคลาสได้ง่าย ตัวอย่างเช่น หลายคลาสใช้ช่องว่างภายใน ระยะขอบ พื้นหลัง สี และสไตล์อื่นๆ อย่างไรก็ตาม เมื่อเรียงลำดับ บางคลาสจะมีพื้นหลังสูงกว่า และบางคลาสมีระยะขอบสูงกว่า สิ่งนี้ทำให้เกิดความสับสนและอาจทำให้ความคิดของคุณหงุดหงิดได้ง่าย ฉันขอแนะนำให้นักออกแบบรายบุคคลหรือทีมเห็นด้วยกับคำสั่งคร่าวๆ เพื่อให้แต่ละคนไม่มีความแตกต่างมากนัก แต่โดยรวมแล้วมันจะอ่านและจัดการได้ง่ายกว่า และประสิทธิภาพโดยรวมจะดีขึ้นมาก
ตัวอย่างเช่น ตามค่าเริ่มต้น ฉันใส่ความกว้าง ความสูง ช่องว่าง ขอบ ขอบ ฯลฯ ที่ด้านหน้า ตามด้วยพื้นหลัง จากนั้นใส่แบบอักษร สี การจัดแนวข้อความ ฯลฯ เพื่อควบคุมข้อความ จากนั้นจึงแท็กพิเศษบางแท็กที่สามารถทำได้ ใช้ได้เฉพาะองค์ประกอบ เช่น list-style ฯลฯ และสุดท้ายคือตัวกรอง CSS เมื่อเผชิญกับสถานการณ์พิเศษ (เช่น ลำดับความสำคัญของคุณสมบัติ CSS บางอย่างที่จำเป็นต้องกำหนด) ก็สามารถจัดการได้อย่างยืดหยุ่น