Quy tắc CSS @import - nhập stylesheet khác

Quy tắc @import trong CSS

Quy tắc @import cho phép **nhập (import) một stylesheet khác** vào stylesheet hiện tại. Giúp tổ chức code CSS theo module, dễ bảo trì.

Cú pháp

/* Cú pháp 1: URL trong ngoặc */
@import url("mystyle.css");

/* Cú pháp 2: Chuỗi trực tiếp (ít dùng) */
@import "mystyle.css";

/* Import với media query */
@import url("print.css") print;
@import url("mobile.css") screen and (max-width: 768px);

Quy tắc quan trọng

• Phải đặt ở đầu file CSS - trước mọi quy tắc khác (trừ @charset)
• Không được đặt bên trong block khác (như @media, @keyframes)
• Có thể import nhiều file bằng nhiều @import

Ví dụ tổ chức CSS module

/* main.css */
@charset "UTF-8";

/* 1. Reset & Normalize */
@import url("normalize.css");

/* 2. Variables & Tokens */
@import url("variables.css");

/* 3. Base styles */
@import url("base.css");

/* 4. Components */
@import url("buttons.css");
@import url("cards.css");
@import url("forms.css");

/* 5. Layout */
@import url("grid.css");
@import url("header.css");
@import url("footer.css");

/* 6. Utilities */
@import url("utilities.css");

/* 7. Page-specific (optional) */
@import url("home.css") screen;
@import url("print.css") print;

Hiệu năng & Best Practice

Khuyến nghị production

• Development: Dùng @import cho module hóa, dễ debug
• Production: Dùng build tool (Vite, Webpack, PostCSS, Sass) để **bundle thành 1 file CSS** - loại bỏ @import, gzip, minify
• HTTP/2: Giảm nhẹ vấn đề multiple requests, nhưng bundle vẫn tốt hơn

@import vs <link>

<!-- HTML link - TỐT: song song tải, không chặn render -->
<link rel="stylesheet" href="styles.css">

<!-- CSS @import - KÉM: tuần tự, chặn render -->
@import url("styles.css");

Khuyến nghị: Dùng <link> trong HTML cho production. Dùng @import trong CSS chỉ khi build tool xử lý hoặc dev environment.