การใช้งาน CSS @import rule: นำเข้าสไตล์ชีต

กฎ @import

กฎ @import ใช้สำหรับนำเข้า (import) ไฟล์สไตล์ชีตอื่นเข้าไปในสไตล์ชีตปัจจุบัน ต้องอยู่ บรรทัดแรกสุด ก่อนกฎอื่นๆ ทั้งหมด

รูปแบบการใช้งาน

<style>
  @import "mystyle.css";
  /* หรือ */
  @import url("mystyle.css");
  
  /* CSS rules อื่นๆ ตามมา */
  body { font-family: sans-serif; }
</style>

ข้อดีของ @import (Modular CSS)

• Modular approach: แยกสไตล์เป็นไฟล์ย่อยตามหน้าที่ (layout, typography, components, themes)
• Reusability: ใช้ไฟล์สไตล์ร่วมกันได้หลายหน้า/โปรเจกต์
• Maintainability: จัดการโค้ดง่ายขึ้น แยกความรับผิดชอบ
• Organization: โครงสร้างโฟลเดอร์ชัดเจน

โครงสร้างโฟลเดอร์ตัวอย่าง

css/
├── main.css          /* @import อื่นๆ ทั้งหมด */
├── reset.css         /* CSS Reset / Normalize */
├── variables.css     /* CSS Custom Properties */
├── typography.css    /* Fonts, headings, text */
├── layout.css        /* Grid, flexbox, containers */
├── components/
│   ├── buttons.css
│   ├── cards.css
│   ├── forms.css
│   └── modals.css
├── themes/
│   ├── light.css
│   └── dark.css
└── utilities.css     /* Helper classes */

main.css

@import "reset.css";
@import "variables.css";
@import "typography.css";
@import "layout.css";
@import "components/buttons.css";
@import "components/cards.css";
@import "components/forms.css";
@import "themes/light.css";
@import "utilities.css";

⚠️ ข้อควรระวัง (Performance)

• Sequential loading: @import โหลดแบบลำดับ (serial) บล็อกการโหลด CSS ถัดไป
• แนะนำ: ใช้ <link rel="stylesheet"> ใน HTML แทน สำหรับ production
• Build tools: ใช้ Vite, Webpack, PostCSS รวมไฟล์ในขั้นตอน build

Media Query กับ @import

@import "print.css" print;
@import "mobile.css" screen and (max-width: 768px);