CSS Academy · บทเรียน

การจัดระเบียบไฟล์: ITCSS และรูปแบบ 7-1

จัดโครงสร้างไฟล์ CSS ด้วยรูปแบบสามเหลี่ยมกลับหัวหรือรูปแบบ 7-1 สำหรับโครงการที่ขยายได้

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

ทำไมต้องจัดระเบียบไฟล์ CSS

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

ITCSS: CSS รูปสามเหลี่ยมกลับหัว

ITCSS จัดระเบียบ CSS เป็นชั้นที่เรียงตามความจำเพาะจากน้อยไปมาก เช่นเดียวกับสามเหลี่ยมกลับหัว กฎที่กว้างที่สุดและทั่วไปที่สุดอยู่ด้านบน ส่วนกฎที่เฉพาะเจาะจงที่สุดอยู่ด้านล่าง แนวทางนี้สอดคล้องกับแคสเคดตามธรรมชาติ

ชั้นของ ITCSS

ชั้นทั้ง 7 ของ ITCSS (จากทั่วไปที่สุดไปหาเฉพาะเจาะจงที่สุด):

การตั้งค่า — ตัวแปรและโทเค็นการออกแบบ
เครื่องมือ — มิกซินและฟังก์ชัน
ทั่วไป — รีเซ็ต/ทำให้เป็นมาตรฐาน
องค์ประกอบ — สไตล์พื้นฐานขององค์ประกอบ HTML
ออบเจ็กต์ — นามธรรมด้านการจัดวาง (ไม่มีการตกแต่ง)
คอมโพเนนต์ — คอมโพเนนต์ส่วนติดต่อผู้ใช้
ยูทิลิตี — การเขียนทับและตัวช่วย โดยอนุญาตให้ใช้ !important ในชั้นนี้

โครงสร้างไฟล์ ITCSS

โครงร่างไฟล์ ITCSS ทั่วไป:

  <pre class="file-tree">src/styles/
  01-settings/
    _colors.scss
    _typography.scss
    _spacing.scss
  02-tools/
    _mixins.scss
  03-generic/
    _reset.scss
  04-elements/
    _headings.scss
    _links.scss
  05-objects/
    _container.scss
    _media.scss
  06-components/
    _button.scss
    _card.scss
  07-utilities/
    _text-align.scss
    _display.scss</pre>

รูปแบบ 7-1

รูปแบบ 7-1 จัดระเบียบแซสเป็น 7 โฟลเดอร์และไฟล์หลัก 1 ไฟล์ที่นำเข้าทุกอย่าง:

abstracts/ — ตัวแปร ฟังก์ชัน และมิกซิน
base/ — รีเซ็ต รูปแบบตัวอักษร และองค์ประกอบพื้นฐาน
components/ — ปุ่ม การ์ด และหน้าต่างโมดัล
layout/ — ส่วนหัว ส่วนท้าย แถบด้านข้าง และกริด
pages/ — สไตล์เฉพาะหน้า
themes/ — ธีมหลายรูปแบบ
vendors/ — CSS จากบุคคลที่สาม

ไฟล์ทางเข้าหลัก

main.scss หลักจะนำเข้าไฟล์ย่อยทั้งหมดตามลำดับ:

  <pre class="file-tree">@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'base/reset';
@use 'base/typography';
@use 'components/button';
@use 'components/card';
@use 'layout/header';</pre>

ชั้น CSS (@layer) สำหรับการจัดระเบียบ

CSS สมัยใหม่มี @layer ซึ่งมอบประโยชน์ด้านการจัดลำดับแคสเคดเช่นเดียวกับ ITCSS โดยไม่ต้องใช้ตัวประมวลผลล่วงหน้า ประกาศชั้นเพียงครั้งเดียว และกำหนดลำดับความสำคัญไว้ตายตัวโดยไม่ขึ้นกับลำดับในแหล่งที่มา

  <div class="card text-primary">Layered card text</div>

การวางไฟล์ร่วมกันเทียบกับการรวมศูนย์

อีกทางเลือกหนึ่งนอกเหนือจากไฟล์สไตล์แบบรวมศูนย์คือ วาง CSS ของคอมโพเนนต์ไว้ร่วมกับไฟล์คอมโพเนนต์ มักใช้ในโครงการรีแอกต์/วูที่ใช้โมดูล CSS หรือ CSS ใน JS

การตั้งชื่อไฟล์ย่อยของแซส

ไฟล์ย่อยของแซสเริ่มต้นด้วยขีดล่าง (_button.scss) ขีดล่างนี้บ่งบอกแซสว่าไฟล์ดังกล่าวไม่ได้ถูกคอมไพล์แยกต่างหาก แต่ต้องนำเข้าไปยังไฟล์หลัก

PostCSS เป็นทางเลือก

หากคุณไม่ได้ใช้แซส PostCSS ร่วมกับปลั๊กอิน @import หรือใช้ CSS @import แบบเนทีฟร่วมกับ @layer ก็สามารถจัดระเบียบไฟล์ได้เช่นเดียวกันโดยไม่ต้องใช้ตัวประมวลผลล่วงหน้า

ไฟล์ CSS ของคอมโพเนนต์

ไม่ว่าจะใช้ ITCSS รูปแบบ 7-1 หรือไฟล์ที่วางไว้ร่วมกับคอมโพเนนต์ คอมโพเนนต์แต่ละรายการควรมีไฟล์ของตนเอง ตั้งชื่อไฟล์ตามคอมโพเนนต์ที่ไฟล์นั้นกำหนดสไตล์ให้ เช่น _card.scss, button.css, Nav.module.css

ตรวจสอบความเข้าใจ

ใน ITCSS ชั้นใดอยู่บนสุดของสามเหลี่ยมกลับหัว ซึ่งเป็นชั้นที่กว้างที่สุดและมีความจำเพาะต่ำที่สุด

สรุปทบทวน

ITCSS เรียงชั้น CSS จากทั่วไปไปหาเฉพาะเจาะจงตามแคสเคด รูปแบบ 7-1 จัดระเบียบแซสเป็น 7 โฟลเดอร์ที่นำเข้าผ่านไฟล์หลักเพียงไฟล์เดียว CSS สมัยใหม่มี @layer ซึ่งมอบการควบคุมแคสเคดแบบเนทีฟเช่นเดียวกัน ไม่ว่าจะรวมศูนย์หรือวางไฟล์ไว้ร่วมกับคอมโพเนนต์ หลักการสำคัญคือ คอมโพเนนต์หนึ่งรายการต่อหนึ่งไฟล์ และนำเข้าไฟล์ตามลำดับอย่างสอดคล้องกัน

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

บทเรียน “การจัดระเบียบไฟล์: ITCSS และรูปแบบ 7-1” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การจัดระเบียบไฟล์: ITCSS และรูปแบบ 7-1”

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

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

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

บทเรียน “การจัดระเบียบไฟล์: ITCSS และรูปแบบ 7-1” ใช้เวลานานแค่ไหน

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

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

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

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

เหตุใดสถาปัตยกรรม CSS จึงสำคัญ
BEM: การตั้งชื่อบล็อก องค์ประกอบ และตัวปรับแต่ง
การจัดระเบียบไฟล์: ITCSS และรูปแบบ 7-1
การหลีกเลี่ยงสงครามความจำเพาะ

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