ขั้นสูง

CSS · ชำนาญ - แพตเทิร์นขั้นสูงและประสิทธิภาพ

• ตัวแปร CSS และฟังก์ชัน calc/clampเชี่ยวชาญ custom properties วิธีที่มันถูกแปลงค่าตอนรันไทม์ภายใน cascade และฟังก์ชัน calc() กับ clamp() สำหรับส่วนต่อประสานแบบลื่นไหล
• Transitions และ animations: @keyframes, transform, จังหวะเวลาทำ animation บน compositor ด้วย transform และ opacity จัดโครงสร้าง @keyframes ของคุณ และเคารพความชอบด้านการเคลื่อนไหวของผู้ใช้
• Selector สมัยใหม่: :has, :is, :where, :nth-child ขั้นสูงใช้ประโยชน์จาก functional pseudo-class ที่เพิ่งเกิดขึ้นเพื่อเลือกตามเนื้อหา จัดกลุ่ม selector โดยไม่ทำให้ specificity พองขึ้น และเจาะรูปแบบที่ซับซ้อน
• สถาปัตยกรรม CSS: BEM, utility-first, การจัดระเบียบไฟล์เปรียบเทียบ BEM กับแนวทาง utility-first ข้อดีข้อเสียที่แท้จริงในทีม และจัดโครงสร้างไฟล์ของคุณด้วย cascade layers
• Container queries และ CSS nestingทำให้ component ของคุณตอบสนองต่อ container ของมันแทนที่จะเป็น viewport และจัดโครงสร้างสไตล์ชีตด้วย nesting แบบเนทีฟ