CSS Academy · บทเรียน

การซ้อน CSS แบบเนทีฟ

เขียนกฎ CSS แบบซ้อนโดยไม่ใช้ตัวประมวลผลล่วงหน้า ตามข้อกำหนดการซ้อน CSS แบบเนทีฟ

การซ้อน CSS แบบเนทีฟ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

การซ้อนกฎ CSS คืออะไร

การซ้อนกฎ CSS ในตัว (เป็นมาตรฐานพื้นฐานตั้งแต่ปี 2024 และรองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด) ช่วยให้เขียนกฎ CSS ไว้ภายในกฎอื่นได้ โดยมีไวยากรณ์การซ้อนแบบเดียวกับที่ก่อนหน้านี้มีเฉพาะในตัวประมวลผลล่วงหน้า Sass/Less กฎที่ซ้อนกันจะสืบทอดบริบทของตัวเลือกแม่โดยอัตโนมัติ

ไวยากรณ์การซ้อนพื้นฐาน

เขียนตัวเลือกลูกไว้ภายในบล็อกกฎแม่ เบราว์เซอร์จะรวมตัวเลือกแม่และตัวเลือกลูกเข้าด้วยกันโดยอัตโนมัติ เครื่องหมาย & (ตัวเลือกสำหรับการซ้อน) ใช้อ้างอิงตัวเลือกแม่โดยตรงสำหรับตัวปรับแต่งและคลาสเทียม

<div class="card is-active">
  <div class="title">Nested Card Title</div>
  <p>Card body text.</p>
</div>

ตัวเลือกการซ้อน &

& ใช้แทนตัวเลือกแม่โดยตรงในกฎที่ซ้อนกัน ใช้กับคลาสเทียม (&:hover) องค์ประกอบเทียม (&::before) คลาสตัวปรับแต่ง (&.active) และตัวเลือกแอตทริบิวต์ (&[disabled]) หากไม่มี & กฎที่ซ้อนกันจะสร้างตัวเลือกองค์ประกอบสืบทอด

การซ้อนองค์ประกอบเทียม

ซ้อนกฎขององค์ประกอบเทียมไว้ภายในแม่ตามธรรมชาติ: .button { &::before { content: ""; } &::after { content: ""; } } วิธีนี้จัดวางสไตล์ของปุ่มทั้งหมดไว้ด้วยกัน และหลีกเลี่ยงการเขียนตัวเลือกซ้ำแบบที่ต้องทำใน CSS แบบแบน

การซ้อนกฎแบบ at-rule

คิวรีสื่อและกฎแบบ at-rule อื่น ๆ สามารถซ้อนอยู่ภายในกฎได้ (Chrome 112+, Firefox 117+): .card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } } สไตล์ที่ปรับตามขนาดหน้าจอจะอยู่ร่วมกับองค์ประกอบที่ได้รับผล แทนที่จะอยู่ในบล็อกคิวรีสื่อแยกต่างหากที่ท้ายไฟล์

ความจำเพาะของตัวเลือก

การซ้อนไม่ได้เปลี่ยนกฎความจำเพาะ ตัวเลือกที่รวมกันจะมีความจำเพาะเท่ากับเมื่อเขียนแบบแบน .card .title ที่เขียนแบบซ้อนหรือแบบแบนมีความจำเพาะเท่ากัน (0,2,0) การซ้อนเป็นเพียงความสะดวกด้านไวยากรณ์ ไม่ใช่การเปลี่ยนแปลงความจำเพาะ

องค์ประกอบสืบทอดโดยนัยกับ & แบบชัดเจน

ตัวเลือกที่ซ้อนโดยไม่มี & จะสร้างตัวเลือกองค์ประกอบสืบทอด: .card { .title {} } จะถูกแปลงเป็น .card .title เมื่อมี &: .card { &.active {} } จะถูกแปลงเป็น .card.active (ไม่มีช่องว่าง เป็นคลาสตัวปรับแต่ง ไม่ใช่องค์ประกอบสืบทอด)

BEM กับการซ้อนแบบเนทีฟ

การซ้อนแบบเนทีฟไม่เหมาะกับ BEM มากนัก เนื่องจากตัวเลือก .block__element และ .block--modifier เป็นสตริง และการซ้อนไม่สามารถสร้างตัวเลือกเหล่านี้ด้วย & เพียงอย่างเดียวได้ ใช้การซ้อนกับคลาสเทียม องค์ประกอบเทียม และโครงสร้างคอมโพเนนต์ที่ซ้อนกัน แทนการต่อสตริงของ BEM (ซึ่งยังต้องใช้ตัวประมวลผลล่วงหน้า)

การย้ายจาก Sass

ไวยากรณ์การซ้อนของ Sass ส่วนใหญ่เหมือนกับการซ้อนแบบเนทีฟของ CSS ข้อยกเว้นคือ Sass รองรับการต่อสตริงด้วย &-modifier (แต่ CSS ในตัวไม่รองรับ) ให้ย้ายระบบโดยตรวจสอบรูปแบบ &- หรือ &__ แล้วทำให้กฎเฉพาะเหล่านั้นเป็นแบบแบน โดยคงการซ้อนส่วนอื่นไว้

การรองรับของเบราว์เซอร์

การซ้อน CSS ในตัวรองรับใน Chrome 112+, Firefox 117+ และ Safari 16.5+ หากต้องรองรับเบราว์เซอร์รุ่นเก่า ให้ใช้ PostCSS ร่วมกับ postcss-nesting เพื่อแปลงไวยากรณ์การซ้อนในตัวเป็น CSS แบบแบนระหว่างการสร้าง ทำให้สามารถเขียนโค้ดด้วยการซ้อนในตัวได้ตั้งแต่วันนี้

DevTools กับการซ้อน

Chrome DevTools แสดงกฎที่ซ้อนกันในแผงสไตล์ตามรูปแบบการซ้อน เมื่อคลิกกฎที่ซ้อนกัน ระบบจะไปยังตำแหน่งต้นฉบับที่ถูกต้องในแผงแหล่งที่มา การแก้ไขข้อผิดพลาดของ CSS ที่ซ้อนกันมีความชัดเจนพอ ๆ กับ CSS แบบแบนใน DevTools รุ่นใหม่

ตรวจสอบความรู้

การซ้อนที่มีและไม่มีตัวเลือก & แตกต่างกันอย่างไร

สรุป

การซ้อน CSS ในตัวช่วยให้ใช้ไวยากรณ์แบบซ้อนคล้าย Sass ใน CSS ปกติ ตัวเลือก & สร้างตัวเลือกแบบผสมสำหรับคลาสเทียม องค์ประกอบเทียม และตัวปรับแต่ง คิวรี @media ที่ซ้อนกันช่วยจัดวางสไตล์ที่ปรับตามขนาดหน้าจอไว้ร่วมกับองค์ประกอบของตนเอง PostCSS แปลงการซ้อนในตัวเพื่อรองรับเบราว์เซอร์รุ่นเก่า ทำให้สามารถทยอยนำมาใช้งานได้ตั้งแต่วันนี้

คำถามที่พบบ่อย

บทเรียน “การซ้อน CSS แบบเนทีฟ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การซ้อน CSS แบบเนทีฟ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การซ้อน CSS แบบเนทีฟ”

เขียนกฎ CSS แบบซ้อนโดยไม่ใช้ตัวประมวลผลล่วงหน้า ตามข้อกำหนดการซ้อน CSS แบบเนทีฟ คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การซ้อน CSS แบบเนทีฟ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ CSS Academy