1.รีเซ็ต
จริงๆ แล้ว ให้ใช้การรีเซ็ตเสมอ ไม่ว่าจะเป็นการรีเซ็ต Eric Meyer การรีเซ็ต YUI หรือการรีเซ็ตที่คุณกำหนดเอง อย่าลืมนำไปใช้
ซึ่งทำได้ง่ายเพียงแค่ลบแอตทริบิวต์ระยะขอบและช่องว่างภายในออกจากองค์ประกอบทั้งหมด:
html, เนื้อความ, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
ก่อน, แบบฟอร์ม, ชุดสนาม, ตาราง, th, td { ระยะขอบ: 0;
สไตล์การรีเซ็ตของ Eric Meyer และ YUI นั้นยอดเยี่ยมมาก แต่สำหรับฉัน มันไกลเกินไป ฉันต้องการให้คุณล้างทุกอย่างก่อนที่จะกำหนดคุณสมบัติหลายอย่างขององค์ประกอบใหม่ นี่คือสิ่งที่ Eric Meyer แนะนำ หากมีวิธีที่มีประสิทธิภาพมากกว่านี้ คุณไม่ควรเพียงแค่นำไฟล์สไตล์ของเขาไปวางลงในโปรเจ็กต์ของคุณเองโดยตรง - ปรับแต่ง สร้างใหม่ และทำให้เป็นของคุณเอง
โอ้ โปรดอย่าทำเช่นนี้อีก:
* { ระยะขอบ: 0;
มีการใช้งานในหลายที่มากเกินไป หากคุณถอดช่องว่างภายในของปุ่มตัวเลือกออก คุณคิดว่าจะเกิดอะไรขึ้น? องค์ประกอบของแบบฟอร์มบางครั้งอาจดูเก๋ไก๋ ดังนั้นจึงควรปล่อยไว้เหมือนเดิม
2. จัดเรียงตามตัวอักษร
ทดสอบเล็กน้อย
จากตัวอย่างทั้งสองด้านล่างนี้ คุณคิดว่าตัวอย่างใดสามารถค้นหาตำแหน่งของแอตทริบิวต์ Margin-right ได้เร็วกว่า
ตัวอย่างที่ 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 ไม่เร็วเท่าตัวอย่างที่ 1! การเชื่อมโยงกันที่คุณสร้างขึ้นจะช่วยลดเวลาที่คุณใช้ในการค้นหาคุณสมบัติเฉพาะด้วยการเรียงลำดับคุณสมบัติของสไตล์เหล่านี้ตามตัวอักษร
ฉันรู้ว่าบางคนจัดระเบียบด้วยวิธีนี้ และคนอื่นๆ ใช้วิธีอื่นในการจัดระเบียบลำดับสไตล์ แต่ที่บริษัทของฉัน เราตัดสินใจอย่างเป็นเอกฉันท์ว่าจะจัดเรียงสิ่งต่าง ๆ ตามตัวอักษร วิธีนี้จะใช้ได้ผลสำหรับคุณอย่างแน่นอนเมื่อคุณพัฒนาโค้ดร่วมกับผู้อื่น ฉันเกลียดทุกครั้งที่เห็นสไตล์ชีทที่ไม่เรียงลำดับตามตัวอักษร เพราะมันดูยุ่งเหยิงและไม่เป็นระเบียบ...