บทนำ / พื้นหลัง: องค์ประกอบ CSS
สำหรับเว็บไซต์ที่มีขนาดค่อนข้างใหญ่เรากำลังทำงานกับ SASS และพยายามจัดการ CSS ในส่วนประกอบ แนวคิดพื้นฐานของส่วนประกอบคือส่วนประกอบควรมีลักษณะเหมือนกันทุกที่โดยไม่ขึ้นกับองค์ประกอบคอนเทนเนอร์ใน DOM
ดังนั้นเราต้องการหลีกเลี่ยงสิ่งเช่นนี้ (SASS):
// User picture component.
.user-picture {
img {..}
}
// Override user picture for the frontpage.
body.page-front .user-picture img {..}
แต่ถ้าเราต้องการให้ภาพผู้ใช้ดูแตกต่างจากหน้าแรกมันจะต้องเป็นองค์ประกอบที่แตกต่างกัน เช่นกับมรดก SASS หรือด้วย mixin:
// User picture component.
.user-picture {
img {..}
}
// User picture on frontpage.
.user-picture-front {
@extend .user-picture;
img {..}
}
จากนั้นเราจำเป็นต้องปรับ html บนหน้าแรกเพื่อที่จะใช้รูปภาพของผู้ใช้เวอร์ชันอื่น
จนถึงตอนนี้ดีมาก ฉันโพสต์ข้างต้นเป็นภาพประกอบของความเข้าใจปัจจุบันของฉันเกี่ยวกับองค์ประกอบของ CSS
คำถาม: คลาสตัวดัดแปลง - แนวปฏิบัติที่ดี?
ขณะนี้เรากำลังประสบปัญหา: บางหน้ามีพื้นหลังสีดำ (สีดำ) ดังนั้นข้อความขอบและสิ่งต่าง ๆ จะต้องเป็นสีขาว
สิ่งนี้มีมากกว่าส่วนประกอบ: ส่วนประกอบเดียวกันควรมีข้อความสีเข้มโดยค่าเริ่มต้น แต่ข้อความสีขาวหากอยู่ในคอนเทนเนอร์ที่มีพื้นหลังสีเข้ม
ดังนั้นเราจึงมีความคิดที่ยอดเยี่ยมนี้:
// Generic modifier class for all dark-background containers.
.white-on-black {
// Generic text color change.
color: white !important;
}
// Component.
.my-component {
border: 1px solid blue;
// Special for white-on-black.
.white-on-black & {
border-color: yellow;
}
}
ดังนั้นเราจึงมี "ตัวแก้ไข" หรือคลาส "บริบท" ภายนอกwhite-on-blackที่ปรับเปลี่ยนวิธีการแสดงองค์ประกอบภายใน
แรงจูงใจคือส่วนประกอบนั้นไม่รับผิดชอบพื้นหลังขององค์ประกอบคอนเทนเนอร์ที่เพิ่มขึ้นใน DOM
วิธีนี้ใช้ได้ผล ปัญหาคือถ้าเรามีคอนเทนเนอร์พื้นหลังสีขาวภายในคอนเทนเนอร์พื้นหลังสีเข้ม แต่นี่มันใช้ได้ดี
คำถามคือว่านี่เป็นวิธีปฏิบัติที่ดีในเชิงสถาปัตยกรรมหรือไม่โดยมีพื้นฐานของการพยายามทำให้ส่วนประกอบต่าง ๆ เป็นอิสระจากกัน
ทางเลือกก็คือจะต้องมีองค์ประกอบที่แตกต่างกันเช่นmy-component-on-dark-bgซึ่งสืบทอดมาจากmy-componentและมีสีที่แตกต่างกันสำหรับข้อความและเส้นขอบ แต่ที่นี่รหัส (เช่น PHP) ที่ผลิตส่วนประกอบ html จำเป็นต้องรู้เกี่ยวกับภายนอกนั่นคือไม่ว่าจะใช้ bg มืด สมมติว่ารหัส PHP ที่แสดงผลส่วนประกอบนั้นแยกจากรหัส PHP ที่แสดงผลคอนเทนเนอร์ ซึ่งยังคงสามารถจัดการได้ แต่อาจเป็นอาร์กิวเมนต์สำหรับรูปแบบที่มีคลาสตัวแก้ไขดังที่อธิบายไว้ข้างต้น
หมายเหตุ
เรากำลังนำหน้าคลาส CSS ของเราด้วยคำนำหน้าเฉพาะโครงการ ฉันเพิ่งออกจากที่นี่เพื่อความเรียบง่ายและเพราะมันเป็นเรื่องที่ไม่มีใครทำโครงการที่ฉันกำลังทำอยู่ :)