Laravel

© 2026 Laravel

Quay lại

Mục lục bài viết

  1. Người mới bắt đầu (Beginner)
  2. Trung cấp (Intermediate)
  3. Nâng cao (Advanced)
  4. Kiến trúc sư (Architect)
  5. Tình huống thực tế (Practical Scenarios)
  6. Nên biết
  7. Lưu ý
  8. Mẹo và thủ thuật

Sử dụng các mục để điều hướng nhanh

CSS & UI Engineering: Nghệ thuật Giao diện Chuyên nghiệp

Ngày đăng 21/02/2026

Giao diện là bộ mặt của ứng dụng. Một UI Engineer giỏi không chỉ biết làm cho đẹp, mà còn phải làm cho nó nhẹ, dễ bảo trì và khả năng tương thích cao.

#Người mới bắt đầu (Beginner)

Q1: CSS Box Model là gì?

Trả lời: Là mô hình biểu diễn mọi phần tử HTML dưới dạng một hình hộp, bao gồm: Content (nội dung), Padding (khoảng đệm), Border (viền), và Margin (khoảng cách ngoài).

Q2: Phân biệt `position: relative`, `absolute`, và `fixed`.

Trả lời:

  • Relative: Nằm theo luồng bình thường nhưng có thể dịch chuyển so với vị trí gốc.
  • Absolute: Nằm so với phần tử cha gần nhất có position (không phải static).
  • Fixed: Nằm cố định so với cửa sổ trình duyệt (viewport).
Q3: Flexbox dùng để làm gì?

Trả lời: Là mô hình dàn trang 1 chiều (theo hàng hoặc cột), giúp căn chỉnh và phân bổ không gian giữa các phần tử một cách linh hoạt.

Q4: Selector trong CSS là gì? Cho ví dụ.

Trả lời: Dùng để chọn phần tử cần định dạng. Ví dụ: p (thẻ), .class (lớp), #id (định danh), input[type="text"] (thuộc tính).

Q5: Đơn vị `px`, `em`, `rem` khác nhau như thế nào?

Trả lời:

  • px: Cố định.
  • em: Phụ thuộc vào font-size của phần tử cha.
  • rem: Phụ thuộc vào font-size của phần tử gốc (<html>). Nên dùng rem cho tính dễ tiếp cận (Accessibility).
Q6: Làm thế nào để căn giữa một phần tử bằng Flexbox?

Trả lời: Dùng display: flex; justify-content: center; align-items: center; cho phần tử cha.

Q7: Pseudo-classes và Pseudo-elements là gì?

Trả lời:

  • Pseudo-class: Trạng thái của phần tử (ví dụ: :hover, :focus, :nth-child(1)).
  • Pseudo-element: Phần cụ thể của phần tử (ví dụ: ::before, ::after, ::first-letter).
Q8: CSS Reset và Normalize.css để làm gì?

Trả lời: Để loại bỏ sự khác biệt về định dạng mặc định giữa các trình duyệt khác nhau, giúp giao diện hiển thị thống nhất hơn.

Q9: Z-index hoạt động như thế nào?

Trả lời: Quyết định thứ tự hiển thị lớp (lên trên hay xuống dưới). Chỉ có tác dụng với phần tử có position khác static.

Q10: Làm thế nào để tạo Responsive Design đơn giản nhất?

Trả lời: Sử dụng Media Queries (@media) để thay đổi CSS dựa trên kích thước màn hình.

#Trung cấp (Intermediate)

Q1: CSS Grid vs Flexbox: Khi nào dùng cái nào?

Trả lời:

  • Grid: Dàn trang 2 chiều (cả hàng và cột), phù hợp cho bố cục lớn.
  • Flexbox: Dàn trang 1 chiều, phù hợp cho các thành phần nhỏ bên trong.
Q2: Giải thích về "Specificity" (Độ ưu tiên) trong CSS.

Trả lời: Thứ tự ưu tiên: Inline style > ID > Class/Attribute/Pseudo-class > Element/Pseudo-element. Nếu bằng nhau, cái viết sau sẽ thắng.

Q3: BEM (Block Element Modifier) là gì và tại sao cần nó?

Trả lời: Là quy tắc đặt tên class (ví dụ: .card__title--active). Giúp code CSS dễ đọc, tránh xung đột tên và dễ tái sử dụng.

Q4: CSS Variables (Custom Properties) hoạt động thế nào?

Trả lời: Khai báo: --main-color: #ff0000;. Sử dụng: color: var(--main-color);. Giúp quản lý theme cực kỳ hiệu quả.

Q5: Phân biệt `display: none` và `visibility: hidden`.

Trả lời:

  • display: none: Xóa hoàn toàn phần tử khỏi luồng trang (không chiếm diện tích).
  • visibility: hidden: Ẩn phần tử nhưng vẫn chiếm diện tích như bình thường.
Q6: Ý nghĩa của `box-sizing: border-box`?

Trả lời: Khi set width/height, nó bao gồm cả padding và border. Giúp việc tính toán kích thước phần tử dễ dàng và chính xác hơn nhiều.

Q7: Làm thế nào để tạo hiệu ứng chuyển động mượt mà (Transitions vs Animations)?

Trả lời:

  • Transition: Thay đổi từ trạng thái A sang B khi có sự kiện (hover).
  • Animation: Chuỗi các thay đổi phức tạp qua nhiều bước (@keyframes), chạy tự động.
Q8: Mobile-First Strategy là gì trong CSS?

Trả lời: Viết CSS cho màn hình nhỏ trước, sau đó dùng Media Queries để thêm định dạng cho màn hình lớn. Giúp code sạch và hiệu năng tốt hơn trên mobile.

Q9: Phân biệt `object-fit: cover` và `contain` khi hiển thị ảnh.

Trả lời:

  • Cover: Ảnh lấp đầy vùng chứa (có thể bị cắt).
  • Contain: Ảnh hiện đầy đủ bên trong vùng chứa (có thể có khoảng trống).
Q10: Tailwind CSS khác gì so với CSS truyền thống?

Trả lời: Tailwind là Utility-first framework. Bạn viết CSS trực tiếp qua các class ngắn gọn trong HTML. Giúp dev nhanh hơn và không cần phải đau đầu đặt tên class.

#Nâng cao (Advanced)

Q1: Giải thích về "Stacking Context" trong CSS.

Trả lời: Là khái niệm quyết định phần tử nào nằm trên. Một phần tử có thể tạo ra stacking context riêng (ví dụ qua opacity < 1 hoặc transform), làm cho z-index của con nó chỉ có tác dụng bên trong đó.

Q2: CSS Performance: Tại sao selector quá dài lại làm chậm trình duyệt?

Trả lời: Trình duyệt đọc selector từ phải sang trái. Selector như body div section ul li a bắt trình duyệt phải duyệt qua quá nhiều phần tử để so khớp.

Q3: Làm thế nào để tối ưu hóa Fonts (Web Font Optimization)?

Trả lời: Dùng định dạng WOFF2, sử dụng font-display: swap, và chỉ load các ký tự thực sự cần thiết (Subsetting).

Q4: CSS-in-JS (Styled Components) hoạt động như thế nào?

Trả lời: Viết CSS trực tiếp trong file JavaScript/React. Thư viện sẽ tự động generate class name duy nhất để tránh xung đột và hỗ trợ dynamic styling mạnh mẽ.

Q5: Giải thích về "Critical CSS".

Trả lời: Chỉ lấy phần CSS cần thiết để hiển thị phần trang người dùng thấy đầu tiên (above the fold) và inline trực tiếp vào HTML để tăng tốc độ hiển thị ban đầu.

Q6: Làm thế nào để tạo giao diện Dark Mode hiệu quả?

Trả lời: Sử dụng CSS Variables kết hợp với media query (prefers-color-scheme: dark) hoặc một class .dark ở thẻ body.

Q7: Container Queries là gì và tại sao nó thay đổi cách làm Component?

Trả lời: Cho phép phần tử thay đổi CSS dựa trên kích thước của “phần tử cha” thay vì kích thước toàn bộ màn hình. Giúp tạo ra các component thực sự độc lập.

Q8: Phân tích sự đánh đổi giữa SVG và Icon Fonts.

Trả lời:

  • SVG: Sắc nét, dễ tùy chỉnh màu qua CSS, hỗ trợ animation tốt, SEO tốt hơn.
  • Icon Fonts: Nhẹ khi dùng nhiều icon, nhưng khó căn chỉnh pixel-perfect và gây ra vấn đề accessibility.
Q9: "Aspect Ratio" trong CSS hiện đại xử lý thế nào?

Trả lời: Dùng thuộc tính aspect-ratio: 16 / 9;. Không còn cần dùng kỹ thuật padding-top phức tạp như trước.

Q10: Tối ưu hóa CSS Animations (Hardware Acceleration).

Trả lời: Sử dụng các thuộc tính transform và opacity vì chúng được xử lý bởi GPU, không gây ra re-layout (Reflow) và re-paint, giúp animation mượt mà 60fps.

#Kiến trúc sư (Architect)

Q1: Thiết kế một Design System / Component Library dùng chung cho nhiều dự án.

Trả lời: Sử dụng Design Tokens (biến cho màu sắc, khoảng cách, font). Xây dựng thư viện component Atomic (Atom -> Molecule -> Organism). Đảm bảo tính nhất quán qua Storybook.

Q2: Phân tích chiến lược CSS Architecture (ITCSS, Atomic CSS).

Trả lời:

  • ITCSS: Phân tầng CSS theo độ ưu tiên và phạm vi (Settings -> Tools -> Generic -> Elements -> Objects -> Components -> Trumps).
  • Atomic CSS: Mỗi class chỉ làm 1 việc duy nhất.
Q3: Làm thế nào để quản lý CSS trong hệ thống Micro-frontends?

Trả lời: Dùng CSS Modules hoặc Shadow DOM để cô lập hoàn toàn CSS của từng module, tránh việc module này làm vỡ giao diện module kia.

Q4: Tầm nhìn: Tương lai của CSS với Houdini API.

Trả lời: Cho phép lập trình viên can thiệp trực tiếp vào quá trình Rendering của trình duyệt bằng JavaScript, mở ra khả năng tạo ra các hiệu ứng hình ảnh và bố cục chưa từng có.

#Tình huống thực tế (Practical Scenarios)

S1: Giao diện hiển thị đúng trên Chrome nhưng bị lệch trên Safari. Cách xử lý?

Xử lý: 1. Kiểm tra Vendor Prefixes (-webkit-). 2. Sử dụng công cụ Autoprefixer. 3. Kiểm tra các thuộc tính CSS mới xem Safari đã hỗ trợ chưa qua “Can I Use”.

S2: File CSS của bạn quá lớn (> 500KB) làm chậm trang web. Cách tối ưu?

Xử lý: 1. Sử dụng PurgeCSS để xóa code thừa. 2. Chia nhỏ CSS theo trang. 3. Bật nén Brotli/Gzip. 4. Sử dụng Tailwind để giảm thiểu lặp lại code.

#Nên biết

  • Box Model và Flexbox/Grid.
  • CSS Specificity.
  • Responsive Design với Media Queries.

#Lưu ý

  • Sử dụng !important quá nhiều (gây khó khăn khi ghi đè).
  • Đặt tên class quá chung chung (gây xung đột).
  • Quên không tối ưu CSS cho Mobile.

#Mẹo và thủ thuật

  • Dùng gap cho Flexbox (đã hỗ trợ hầu hết trình duyệt hiện đại) thay vì margin.
  • Tận dụng clamp() để tạo font-size linh hoạt giữa các màn hình mà không cần quá nhiều media queries.
Chủ đề:
#css #frontend #ui #design-system #responsive

Bài viết liên quan

Tiếp tục hành trình nâng tầm kiến thức của bạn