1.รีเซ็ต
ก่อนอื่น ฉันขอบอกคุณอย่างจริงจังว่าคุณต้องรีเซ็ตหมวดหมู่บางหมวดหมู่อยู่เสมอ ไม่ว่าคุณจะใช้ Eric Meyer Reset, YUI Reset หรือเขียนรหัสรีเซ็ตของคุณเอง เพียงแค่ใช้มัน
สามารถลบช่องว่างภายในและระยะขอบออกจากองค์ประกอบทั้งหมดได้อย่างง่ายดาย:
| html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { ระยะขอบ: 0; ช่องว่างภายใน: 0; } |
Eric Meyer Reset และ YUI Reset ต่างก็มีประสิทธิภาพมาก แต่สำหรับฉัน มันไกลเกินไป ฉันคิดว่าในที่สุดคุณจะต้องรีเซ็ตทุกอย่างแล้วกำหนดคุณสมบัติขององค์ประกอบทั้งหมดใหม่ นั่นเป็นเหตุผลที่ Eric Meyer แนะนำให้ใช้อย่างมีประสิทธิภาพมากขึ้น (รีเซ็ตสไตล์ชีต) และคุณไม่เพียงแค่ใช้สไตล์ชีตรีเซ็ตของเขาเท่านั้น แต่ยังลากและวางลงในโปรเจ็กต์ของคุณ ปรับมัน (สไตล์ชีตรีเซ็ต) และสร้างสไตล์ชีตรีเซ็ตของคุณเอง
โอ้ โปรดหยุดใช้:
| * { ระยะขอบ: 0; การขยาย: 0; |
ใช้เวลาแก้ไขให้มากขึ้น และคุณคิดว่าจะเกิดอะไรขึ้นกับปุ่มตัวเลือกเมื่อคุณถอดช่องว่างภายในออก องค์ประกอบของฟอร์มบางครั้งอาจทำสิ่งแปลกๆ ได้ ดังนั้นวิธีที่มีประสิทธิภาพมากที่สุดคือการทำให้ฟอร์มเป็นอิสระ
2. เรียงลำดับ
การทดสอบเล็กๆ น้อยๆ
ตัวอย่างนี้จะทำให้คุณคิดว่าจะหาแอตทริบิวต์มาร์จิ้นที่ถูกต้องได้เร็วขึ้นได้อย่างไร
ตัวอย่าง#1
| div#ส่วนหัว h1 { ดัชนี z: 101; สี: #000; ตำแหน่ง: ญาติ; ความสูงของบรรทัด: 24px; ขอบขวา: 48px; ขอบล่าง: 1px solid #dedede; ขนาดตัวอักษร: 18px; - |
ตัวอย่าง#2
| div#ส่วนหัว h1 { ขอบล่าง: 1px solid #dedede; สี: #000; ขนาดตัวอักษร: 18px; ความสูงของบรรทัด: 24px; ขอบขวา: 48px; ตำแหน่ง: ญาติ; ดัชนี z: 101; - |
คุณไม่สามารถบอกฉันได้ว่าตัวอย่างที่ 2 ไม่สามารถค้นหาคุณสมบัติมาร์จิ้นที่ถูกต้องได้เร็วกว่านี้ จัดเรียงคุณสมบัติองค์ประกอบของคุณตามตัวอักษร การสร้าง CSS อย่างสม่ำเสมอจะช่วยให้คุณประหยัดเวลาในการค้นหาพร็อพเพอร์ตี้ที่เฉพาะเจาะจง
ฉันรู้ว่าบางคนจัดระเบียบโค้ดของตนด้วยวิธีใดวิธีหนึ่งและอีกวิธีหนึ่ง แต่ที่บริษัทของฉัน เราได้ลงมติเป็นเอกฉันท์ว่าโค้ดทั้งหมดจะถูกจัดเรียงตามตัวอักษร การทำงานร่วมกับผู้อื่นจะช่วยได้อย่างแน่นอนด้วยการจัดระเบียบโค้ดของคุณด้วยวิธีนี้ ฉันประจบประแจงทุกครั้งที่เจอสไตล์ชีตแบบเรียงซ้อนซึ่งมีคุณสมบัติไม่เรียงลำดับตามตัวอักษร
3.องค์กร
คุณควรจัดระเบียบสไตล์ชีทของคุณเพื่อให้เนื้อหาที่เกี่ยวข้องอยู่ใกล้กัน ทำให้ง่ายต่อการค้นหาสิ่งที่คุณกำลังมองหา ใช้คำอธิบายประกอบที่มีประสิทธิภาพมากขึ้น ตามตัวอย่าง นี่คือวิธีที่ฉันจัดโครงสร้างสไตล์ชีตแบบเรียงซ้อน:
| /******รีเซ็ต*****/ ลบช่องว่างภายในและระยะขอบออกจากองค์ประกอบ /*****องค์ประกอบพื้นฐาน*****/ กำหนดสไตล์สำหรับองค์ประกอบพื้นฐาน: body, h1-h6, ul, ol, a, p ฯลฯ /*****ชั้นเรียนทั่วไป*****/ การกำหนดสไตล์ที่เรียบง่าย เช่น การลอยไปด้านใดด้านหนึ่ง การลบระยะขอบด้านล่างขององค์ประกอบออก เป็นต้น แน่นอนว่าสไตล์เหล่านี้ส่วนใหญ่ไม่เกี่ยวข้องกับความหมายที่เราต้องการ แต่จำเป็นต่อการประมวลผลโค้ดอย่างมีประสิทธิภาพ /******เค้าโครงพื้นฐาน*****/ กำหนดเทมเพลตพื้นฐาน: ส่วนหัว ส่วนท้าย ฯลฯ ช่วยกำหนดองค์ประกอบพื้นฐานของเค้าโครงหน้าเว็บ /******ส่วนหัว*****/ กำหนดองค์ประกอบ Hearder ทั้งหมด /*****เนื้อหา*****/ กำหนดองค์ประกอบทั้งหมดภายในกล่องเนื้อหา /******ส่วนท้าย*****/ กำหนดองค์ประกอบส่วนท้ายทั้งหมด /******ฯลฯ*****/ กำหนดตัวเลือกอื่นๆ การใส่คำอธิบายประกอบและจัดหมวดหมู่องค์ประกอบที่คล้ายกันออกเป็นกลุ่ม คุณจะพบสิ่งที่คุณต้องการได้เร็วขึ้น |
4. ความสม่ำเสมอ
ไม่ว่าคุณจะตัดสินใจเขียนโค้ดอย่างไร จงมีความสม่ำเสมอ ฉันเบื่อกับการอภิปราย CSS แบบ 1 บรรทัดและหลายบรรทัดแล้ว ไม่จำเป็นต้องโต้แย้ง ทุกคนมีความคิดเห็น ดังนั้นเลือกวิธีการทำงานที่คุณชอบและสอดคล้องกับสไตล์ชีตทั้งหมดของคุณ
โดยส่วนตัวแล้วฉันจะใช้ทั้งสองอย่างรวมกัน หากตัวเลือกมีแอตทริบิวต์มากกว่า 3 รายการ ฉันจะตัดทอนและเขียนเป็นหลายบรรทัด
| div#header { ลอย: ซ้าย; ความกว้าง: 100%; div#ส่วนหัว div.column { เส้นขอบขวา: 1px ทึบ #ccc; ลอย: ขวา; ขอบขวา: 50px; ช่องว่างภายใน: 10px; ความกว้าง: 300px; - div#header h1 { ลอย: ซ้าย; ความกว้าง: 250px; |
ดังนั้นค้นหาวิธีที่คุณชอบทำงานและรักษาความสม่ำเสมอ
5. เริ่มต้นในตำแหน่งที่ถูกต้อง
อย่าพยายามเข้าใกล้สไตล์ชีตของคุณจนกว่าคุณจะใช้ภาษามาร์กอัปเสร็จ
เมื่อฉันเตรียมแยกหน้าเว็บ ก่อนที่จะสร้างไฟล์ CSS ฉันจะต้องดูตัวอย่างและทำเครื่องหมายเอกสารทั้งหมดระหว่างแท็กเปิดของเนื้อหาและแท็กปิดของเนื้อหา ฉันจะไม่เพิ่ม DIV, ID หรือตัวเลือกคลาสเพิ่มเติม ฉันจะเพิ่ม DIV ทั่วไปบางอย่าง เช่น ผู้ฟัง เนื้อหา ส่วนท้าย เพราะฉันรู้ว่าสิ่งเหล่านี้มีอยู่จริง
ด้วยการแท็กเอกสารก่อน คุณจะไม่ต้องพบกับปัญหาของดิวิชั่น 1 และคลาส 2 ที่ถึงวาระแล้ว!
/*คุณจะต้องเพิ่มเนื้อหานั้นเมื่อคุณเริ่มเขียน CSS และรู้ว่าคุณจะต้องมีตะขออีกอันเพื่อทำให้สิ่งที่คุณพยายามบรรลุผลสำเร็จ*/(ข้อความต้นฉบับไม่ได้แปล)
ใช้ตัวเลือกลูกของ CSS เพื่อระบุองค์ประกอบลูก ไม่ใช่แค่เพิ่มคลาสหรือตัวเลือก ID ให้กับองค์ประกอบโดยอัตโนมัติ ข้อควรจำ: CSS จะไม่มีค่าหากไม่มีเอกสารที่มีรูปแบบดี (หรือโครงสร้างมาร์กอัป)