คำถามที่พบบ่อยเกี่ยวกับ CSS เชิงวัตถุ

ข้อความต้นฉบับ: http://wiki.github.com/stubbornella/oocss/faq (เวอร์ชัน 28 เมื่อแปลแล้ว)
การแปล: ytzong

จะกำหนด "วัตถุ" ใน OOCSS ได้อย่างไร

ออบเจ็กต์คล้ายกับคลาสใน JAVA และรักษาคุณสมบัติ OO

วัตถุ CSS ประกอบด้วย 4 ส่วน:

1. อาจเป็น HTML ของโหนด DOM หนึ่งโหนดขึ้นไป
2. การประกาศสไตล์ CSS เริ่มต้นจากชื่อคลาสของโหนด wrapper
3. คล้ายกับภาพพื้นหลังและส่วนประกอบสไปรท์สำหรับการแสดงผลและ
4. พฤติกรรม 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 มีประโยชน์ด้านประสิทธิภาพเป็นสองเท่า:

1. โค้ด CSS ที่นำมาใช้ซ้ำได้สูง ต้องใช้โค้ด CSS น้อยมาก ซึ่งหมายความว่า:
   • ไฟล์มีขนาดเล็กลงส่งผลให้ถ่ายโอนข้อมูลได้เร็วขึ้น
   • เมื่อสัดส่วนของโค้ด CSS ที่ถูกเรียกในหน้าเว็บไซต์เพิ่มขึ้น เบราว์เซอร์จึงคาดว่าจะนำโค้ดนั้นไปใช้ซ้ำหรือแคชไว้
2. ลดการวาดใหม่และการคำนวณเลย์เอาต์ที่เกี่ยวข้องกับเบราว์เซอร์
   • ในหน้าเดียว ยิ่งมีการใช้กฎ CSS ซ้ำมากขึ้น กลไกการเรนเดอร์จะใช้เวลากับ "ค่าที่คำนวณ" น้อยลงเท่านั้น
   • คลาส "การขยาย" ที่เพิ่มด้วยตนเองจะแทนที่กฎน้อยลง ซึ่งหมายความว่ากลไกจะใช้กฎน้อยลงเช่นกัน

คุณต้องการใช้ ID เพื่อจัดรูปแบบเนื้อหาหรือไม่?

นี่คือประสิทธิภาพ "freebie" เมื่อคุณใช้ออบเจ็กต์ซ้ำในหน้าเดียวกัน (หรือบนไซต์เดียวกันในเวลาเดียวกันกับที่แคชไว้อย่างดี) การใช้ ID เพื่อเขียนสไตล์สามารถใช้ได้เพียงครั้งเดียวในหน้าเดียวกัน @cgriego (twitter) เปรียบเทียบกับ singletons และฉันคิดว่ามันแม่นยำมาก อาจมีสถานการณ์ที่คุณต้องการใช้ ID เพื่อกำหนดสไตล์ เช่น เมนูส่วนหัวที่เฉพาะเจาะจง ในกรณีนี้ คุณสามารถใช้ ID เพื่อแซนด์บ็อกซ์องค์ประกอบพิเศษ และตรวจสอบให้แน่ใจว่าโค้ดที่นี่ไม่ส่งผลกระทบต่อส่วนอื่นๆ ของไซต์ คิดให้รอบคอบก่อนที่จะเลือก ID มากกว่าชั้นเรียน เมื่อไซต์ของคุณเติบโตขึ้น เป็นเรื่องยากมากที่จะคาดเดาว่าผู้อื่นจะทำอะไรกับ HTML ที่สร้างจาก CSS ของคุณ หากคุณมีทางเลือก ให้พิจารณาความสามารถในการขยายขนาดให้มากที่สุด

ฉันกำลังคิดที่จะลบ ID ออกจากส่วนหัว ลำตัว และเท้าของเทมเพลต บางคนอาจมีบ้านหลายพื้นที่ ส่วนหัวและส่วนท้ายหลายรายการสำหรับไซต์นั้นยากที่จะคาดเดา แต่ฉันพนันได้เลยว่ายังมีนักออกแบบที่คิดเช่นนั้น ดังนั้น ID จึงมีแนวโน้มที่จะหายไป (ไม่ราบรื่นนัก อ่านบทความต้นฉบับ: บางคนอาจมีพื้นที่เนื้อหาหลักหลายส่วน หลากหลาย ส่วนหัวและส่วนท้ายของไซต์ยากที่จะจินตนาการได้ แต่ฉันพนันได้เลยว่ามีนักออกแบบที่สามารถฝันถึงอะไรแบบนั้นได้ ดังนั้น ID จึงมีแนวโน้มที่จะหายไปมาก)

ในทางกลับกัน ID hooks นั้นยอดเยี่ยมสำหรับการเชื่อมโยง ใส่ไว้ใน HTML แต่อย่าใช้เพื่อเขียนสไตล์

ที่มา: 99css