จะกำหนด "วัตถุ" ใน OOCSS ได้อย่างไร
ออบเจ็กต์คล้ายกับคลาสใน JAVA และรักษาคุณสมบัติ OO
วัตถุ CSS ประกอบด้วย 4 ส่วน:
อาจเป็น HTML ของโหนด DOM หนึ่งโหนดขึ้นไป
การประกาศสไตล์ CSS เริ่มต้นจากชื่อคลาสของโหนด wrapper
คล้ายกับภาพพื้นหลังและส่วนประกอบสไปรท์สำหรับการแสดงผลและ
พฤติกรรม JavaScript, Listener หรือวิธีการที่เกี่ยวข้องกับอ็อบเจ็กต์
สิ่งนี้อาจทำให้เกิดความสับสนได้เนื่องจากคลาส CSS แต่ละคลาสไม่จำเป็นต้องมีออบเจ็กต์ของตัวเอง แต่สามารถเป็นส่วนประกอบของคลาส wrapper ได้ ตัวอย่างเช่น:
<div class="mod">
<ระดับ div="ภายใน">
<div class="hd">บล็อกเฮด</div>
<div class="bd">บล็อกเนื้อหา</div>
<div class="ft">บล็อกเท้า</div>
</div>
</div>
วัตถุเป็นโมดูลที่มีคลาส mod ประกอบด้วยโหนดส่วนประกอบ 4 ชิ้น (ไม่สามารถเป็นอิสระจากโมดูลได้ รวมถึง 2 บล็อกด้านในและลำตัว และอีก 2 บล็อกเสริม หัวและเท้า)
OOCSS ปรับปรุงประสิทธิภาพอย่างไร
OOCSS มีประโยชน์ด้านประสิทธิภาพเป็นสองเท่า:
โค้ด CSS ที่นำมาใช้ซ้ำได้สูง ต้องใช้โค้ด CSS น้อยมาก ซึ่งหมายความว่า:
ไฟล์มีขนาดเล็กลงส่งผลให้ถ่ายโอนข้อมูลได้เร็วขึ้น
เมื่อสัดส่วนของโค้ด CSS ที่ถูกเรียกในหน้าเว็บไซต์เพิ่มขึ้น เบราว์เซอร์จึงคาดว่าจะนำโค้ดนั้นไปใช้ซ้ำหรือแคชไว้
ลดการวาดใหม่และการคำนวณเลย์เอาต์ที่เกี่ยวข้องกับเบราว์เซอร์
ในหน้าเดียว ยิ่งมีการใช้กฎ CSS ซ้ำมากขึ้น เวลาในการคำนวณที่กลไกการแสดงผลใช้กับ "ค่าที่คำนวณ" ก็จะน้อยลง
คลาส "การขยาย" ที่เพิ่มด้วยตนเองจะแทนที่กฎน้อยลง ซึ่งหมายความว่ากลไกจะใช้กฎน้อยลงเช่นกัน
คุณต้องการใช้ ID เพื่อจัดรูปแบบเนื้อหาหรือไม่?
นี่คือประสิทธิภาพ "freebie" เมื่อคุณใช้ออบเจ็กต์ซ้ำในหน้าเดียวกัน (หรือบนไซต์เดียวกัน ทั้งสองแคชอย่างดี) การใช้ ID เพื่อเขียนสไตล์สามารถใช้ได้เพียงครั้งเดียวในหน้าเดียวกัน @cgriego (twitter) ฉันเปรียบเทียบกับซิงเกิลตันและฉันคิดว่ามันแม่นยำมาก อาจมีสถานการณ์ที่คุณต้องการใช้ ID เพื่อกำหนดสไตล์ เช่น เมนูส่วนหัวที่เฉพาะเจาะจง ในกรณีนี้ คุณสามารถใช้ ID เพื่อแซนด์บ็อกซ์องค์ประกอบพิเศษ และตรวจสอบให้แน่ใจว่าโค้ดที่นี่ไม่ส่งผลกระทบต่อส่วนอื่นๆ ของไซต์ คิดให้รอบคอบก่อนที่จะเลือก ID มากกว่าชั้นเรียน เมื่อไซต์ของคุณเติบโตขึ้น เป็นเรื่องยากมากที่จะคาดเดาว่าผู้อื่นจะทำอะไรกับ HTML ที่สร้างจาก CSS ของคุณ หากคุณมีทางเลือก ให้พิจารณาความสามารถในการขยายขนาดให้มากที่สุด
ฉันกำลังคิดที่จะลบ ID ออกจากส่วนหัว ลำตัว และเท้าของเทมเพลต บางคนอาจมีบ้านหลายพื้นที่ ส่วนหัวและส่วนท้ายหลายรายการสำหรับไซต์นั้นยากที่จะคาดเดา แต่ฉันพนันได้เลยว่ายังมีนักออกแบบที่คิดเช่นนั้น ดังนั้น ID จึงมีแนวโน้มที่จะหายไป (ไม่ราบรื่นนัก อ่านบทความต้นฉบับ: บางคนอาจมีพื้นที่เนื้อหาหลักหลายส่วน หลากหลาย ส่วนหัวและส่วนท้ายของไซต์ยากที่จะจินตนาการได้ แต่ฉันพนันได้เลยว่ามีนักออกแบบที่สามารถฝันถึงอะไรแบบนั้นได้ ดังนั้น ID จึงมีแนวโน้มที่จะหายไปมาก)
ในทางกลับกัน ID hooks นั้นยอดเยี่ยมสำหรับการเชื่อมโยง ใส่ไว้ใน HTML แต่อย่าใช้เพื่อเขียนสไตล์
ที่มา: 99css