Box model và `box-sizing` khác nhau thế nào giữa content-box và border-box?
Box model gồm content, padding, border, margin. Với content-box (mặc định) width chỉ là phần content, padding và border cộng thêm vào. Với border-box, width đã bao gồm padding và border nên kích thước dễ dự đoán hơn.
Có những cách nào để căn giữa một phần tử theo cả hai chiều?
Cách gọn nhất là flex (justify-content và align-items: center) hoặc grid với place-items: center trên container. Với phần tử đặt tuyệt đối dùng inset: 0 kèm margin: auto hoặc top/left 50% kết hợp transform translate(-50%, -50%).
Khác nhau giữa `display: block`, `inline` và `inline-block`?
block chiếm nguyên dòng và nhận width/height/margin đầy đủ. inline nằm trong dòng chữ, bỏ qua width/height và margin dọc. inline-block nằm trong dòng như inline nhưng vẫn nhận width, height, margin và padding như block.
Pseudo-class và pseudo-element khác nhau thế nào?
Pseudo-class (một dấu hai chấm, như :hover, :focus, :nth-child) chọn phần tử đang ở một trạng thái hoặc vị trí. Pseudo-element (hai dấu hai chấm, như ::before, ::after, ::placeholder) tạo hoặc chọn một phần ảo của phần tử.
Semantic HTML là gì? Vì sao nên dùng thay cho `div` khắp nơi?
Semantic HTML dùng thẻ có ý nghĩa (header, nav, main, article, button...) thay vì div/span chung chung. Nhờ đó screen reader, trình duyệt và search engine hiểu cấu trúc trang, đồng thời có sẵn hành vi (focus, keyboard) mà không cần code thêm.
So sánh `px`, `em`, `rem`, `%`, `vh` và khi nào dùng từng loại?
px là đơn vị tuyệt đối. rem tương đối với font-size của html, em tương đối với font-size của chính phần tử (hoặc cha khi dùng cho font-size), % theo cha, vh/vw theo viewport. rem phù hợp font và spacing để tôn trọng cài đặt cỡ chữ của người dùng.
Các giá trị `position` hoạt động ra sao? `z-index` và stacking context là gì?
static là mặc định; relative dịch theo vị trí gốc và làm mốc cho con absolute; absolute định vị theo tổ tiên positioned gần nhất; fixed theo viewport; sticky dính khi cuộn qua ngưỡng. z-index chỉ so sánh trong cùng một stacking context nên z-index lớn vẫn có thể bị đè.
CSS Grid: `fr`, `minmax()` và `auto-fit` dùng thế nào để làm layout responsive?
fr chia phần không gian còn lại theo tỉ lệ. minmax(min, max) đặt biên kích thước track. repeat(auto-fit, minmax(220px, 1fr)) tạo số cột tự động theo bề rộng container mà không cần media query; auto-fit gộp track rỗng còn auto-fill thì giữ.
CSS variables (custom properties) và cách làm dark mode với `prefers-color-scheme`
CSS variable khai báo bằng --name và đọc bằng var(--name, fallback); chúng kế thừa và đổi được lúc runtime (khác biến Sass). Dark mode: đặt màu bằng biến ở :root, ghi đè biến trong @media (prefers-color-scheme: dark) và/hoặc theo thuộc tính data-theme do người dùng chọn.
Flexbox: `justify-content`, `align-items` và `flex: 1` nghĩa là gì?
justify-content căn theo trục chính, align-items theo trục chéo. flex là viết tắt của flex-grow, flex-shrink, flex-basis: grow chia phần dư, shrink thu nhỏ khi thiếu chỗ, basis là kích thước ban đầu. flex: 1 tương đương 1 1 0%.
Responsive design: mobile-first, media query, `clamp()` và container query
Mobile-first viết CSS cơ bản cho màn nhỏ rồi mở rộng bằng min-width media query. clamp(min, giá trị linh hoạt, max) giúp font/spacing co giãn mượt. Container query cho component đổi layout theo kích thước container thay vì viewport.
Specificity và cascade trong CSS hoạt động thế nào? `!important` có nên dùng?
Cascade quyết định theo thứ tự: origin và !important, rồi specificity (inline > id > class/attribute/pseudo-class > element), cuối cùng là thứ tự xuất hiện. !important nên hạn chế vì phá cascade, chỉ dùng cho utility hoặc ghi đè style bên thứ ba.
Accessibility trong HTML/CSS: khi nào dùng ARIA, và quản lý focus ra sao?
Quy tắc số một: ưu tiên thẻ native (button, label, dialog) trước ARIA, vì ARIA chỉ đổi cách trình bày cho assistive tech chứ không thêm hành vi bàn phím. Dùng aria-label/aria-labelledby/aria-expanded khi native không đủ, giữ focus indicator rõ ràng và quản lý focus khi mở modal.
Ảnh responsive: `srcset`, `sizes`, `picture` và lazy loading đúng cách
srcset kèm sizes để trình duyệt chọn ảnh theo độ rộng hiển thị và DPR; picture cho art direction hoặc đổi định dạng (AVIF/WebP). loading="lazy" trì hoãn ảnh ngoài màn hình, nhưng ảnh LCP phải tải sớm (không lazy, có thể fetchpriority=high) và luôn khai báo width/height để tránh CLS.
CSS chặn render như thế nào và critical CSS giúp gì?
CSS là render-blocking: trình duyệt không paint cho đến khi tải và parse xong CSSOM của các stylesheet trong head. Critical CSS inline phần style above-the-fold vào head và nạp phần còn lại bất đồng bộ để giảm FCP/LCP, đổi lại phức tạp hơn khi build và cache.
CSS hiện đại: `:has()`, native nesting và `@layer` giải quyết vấn đề gì?
:has() là relational selector cho phép chọn phần tử cha dựa trên con. Native nesting cho viết selector lồng nhau không cần Sass. @layer khai báo thứ tự ưu tiên giữa các nhóm style, layer khai báo sau thắng layer trước bất kể specificity.
Reflow vs repaint và cách làm animation CSS mượt (transform, opacity, `will-change`)
Đổi thuộc tính layout (width, top, margin) gây reflow rồi repaint; đổi paint (color, box-shadow) gây repaint; transform và opacity thường chỉ cần composite trên GPU nên mượt nhất. Animate transform/opacity, dùng will-change có chọn lọc và tránh đọc layout xen kẽ ghi.
So sánh BEM, CSS Modules, Tailwind và CSS-in-JS: chọn thế nào?
BEM là quy ước đặt tên, không có scope thật. CSS Modules scope class lúc build, zero runtime. Tailwind dùng utility class, nhất quán và bundle nhỏ nhưng markup dài. CSS-in-JS runtime cho style động theo props nhưng tốn runtime và khó với RSC; bản zero-runtime giảm nhược điểm này.