60+ câu hỏi phỏng vấn CSS và câu trả lời hàng đầu (2026)

Bởi: Emma Davis Emma Davis
Hours cập nhật

Bạn đang chuẩn bị cho buổi phỏng vấn CSS? Đã đến lúc trau dồi kiến ​​thức cơ bản và nâng cao hơn nữa. Hiểu rõ Phỏng vấn CSS câu hỏi có thể khám phá mức độ hiểu biết sâu sắc của ứng viên về cấu trúc thiết kế và logic về kiểu dáng.

Sự nghiệp phát triển CSS mở ra nhiều cơ hội đa dạng, từ thiết kế front-end đến ứng dụng web đáp ứng. Với kinh nghiệm kỹ thuật, chuyên môn sâu rộng và kỹ năng phân tích mạnh mẽ, các chuyên gia có thể thể hiện bộ kỹ năng tiên tiến mà các trưởng nhóm và quản lý coi trọng. Những câu hỏi và câu trả lời này giúp các lập trình viên mới, trung cấp và cao cấp vượt qua các cuộc phỏng vấn một cách tự tin và hiệu quả.

Dựa trên những hiểu biết sâu sắc được chia sẻ bởi hơn 85 chuyên gia, bao gồm các nhà lãnh đạo kỹ thuật, quản lý và chuyên gia tuyển dụng, hướng dẫn này tổng hợp các phương pháp phỏng vấn đáng tin cậy trên nhiều ngành nghề—đảm bảo tính chính xác, phù hợp và đáng tin cậy cho mọi cấp độ kinh nghiệm.

Câu hỏi và câu trả lời phỏng vấn CSS

Những câu hỏi và câu trả lời phỏng vấn CSS hàng đầu

1) Giải thích về chuỗi CSS hiện đại, bao gồm @layer, tính đặc thù và thứ tự nguồn.

Chuỗi quyết định quy tắc nào "thắng" khi nhiều quy tắc nhắm vào cùng một phần tử. Quyết định được tiến hành theo mức độ quan trọng ( !important ), nguồn gốc (tác nhân người dùng, người dùng, tác giả), sau đó thứ tự lớp từ @layer, tiếp theo là tính cụ thể và cuối cùng là thứ tự nguồn. Sử dụng @layer cho phép bạn xác định các tầng có thể dự đoán được như reset, base, components và utilities để toàn bộ nhóm quy tắc ghi đè lên các nhóm khác mà không làm tăng tính đặc hiệu của bộ chọn. Lợi ích chính là khả năng bảo trì; nhược điểm chính là việc sắp xếp lớp không chính xác có thể ẩn chứa lỗi. Ưu tiên các bộ chọn lớp có tính đặc hiệu thấp, dự trữ !important để có chính sách có chủ đích và giữ cho kiến ​​trúc dễ đọc.

Trả lời kèm ví dụ

@layer reset, base, components, utilities;
@layer reset { *,*::before,*::after{ box-sizing:border-box } }
@layer base { body{ font:16px/1.5 system-ui } }
@layer components { .btn{ background:var(--brand,#4b6fff); color:#fff } }
@layer utilities { .text-sm{ font-size:.875rem } }

👉 Tải xuống PDF miễn phí: Câu hỏi phỏng vấn CSS

2) Truy vấn container khác với truy vấn phương tiện như thế nào và bạn sẽ sử dụng từng loại ở đâu?

Các truy vấn container phản hồi kích thước hoặc kiểu dáng của chứa phần tử, làm cho các thành phần tự nhận thức và có thể tái sử dụng trong các bối cảnh khác nhau. Các truy vấn phương tiện phản hồi khung nhìn hoặc đặc điểm thiết bị và khả năng thích ứng với các thay đổi bố cục toàn cục. Truy vấn container cho phép thẻ, tiện ích và mô-đun lồng nhau thích ứng cục bộ; truy vấn phương tiện vẫn lý tưởng cho việc điều hướng toàn trang web hoặc thay đổi shell. Ưu điểm của truy vấn container bao gồm độ chi tiết tốt hơn và ít điểm dừng toàn cục hơn; nhược điểm bao gồm thiết lập thông qua container-type và lựa chọn ranh giới cẩn thận.

Sự khác biệt giữa (bảng so sánh)

Hệ số Truy vấn phương tiện truyền thông Truy vấn vùng chứa
Cò súng Các tính năng của Viewport Kích thước hoặc kiểu dáng của thùng chứa
Phạm vi Toàn trang Thành phần cục bộ
Thành lập Không có gì ngoài câu hỏi Yêu cầu container-type / tên tùy chọn
Tốt nhất cho Điểm dừng toàn cầu Các biến thể thẻ hoặc tiện ích

Trả lời kèm ví dụ

/* Declare a query container */
.card-grid { container-type: inline-size; }
/* Component-level breakpoint */
@container (min-width: 32rem) {
   .card { display:grid; grid-template-columns: 2fr 3fr; gap:1rem; }
}

3) Đặc điểm và lợi ích của :has()và nó so sánh như thế nào với :is() và :where() ?

Lớp giả quan hệ :has() chọn một phần tử dựa trên các phần tử con hoặc mẫu tiếp theo, cho phép tạo kiểu trạng thái cha mẹ mà không cần JavaScript. Tính năng này rất hữu ích cho các nhóm xác thực biểu mẫu, trạng thái điều hướng hoặc chuyển đổi mật độ. Ngược lại, :is() và :where() đơn giản hóa danh sách chọn dài; :where() không đóng góp tính đặc hiệu nào, trong khi :is() góp phần tạo nên tính đặc thù của lập luận cụ thể nhất của nó. Lợi ích của :has() bao gồm kiểu dáng theo ngữ cảnh và đánh dấu rõ ràng hơn; nhược điểm bao gồm các vấn đề tiềm ẩn về hiệu suất nếu sử dụng với bộ chọn không giới hạn. Hãy giới hạn phạm vi của nó một cách hẹp và kết hợp với các lớp hoặc thuộc tính để có thể dự đoán được.

Trả lời kèm ví dụ

/* Emphasize label when any input inside is invalid */
.form-group:has(input:invalid) label { color:#b00020; }

/* Compact nav if there are many items */
.nav:has(> li:nth-child(n+8)) { font-size:.9rem }

/* Specificity control helpers */
:is(h1,h2,h3){ margin-block:.75em }
where(.prose h1,.prose h2){ line-height:1.2 }

4) Bạn sẽ áp dụng các thuộc tính tùy chỉnh CSS cho chủ đề ở đâu và ưu điểm cũng như nhược điểm của chúng là gì?

Thuộc tính tùy chỉnh CSS mang các giá trị qua tầng thác, kế thừa tự nhiên và phân giải khi chạy, khiến chúng trở nên lý tưởng cho các giao diện, chế độ mật độ và mã thông báo thiết kế. Chúng cho phép chuyển đổi chế độ tối hoặc hoán đổi hệ màu mà không cần xây dựng lại tài nguyên. Ưu điểm bao gồm cập nhật động, đồng vị trí với các thành phần và khả năng tương thích với @layerNhược điểm bao gồm tính gián tiếp cho các trình phân tích tĩnh và nhu cầu thiết kế các phương án dự phòng. Sử dụng mã thông báo phạm vi gốc cho ngữ nghĩa toàn cục và mã thông báo phạm vi thành phần cho các biến thể, đồng thời giữ tên ổn định để đảm bảo khả năng bảo trì lâu dài.

Trả lời kèm ví dụ

:root { --bg: #fff; --fg: #111; --radius: .5rem; }
@media (prefers-color-scheme: dark){
   :root { --bg:#0b0d10; --fg:#e7edf3; }
}
.card { background:var(--bg); color:var(--fg); border-radius:var(--radius); }

5) Hệ thống bố cục nào phù hợp với vấn đề nào: Flexbox, Grid hay Subgrid?

Flexbox là tối ưu cho một chiều căn chỉnh và phân phối dọc theo một trục duy nhất, Grid vượt trội ở hai chiều Kiểm soát vị trí và đường dẫn rõ ràng, còn Subgrid cho phép các phần tử con kế thừa các đường dẫn lưới cha để căn chỉnh nhất quán trên các thành phần lồng nhau. Việc lựa chọn hệ thống phù hợp sẽ giảm thiểu việc ghi đè và cải thiện khả năng đọc. Một mô hình phổ biến là Grid cho khung trang và bảng điều khiển, Flexbox cho thanh công cụ và danh sách chip, và Subgrid để căn chỉnh các phần tử bên trong như siêu dữ liệu thẻ với các cột bên ngoài.

Các loại và sự khác biệt giữa (bảng so sánh)

Trường hợp sử dụng hộp flex lưới lưới con
kích thước 1-D 2-D 2-D thông qua các bản nhạc được kế thừa
Sức mạnh Phân phối, sắp xếp Khu vực rõ ràng, các bản nhạc có thể lặp lại Căn chỉnh thành phần chéo
Thành lập Thấp Xác định hàng/cột Lưới cha mẹ là bắt buộc
Ví dụ Thanh dẫn đường, thuốc viên Thư viện, bảng điều khiển Chân thẻ được căn chỉnh theo lưới trang

Trả lời kèm ví dụ

.layout { display:grid; grid-template-columns: 1fr 3fr; gap:1rem; }
.card-meta { display:grid; grid-template-columns: subgrid; grid-column: 1 / -1; }

6) Các thuộc tính logic có cải thiện tính quốc tế hóa không? Giải thích lợi ích và sự đánh đổi.

Thuộc tính logic thay thế các hướng vật lý như trái và phải bằng các thuật ngữ liên quan đến luồng như inline và block start hoặc end. Điều này giúp một bảng định kiểu duy nhất thích ứng với các ngôn ngữ viết từ phải sang trái và các chế độ viết theo chiều dọc mà không cần phân nhánh quy tắc. Lợi ích là khả năng toàn cầu hóa tốt hơn, giảm trùng lặp quy tắc và các thành phần linh hoạt hơn. Tuy nhiên, những đánh đổi bao gồm sự thay đổi về mặt tinh thần trong quá trình áp dụng và đôi khi có những khoảng trống trong các thuộc tính đuôi dài. Ưu tiên margin-inline, padding-blockvà inset-inline-start để sắp xếp khoảng cách và định vị nhằm đạt được bố cục thống nhất trên khắp các địa phương.

Trả lời kèm ví dụ

.alert { padding-inline:1rem; border-inline-start:4px solid currentColor; }
[dir="rtl"] .breadcrumb { float:inline-end; }

7) Khi nào bạn sẽ sử dụng clamp() và các đơn vị cửa sổ nhìn hiện đại ( svh, lvh, dvh ) cho loại chất lỏng và khoảng cách?

Sử dụng clamp(min, preferred, max) khi bạn muốn các giá trị có thể mở rộng mượt mà theo sự phát triển của khung nhìn nhưng không bao giờ vượt quá giới hạn hợp lý. Điều này lý tưởng cho kiểu chữ, phần đệm và phần hero. Các đơn vị khung nhìn hiện đại giải quyết vấn đề giao diện người dùng Chrome trên trình duyệt di động, cung cấp chiều cao ổn định cho các phần toàn màn hình. Các lợi ích bao gồm ít truy vấn phương tiện hơn, nhịp điệu nhất quán và khả năng truy cập được cải thiện khi kết hợp với remNhược điểm là yêu cầu phải thử nghiệm trên nhiều thiết bị để xác nhận mục đích trực quan và mục tiêu chạm an toàn.

Trả lời kèm ví dụ

:root { --step-0: clamp(1rem, 1.2vw + .9rem, 1.25rem); }
h1 { font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); }
.hero { min-height: 100dvh; padding-block: clamp(1rem, 3vw, 3rem); }

8) Bối cảnh xếp chồng là gì và chỉ số z và các yếu tố định vị tạo ra hoặc cô lập nó như thế nào?

Ngữ cảnh xếp chồng là một phạm vi vẽ tranh bị cô lập, trong đó các phép so sánh chỉ số z chỉ được thực hiện giữa các phần tử cùng cấp trong cùng một ngữ cảnh. Các ngữ cảnh mới phát sinh từ phần tử gốc, các phần tử được định vị với z-index khác hơn autovà một số thuộc tính như transform, opacity < 1, filtervà position: fixedHiểu được chúng sẽ giải thích các vấn đề phổ biến "z-index không hoạt động" khi một phần tử con không thể vượt qua nội dung bên ngoài ngữ cảnh của nó. Lợi ích là đóng gói; nhưng mối nguy hiểm là việc vô tình cô lập, ngăn chặn các lớp phủ mong muốn.

Trả lời kèm ví dụ

.header { position:relative; z-index:10; }
.modal { position:fixed; inset:0; z-index:1000; }
.card { transform: translateZ(0); /* new stacking context */ }

NHỮNG BÀI VIẾT LIÊN QUAN

9) Liệu lồng CSS gốc có sẵn sàng để đưa vào sản xuất không và bạn sẽ di chuyển từ bộ xử lý trước như thế nào?

Phương pháp lồng nhau gốc được hỗ trợ rộng rãi và giảm thiểu sự lặp lại bằng cách đặt các mối quan hệ quy tắc đồng thời giữ cho các bộ chọn ngắn gọn. Việc di chuyển nên ưu tiên các thành phần trước, thay thế các chuỗi con cháu sâu bằng một hoặc hai cấp độ lồng nhau và loại bỏ các cấu trúc chỉ dành cho tiền xử lý như mixin. Lợi ích bao gồm các gói nhỏ hơn và ánh xạ DevTools được cải thiện; nhược điểm bao gồm sự cám dỗ lồng nhau quá mức, làm tăng tính đặc thù và cản trở việc tái sử dụng. Thiết lập các giới hạn: giới hạn độ sâu, giữ các hook dựa trên lớp và kết hợp với @layer để kiểm soát thứ tự ghi đè.

Trả lời kèm ví dụ

.card {
    display:grid; gap:.75rem;
    & h3 { margin-block:.5rem; }
    & .actions { display:flex; gap:.5rem; }
    & .actions > button:hover { text-decoration:underline; }
}

10) Bạn có thể sử dụng truy vấn kiểu container không và lợi ích thực tế của chúng là gì?

Truy vấn kiểu cho phép các thành phần thích ứng với các kiểu được tính toán của vùng chứa, chẳng hạn như mã thông báo mật độ hoặc biến thể chủ đề, mà không cần phải luồng các tên lớp bổ sung qua DOM. Điều này cho phép các hệ thống thiết kế chuyển đổi giữa chế độ gọn nhẹ và thoải mái hoặc các điểm nhấn sáng tối cho mỗi vùng chứa. Ưu điểm là các thành phần được tách biệt và ranh giới rõ ràng hơn; nhược điểm bao gồm việc cần đặt tên mã thông báo cẩn thận, các phương án dự phòng được ghi chép lại và thiết lập vùng chứa một cách thận trọng. Hãy sử dụng chúng để thể hiện trạng thái dưới dạng dữ liệu thay vì các bộ chọn cấu trúc dễ vỡ.

Trả lời kèm ví dụ

/* Container emits a style signal */
.panel { --density: compact; container-type:inline-size; }

/* Child adapts when the container declares compact density */
@container style(--density: compact) {
    .item { padding:.5rem; gap:.5rem; }
}

11) Yếu tố hiệu suất nào quan trọng đối với CSS và làm thế nào để tránh tình trạng lộn xộn bố cục?

Hiệu suất CSS phụ thuộc vào tần suất trình duyệt phải tính toán lại phong cách, tính toán bố trívà sơn lại hoặc tổng hợp Các lớp. Hiện tượng chồng chéo bố cục xảy ra khi các thao tác đọc và ghi xen kẽ vào các thuộc tính ảnh hưởng đến bố cục buộc phải thực hiện lại nhiều lần. Một cách tiếp cận có kỷ luật là giảm thiểu độ phức tạp của bộ chọn, giữ độ đặc hiệu ở mức thấp và chỉ tạo hiệu ứng cho các thuộc tính thân thiện với trình soạn thảo. Đọc DOM hàng loạt trước khi ghi và tận dụng cơ chế bao bọc để hạn chế bán kính bùng nổ.

Trả lời kèm ví dụ

  • Thích hơn transform và opacity đối với hoạt hình; tránh hoạt hình width/height/top/left.
  • Rắc bột content-visibility: auto đến các phần ngoài màn hình và cung cấp contain-intrinsic-size.
  • Sử dụng will-change một cách tiết kiệm để chỉ quảng bá các lớp cho các hoạt ảnh dài.
  • Thay thế các bộ chọn con cháu sâu bằng các móc lớp đơn để giảm việc tính toán lại kiểu.
.article-preview { content-visibility: auto; contain-intrinsic-size: 600px 400px; }
.fab { transition: transform .25s, opacity .25s; will-change: transform; }

12) Những tính năng CSS nào hỗ trợ khả năng truy cập ngay lập tức? Hãy cung cấp các ưu điểm và ví dụ.

CSS không thể thay thế HTML ngữ nghĩa hoặc ARIA, nhưng nó cải thiện tập trung tầm nhìn, an toàn chuyển độngvà chiến lược tương phản. Các :focus-visible lớp giả cho thấy tiêu điểm khi chế độ bàn phím được phát hiện, ngăn tiếng ồn thị giác cho người dùng chuột trong khi vẫn giữ nguyên tín hiệu cho người dùng bàn phím. Các tính năng phương tiện như prefers-reduced-motion cho phép các mẫu dự phòng được tôn trọng, trong khi thiết kế mã thông báo màu cẩn thận hỗ trợ độ tương phản vừa đủ. Ưu điểm là các mặc định bao gồm trên nhiều tùy chọn người dùng khác nhau; hạn chế là ngữ nghĩa và điều hướng bàn phím phải được cung cấp bằng mã đánh dấu và tập lệnh.

Trả lời kèm ví dụ

:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .parallax, .video-bg { animation: none; transition: none; }
}

13) Các cách khác nhau để đưa CSS vào và ưu điểm hoặc nhược điểm của từng cách.

Có nhiều chiến lược bao gồm, mỗi chiến lược có những đặc điểm riêng biệt ảnh hưởng đến bộ nhớ đệm, đường dẫn quan trọng và khả năng bảo trì. Các bảng định kiểu bên ngoài giúp tách biệt các mối quan tâm và tận dụng bộ nhớ đệm của trình duyệt; nội tuyến <style> phù hợp với các quy tắc quan trọng phải tải cùng với HTML; nội tuyến style="" Thuộc tính có mức độ ưu tiên cao nhất nhưng lại gây hại cho việc tái sử dụng và tăng tính đặc thù. Việc chọn đúng loại sẽ giúp giảm thiểu sự trùng lặp tải trọng, đồng thời vẫn đảm bảo tính công thái học của nhà phát triển.

Ưu điểm và nhược điểm (bảng so sánh)

Phương pháp Ưu điểm Nhược điểm Sử dụng điển hình
Bảng định kiểu bên ngoài Bộ nhớ đệm trình duyệt; được chia sẻ trên nhiều trang Yêu cầu HTTP bổ sung Hệ thống thiết kế toàn cầu
Nội tuyến <style> Loại bỏ yêu cầu; lý tưởng cho CSS quan trọng Khó quản lý ở quy mô lớn hơn Các kiểu hiển thị trên màn hình
Nội tuyến style="" Độ đặc hiệu tức thì và cao nhất Không tái sử dụng; HTML ồn ào Ghi đè một lần

Trả lời kèm ví dụ

<link rel="stylesheet" href="/vi/assets/app.css" />
<style>/* minimal critical rules for LCP elements */</style>
<div class="btn" style="--danger: #b00020">Delete</div>

14) Sự khác biệt giữa relative, absolute, fixedvà sticky định vị? Cung cấp hướng dẫn sử dụng.

Vị trí xác định cách các thành phần được đặt trong luồng và cách chúng tương tác với phần cuộn và phần tổ tiên. relative duy trì dòng chảy tự nhiên nhưng bù lại hộp thị giác; thường được sử dụng để thiết lập bối cảnh neo đậu. absolute loại bỏ một phần tử khỏi luồng, định vị nó tương đối với phần tử tổ tiên gần nhất, mang lại độ chính xác nhưng phải trả giá bằng khả năng phản hồi. fixed ghim các thành phần vào khung nhìn, lý tưởng cho các thanh cố định nhưng phải cân nhắc đến bàn phím trên màn hình và các vùng an toàn. sticky chuyển đổi giữa tĩnh và cố định tùy thuộc vào ngưỡng cuộn, cung cấp tiêu đề phần và chỉ mục trong trang.

Trả lời kèm ví dụ

.badge-anchor { position: relative; }
.badge { position: absolute; inset: -6px -6px auto auto; }
.header { position: sticky; top: 0; background: var(--bg); }
.toast { position: fixed; inset: auto 1rem 1rem auto; }

15) Những yếu tố nào hình thành nên kiến ​​trúc CSS có thể bảo trì (BEM, ITCSS, tiện ích, lớp) và vòng đời của kiểu thành phần là gì?

Một kiến ​​trúc có thể bảo trì cân bằng chuyên ngành đặc thù, có thể dự đoán được phân lớpvà ổn định đặt tên. BEM cung cấp các móc rõ ràng, các quy tắc sắp xếp của ITCSS từ các thiết lập lại cấp thấp đến các tiện ích cấp cao, các phương pháp tiếp cận tiện ích đầu tiên tăng tốc độ lặp lại với các nguyên hàm bị ràng buộc và @layer chính thức hóa thứ tự ghi đè trên toàn bộ cơ sở mã. Vòng đời của một thành phần thường bắt đầu bằng việc định nghĩa mã thông báo, tiếp tục đến các quy tắc cơ sở và thành phần, thêm các biến thể và trạng thái, và kết thúc bằng các chính sách loại bỏ nhằm tránh các thay đổi đột ngột. Ưu điểm là hành vi nhất quán giữa các nhóm; nhưng đánh đổi là việc lập kế hoạch và quản trị trước.

Trả lời kèm ví dụ

  • Mã thông báo trong :root (khoảng cách, màu sắc, bán kính).
  • Các thành phần được đặt trong @layer components với bộ chọn lớp đơn.
  • Các biến thể thông qua thuộc tính dữ liệu hoặc truy vấn kiểu chứa để rõ ràng hơn.
@layer reset, base, components, utilities;
@layer components { .card { border-radius: var(--radius-2); } }

16) Shadow DOM ảnh hưởng đến phạm vi CSS như thế nào và có những cách nào khác nhau để định dạng các phần?

Shadow DOM đóng gói mã đánh dấu và kiểu dáng, ngăn ngừa rò rỉ vô tình và đảm bảo tính ổn định của thành phần. Tác giả có thể chủ động phơi bày các bề mặt: ::part() các mục tiêu được đặt tên các bộ phận được xuất khẩu bởi thành phần, trong khi ::slotted() Các kiểu được gán các nút DOM ánh sáng trong các khe. Ưu điểm bao gồm khả năng đóng gói mạnh mẽ và giao diện chủ đề có thể dự đoán được; nhược điểm bao gồm phạm vi tiếp cận hạn chế vào các thành phần bên trong trừ khi nhà thiết kế thành phần cung cấp các bộ phận, và cần phải ghi lại các bộ phận đó cho người dùng.

Trả lời kèm ví dụ

/* Theme an exposed component part */
custom-rating::part(star) { color: gold; }
file-card::slotted(img) { border-radius: .5rem; }

17) Đặc điểm của mô hình hộp CSS là gì và tại sao? box-sizing: border-box Vân đê?

Mô hình hộp mô tả cách kích thước tổng thể của một phần tử bắt nguồn từ nội dung, đệm, đường viềnvà tỷ suất lợi nhuận. Với mặc định content-box, khai báo width loại trừ phần đệm và đường viền, có thể gây ra sự cố tràn dữ liệu và tính toán phức tạp. Áp dụng border-box Bao gồm phần đệm và đường viền trong chiều rộng và chiều cao đã khai báo, giúp việc tính toán lưới và kích thước thành phần dễ dự đoán hơn. Lợi ích là mô hình tinh thần đơn giản hơn và ít lỗi bố cục hơn; nhược điểm là việc trộn lẫn các mô hình trong một hệ thống có thể gây nhầm lẫn cho những người đóng góp. Hãy chuẩn hóa ở gốc và ghi lại các ngoại lệ một cách công khai.

Trả lời kèm ví dụ

*, *::before, *::after { box-sizing: border-box; }
.card { width: 22rem; padding: 1rem; border: 1px solid #ddd; }

18) Bạn sẽ sử dụng ở đâu? @supports để cải thiện dần dần và lợi ích là gì?

@supports cho phép phát hiện tính năng trong CSS, cho phép một đường cơ sở hoạt động ở mọi nơi với các cải tiến có điều kiện nếu có. Mô hình này giảm thiểu rủi ro khi áp dụng các tính năng hiện đại như truy vấn container, :has(), hoặc lưới con. Lợi ích chính là sự suy giảm nhẹ nhàng và các đường dẫn di chuyển rõ ràng hơn; nhược điểm bao gồm việc duy trì các đường dẫn mã kép trong một thời gian. Cấu trúc hành vi cơ bản trước, sau đó gói hành vi nâng cao vào bên trong mục tiêu. @supports chặn để môi trường cũ không bị thoái hóa.

Trả lời kèm ví dụ

.card { display: block; }
@supports (display: grid) {
     .card { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
}

19) Bạn nên chọn đơn vị CSS nào và sự khác biệt giữa chúng là gì?

Lựa chọn đơn vị ảnh hưởng đến khả năng mở rộng, khả năng đọc và khả năng truy cập. rem tỷ lệ với kích thước phông chữ gốc, làm cho nó lý tưởng cho kiểu chữ và khoảng cách toàn cục; em tỷ lệ với phần tử hiện tại, hữu ích bên trong các thành phần nhưng có thể kết hợp bất ngờ. ch phản ánh chiều rộng của ký tự “0” và rất phù hợp để đo (độ dài dòng). px thiết bị được căn chỉnh theo pixel và an toàn cho đường chân tóc nhưng không phản hồi theo sở thích của người dùng. Các đơn vị chiều cao dòng như lh và rlh giúp duy trì nhịp điệu theo chiều dọc bằng cách liên kết khoảng cách với lưới chữ.

Trả lời kèm ví dụ

  • Sử dụng max-width: 65ch để có những đoạn văn dễ đọc.
  • Đặt khoảng cách toàn cầu là bội số của rem để tôn trọng sở thích của người dùng.
  • Sử dụng em đối với các thành phần bên trong như các nút biểu tượng có thể thay đổi kích thước theo phông chữ.
.prose { max-width: 65ch; margin-inline: auto; }
.btn { padding-inline: 1em; }

20) Bộ đếm CSS có giúp ích cho nội dung có cấu trúc không và lợi ích cũng như nhược điểm của chúng là gì?

Bộ đếm CSS cung cấp chức năng đánh số tự động mà không làm thay đổi HTML ngữ nghĩa, điều này rất hữu ích cho các tiêu đề, hình ảnh và văn bản pháp lý. Lợi ích bao gồm đánh dấu rõ ràng và tính linh hoạt trong trình bày giữa các ngôn ngữ hoặc phần. Nhược điểm là có thể gây ra các khoảng trống về khả năng truy cập nếu việc đánh số truyền tải ý nghĩa thiết yếu không được phản ánh trong cấu trúc DOM hoặc không được công nghệ hỗ trợ công bố. Hãy sử dụng bộ đếm để đánh số trình bày đồng thời đảm bảo hệ thống phân cấp cơ bản chính xác và dễ điều hướng.

Trả lời kèm ví dụ

article { counter-reset: h2; }
h2::before { counter-increment: h2; content: "Section " counter(h2) ". "; }
figure { counter-increment: fig; }
figcaption::before { content: "Figure " counter(fig) ": "; }

21) Khi nào bạn nên tạo hiệu ứng động bằng CSS và thuộc tính nào an toàn nhất cho hiệu suất?

Hoạt ảnh hoạt động ổn định nhất khi chúng hoạt động trên các thuộc tính thân thiện với trình soạn thảo, tránh việc phải chuyển tiếp và vẽ lại. CSS vượt trội trong việc khai báo các chuyển tiếp dựa trên trạng thái, nơi trình duyệt có thể tối ưu hóa việc lập lịch khung hình. Các lựa chọn an toàn nhất là transform và opacity, thường chạy trên luồng soạn thảo và giảm thiểu công việc của luồng chính. Sử dụng CSS cho các tương tác vi mô, chuyển tiếp khi di chuột và các hiệu ứng lối vào đơn giản. Tránh tạo hiệu ứng động cho các thuộc tính ảnh hưởng đến bố cục như width, height, topvà left vì chúng kích hoạt tính toán lại bố cục. Khi cần thiết phải thay đổi hình học, hãy cân nhắc các ảo ảnh dựa trên phép biến đổi hoặc kết hợp nhẹ nhàng max-height chuyển đổi với quản lý tràn và các giải pháp dự phòng khả năng truy cập cẩn thận.

Trả lời kèm ví dụ

.dialog { transform: translateY(8px); opacity: 0; }
.dialog[open] {
   transform: translateY(0);
   opacity: 1;
   transition: transform .2s ease, opacity .2s ease;
}
@media (prefers-reduced-motion: reduce) {
   .dialog { transition: none; }
}

22) CSS có thể hỗ trợ hình ảnh phản hồi không và có những cách nào khác nhau để tiếp cận nó?

HTML sở hữu khả năng lựa chọn hình ảnh nội tại thông qua srcset và sizes, nhưng CSS vẫn quan trọng đối với hình ảnh trang trí, chỉ đạo nghệ thuật của nền và lắp ghép đối tượng. Sử dụng image-set() để cung cấp nhiều độ phân giải cho hình ảnh nền và ưu tiên object-fit và object-position để kiểm soát các phần tử được thay thế trong hộp của chúng. Kết hợp chúng với các truy vấn container hoặc phương tiện để điều chỉnh kích thước, mật độ hoặc tiêu điểm. Lợi ích là khả năng kiểm soát trực quan chính xác mà không cần sự gia tăng mã đánh dấu; nhược điểm là hình nền CSS thiếu khả năng tự động thương lượng kích thước và không được công nghệ hỗ trợ thông báo, vì vậy hình ảnh nội dung nên được giữ nguyên trong HTML.

Ưu điểm và nhược điểm (bảng so sánh)

Phương pháp tiếp cận Đặc điểm Ưu điểm Nhược điểm Sử dụng điển hình
HTML srcset/sizes Lựa chọn nội tại Ngữ nghĩa chính xác; hiệu suất tốt nhất Yêu cầu thay đổi đánh dấu Nội dung hình ảnh
CSS image-set() Bộ độ phân giải nền Dễ dàng hoán đổi theo điểm dừng Không có kích thước nội tại Nền trang trí
object-fit / position Box kiểm soát ngăn chặn Cắt xén nhất quán Không dành cho hình ảnh nền Hình thu nhỏ, hình đại diện

Trả lời kèm ví dụ

.hero {
	background-image: image-set(url(bg-1x.jpg) 1x, url(bg-2x.jpg) 2x);
	background-size: cover;
}
.thumb { width: 240px; height: 160px; object-fit: cover; object-position: 50% 40%; }

23) Là một JavaChế độ tối không cần script là khả thi và những yếu tố nào làm cho nó trở nên mạnh mẽ?

A JavaChế độ tối không có tập lệnh có thể thực hiện được bằng cách kết hợp các thuộc tính tùy chỉnh với prefers-color-scheme Tính năng phương tiện và thuộc tính HTML tùy chọn cho phép người dùng ghi đè. Xác định các mã thông báo ngữ nghĩa ở gốc, cung cấp các biến thể tối trong truy vấn phương tiện và cho phép [data-theme] Ghi đè để tôn trọng lựa chọn rõ ràng của người dùng hoặc thương hiệu doanh nghiệp. Cách tiếp cận này giảm thiểu độ phức tạp, giảm nhấp nháy và duy trì tính thẩm quyền của chuỗi. Hạn chế là việc phụ thuộc vào tùy chọn hệ thống khi không có ghi đè rõ ràng. Ghi lại các mã thông báo, đảm bảo độ tương phản đủ và kiểm tra các đường nét và trạng thái tiêu điểm ở cả hai chế độ.

Trả lời kèm ví dụ

:root { --bg: #ffffff; --fg: #0b0d10; --accent: #4b6fff; }
@media (prefers-color-scheme: dark) {
:root { --bg:#0b0d10; --fg:#e7edf3; --accent:#8aa4ff; }
}
[data-theme="light"] { --bg:#ffffff; --fg:#0b0d10; }
[data-theme="dark"] { --bg:#0b0d10; --fg:#e7edf3; }
body { background: var(--bg); color: var(--fg); }
a { color: var(--accent); }

24) Có nhược điểm nào khi lồng ghép bộ chọn sâu và độ đặc hiệu cao không, và lợi ích của phương pháp độ đặc hiệu thấp là gì?

Lồng ghép sâu và tính đặc hiệu cao khiến các kiểu trở nên giòn, chậm khi tái cấu trúc và tăng nguy cơ ghi đè ngoài ý muốn. Các bộ chọn như vậy liên kết chặt chẽ CSS với cấu trúc tài liệu, làm tăng chi phí bảo trì khi mã đánh dấu phát triển. Phương pháp tiếp cận tính đặc hiệu thấp ưu tiên các hook lớp đơn, kiến ​​trúc phẳng và @layer Sắp xếp để quản lý ghi đè một cách có thể dự đoán được. Các lợi ích bao gồm quyền sở hữu rõ ràng hơn, hiển thị nhanh hơn nhờ việc khớp lệnh đơn giản hơn và dễ dàng sắp xếp giữa các nhóm. Thiết lập giới hạn về độ sâu lồng nhau, tránh việc xác định các lớp bằng tên phần tử khi không cần thiết và cung cấp các tiện ích cho các cửa thoát hiểm.

Trả lời kèm ví dụ

/* Fragile: structure-dependent */
.main .sidebar .card > h3.title { ... }

/* Resilient: single-class hook, layer-controlled */
@layer components { .card-title { ... } }

25) Phương pháp nào—BEM, ITCSS hay tiện ích đầu tiên—phù hợp với các nhóm khác nhau và ưu điểm và nhược điểm của chúng là gì?

Việc lựa chọn phương pháp phụ thuộc vào quy mô nhóm, văn hóa đánh giá và tính biến động của sản phẩm. ỔN cung cấp các móc nối rõ ràng, dễ đọc có thể mở rộng trong các nhóm lớn. ITCSS tổ chức cơ sở mã từ các thiết lập lại cấp thấp thông qua các đối tượng và thành phần đến các tiện ích, phù hợp với cấu trúc tầng. Tiện ích đầu tiên tăng tốc độ phân phối với các nguyên hàm bị ràng buộc và ưu tiên thành phần hơn là các bộ chọn tùy chỉnh. Các phương pháp lai ghép phổ biến: ITCSS để sắp xếp thứ tự, BEM để đặt tên khi cần, và tiện ích cho các điều chỉnh một lần. Những đánh đổi bao gồm tính dài dòng (BEM), lập kế hoạch trước (ITCSS) và khả năng gia tăng lớp (ưu tiên tiện ích).

Sự khác biệt (bảng so sánh)

Phương pháp Đặc điểm Ưu điểm Nhược điểm Phù hợp nhất
ỔN .block__elem–đặt tên mod Móc câu có thể đoán trước Bộ chọn chi tiết Các nhóm lớn, hệ thống thiết kế
ITCSS Kiến trúc phân lớp Xóa lệnh ghi đè Chi phí lập kế hoạch Kho hàng đơn lẻ nhiều nhóm
Tiện ích đầu tiên Atomcác lớp ic Tốc độ, tính nhất quán Rủi ro mất lớp Tạo mẫu nhanh, ứng dụng

26) Giải thích vòng đời của các mã thông báo khoảng cách và kiểu chữ từ thiết kế đến mã hóa bằng các ví dụ.

Vòng đời của mã thông báo bắt đầu từ khâu thiết kế với các lựa chọn về tỷ lệ, tỷ lệ và mục tiêu khả năng truy cập. Chúng trở thành các thuộc tính tùy chỉnh được đặt tên và có phiên bản, đại diện cho ngữ nghĩa. loại (ví dụ, --space-2, --font-scale-1 ) thay vì giá trị thô. Token được đưa vào các kiểu cơ sở, sau đó vào các thành phần và biến thể, và cuối cùng bị loại bỏ hoặc chuyển hướng qua các bí danh khi hệ thống phát triển. Lợi ích bao gồm nhịp điệu nhất quán, các khác biệt nhỏ hơn và tính tương đương đa nền tảng được cải thiện; nhược điểm bao gồm chi phí quản trị ban đầu và nhu cầu tài liệu rõ ràng. Hãy coi token như các API công khai: xác định phạm vi, ánh xạ đến các hướng dẫn sử dụng và cung cấp ghi chú di chuyển.

Trả lời kèm ví dụ

:root{
	--space-1:.25rem; --space-2:.5rem; --space-3:1rem;
	--font-0:1rem; --font-1:1.125rem; --font-2:1.25rem;
}
.card{ padding: var(--space-3); }
.card h2{ font-size: var(--font-2); margin-block: var(--space-2); }

/* deprecation alias */
:root{ --space-small: var(--space-2); }

27) Làm thế nào :focus-visible, :focus-withinvà :target khác nhau và mỗi loại mang lại lợi ích gì?

Các bộ chọn này giải quyết các đặc điểm tương tác và điều hướng riêng biệt. :focus-visible chỉ hiển thị tiêu điểm khi chế độ nhập liệu đề xuất điều hướng bằng bàn phím, giảm thiểu các vòng tròn gây mất tập trung cho người dùng chuột đồng thời hỗ trợ khả năng truy cập. :focus-within khớp với một vùng chứa khi bất kỳ phần tử con nào có tiêu điểm, cho phép tô sáng theo nhóm cho các thành phần như trường biểu mẫu. :target khớp với phần tử được tham chiếu bởi đoạn URL, cho phép bỏ qua liên kết và điều hướng trong trang mà không cần tập lệnh. Kết hợp một cách chu đáo, chúng cải thiện khả năng định hướng, giảm tải nhận thức và hỗ trợ quy trình làm việc hiệu quả bằng bàn phím.

Trả lời kèm ví dụ

:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
.field:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 30%, transparent); }
:target { scroll-margin-top: 6rem; }

28) Những lợi ích và bất lợi của content-visibility và ngăn chặn CSS trên các tài liệu lớn?

content-visibility: auto hoãn công việc kết xuất các thành phần ngoài màn hình cho đến khi chúng ở gần khung nhìn, giúp giảm đáng kể chi phí kết xuất ban đầu trên các nguồn cấp dữ liệu dài. Ngăn chặn bổ sung ( contain: layout paint style ) hạn chế tác động của một cây con lên phần còn lại của trang, thu hẹp phạm vi reflow và tăng tốc độ cập nhật lặp lại. Lợi ích là cải thiện khả năng phản hồi và giảm sử dụng bộ nhớ; nhược điểm bao gồm các hiệu ứng bật lên tiềm ẩn nếu kích thước nội tại không xác định và độ phức tạp khi JavaKịch bản phải đo kích thước. Giảm thiểu bằng cách cung cấp contain-intrinsic-size và chỉ đo khi cần thiết.

Trả lời kèm ví dụ

.feed-item{
	content-visibility: auto;
	contain-intrinsic-size: 600px 400px; /* reserve space to prevent layout shift */
	contain: layout paint style;
}

29) Làm thế nào để xây dựng một lưới phản hồi với các điểm dừng tối thiểu bằng cách sử dụng minmax() và auto-fit/auto-fill?

Có thể tạo ra bố cục linh hoạt bằng cách xác định các đường ray linh hoạt có thể mở rộng đến độ rộng tối đa rồi tự động bao quanh. repeat(auto-fit, minmax(min, 1fr)) Tạo nhiều cột tùy ý, thu gọn các track trống để tránh khoảng trống khó xử lý. Điều này giúp giảm sự phụ thuộc vào các điểm ngắt rõ ràng, đồng thời vẫn giữ được mật độ hài hòa trên các kích thước màn hình. Phương pháp này lý tưởng cho thư viện ảnh, thẻ và danh sách sản phẩm. Cung cấp số lượng tối thiểu thoải mái (ví dụ: 16rem ) và dựa vào khoảng cách để duy trì nhịp điệu.

Trả lời kèm ví dụ

.gallery{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

30) Những yếu tố nào quyết định thời điểm lựa chọn gap so với khoảng cách giữa các mục?

gap là khoảng cách nhận biết luồng hoạt động gốc với Flexbox và Grid, áp dụng phân tách đối xứng mà không có trường hợp biên bị thu hẹp. Nó lý tưởng cho trong thành phần khoảng cách vì nó không ảnh hưởng đến sự căn chỉnh con đầu tiên/cuối cùng hoặc yêu cầu các thao tác định hướng trong bố cục từ phải sang trái. Lề được ưu tiên cho ngoài Khoảng cách là một phần của API công khai của thành phần hoặc khi khoảng cách phải tương tác với các ngữ cảnh không phải Flex/Grid. Hãy lựa chọn dựa trên phạm vi, quyền sở hữu và ngữ nghĩa bố cục để tránh chồng chéo bất ngờ và giảm thiểu các quy tắc ghi đè.

Sự khác biệt (bảng so sánh)

Tiêu chí gap Lợi nhuận
Phạm vi Bên trong vùng chứa bố cục Bên ngoài giữa anh chị em ruột và hàng xóm
Tính định hướng Hợp lý và đối xứng Có thể yêu cầu điều chỉnh RTL
Hành vi sụp đổ Không áp dụng Có thể bị sụp đổ biên độ
Sử dụng tốt nhất Khoảng cách con Flex/Grid Khoảng cách bên ngoài của thành phần và hợp đồng bố trí

Trả lời kèm ví dụ

.toolbar{ display:flex; gap:.5rem; } /* internal spacing */
.card{ margin-block: 1rem; } /* external spacing contract */

31) Những bất lợi nào đi kèm với việc dựa vào !importantvà những giải pháp thay thế an toàn hơn là gì?

Quá lạm dụng !important bỏ qua vòng đời tự nhiên của chuỗi, vốn làm lu mờ ý định, chặn các ghi đè hợp lệ và buộc những người đóng góp trong tương lai phải tăng cường tính đặc thù hơn nữa. Nó cũng làm suy yếu khả năng kiểm thử vì các quy tắc trở nên miễn nhiễm với việc sắp xếp và @layer chiến lược. Giải pháp thay thế chuyên nghiệp là thiết kế các đường dẫn ghi đè có thể dự đoán được: giảm độ đặc hiệu của bộ chọn, đặt các chính sách vào lớp tiện ích chuyên dụng hoặc sắp xếp lại các nguồn với @layer thay vì biến những tuyên bố thành vũ khí. Dự trữ !important đối với các trường hợp do người dùng cố ý điều khiển như các tiện ích có độ tương phản cao hoặc khả năng hiển thị bắt buộc đóng vai trò là lối thoát được ghi chép lại.

Trả lời kèm ví dụ

/* Deliberate, documented utility only */
@layer utilities {
	.sr-only { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; }
}

/* Prefer layer order instead of !important */
@layer base, components, utilities;
@layer utilities { .hidden { display:none; } }

32) Nên tránh những loại bộ chọn nào để đảm bảo hiệu suất hoặc khả năng bảo trì và tại sao?

Các bộ chọn liên kết chặt chẽ với độ sâu tài liệu hoặc các thuộc tính trên toàn bộ DOM rất nguy hiểm. Các chuỗi con cháu dài làm tăng chi phí khớp lệnh và tạo ra các phụ thuộc dễ bị phá vỡ vào mã đánh dấu. Các bộ chọn thuộc tính rộng như [class*="btn"] or [data-*] không có phạm vi có thể quét các cây con lớn. Các bộ chọn quá đủ điều kiện như ul.nav > li > a.link giảm khả năng tái sử dụng và làm phức tạp việc ghi đè. Một cách tiếp cận dễ bảo trì ưu tiên các hook lớp đơn, các thuộc tính trạng thái với các hợp đồng rõ ràng (ví dụ: [data-state="open"] ), và các mối quan hệ ngắn ( > , + ) bên trong ranh giới thành phần. Điều này cải thiện khả năng đọc, giảm xung đột tầng và tăng tốc quá trình tái cấu trúc.

Trả lời kèm ví dụ

/* Fragile and slow */
.main .sidebar .list .item > a[href*="/products"] { ... }

/* Resilient */
.nav { display:flex; gap:.5rem; }
.nav__link { ... }
[data-state="open"] .nav__link--active { text-decoration: underline; }

33) Khi nào bạn nên chọn @layer tiện ích so với các biến thể thành phần và lợi ích là gì?

Tiện ích thể hiện điều chỉnh một lần chẳng hạn như khoảng cách, hiển thị hoặc căn chỉnh sẽ ghi đè mà không làm tăng tính đặc hiệu. Các biến thể thành phần thể hiện trạng thái hoặc chế độ lặp lại thuộc về API thành phần. Các tiện ích nổi bật trong quá trình biên soạn mã ứng dụng vì chúng có thể dự đoán được và không yêu cầu chỉnh sửa bảng định kiểu của thành phần. Các biến thể (variable) tỏ ra vượt trội hơn khi cùng một trạng thái lặp lại và phải được ghi chép và kiểm tra như một phần của hệ thống thiết kế. Một kiến ​​trúc cân bằng đặt các tiện ích ở cuối thứ tự lớp và giữ cho các biến thể thành phần có độ đặc hiệu thấp trong lớp thành phần.

Trả lời kèm ví dụ

@layer reset, base, components, utilities;

/* Variant: part of the API */
@layer components {
	.btn[data-variant="primary"] { background: var(--brand-600); color: #fff; }
}

/* Utility: composition escape hatch */
@layer utilities {
	.mt-4 { margin-block-start: 1rem; }
	.inline { display:inline; }
}

34) Grid có thể thay thế toàn bộ việc sử dụng Flexbox hay có lý do gì khác biệt để giữ cả hai?

Grid và Flexbox giải quyết các vấn đề trực giao. Grid cung cấp khả năng điều khiển hai chiều với các định nghĩa track rõ ràng, giúp các khung trang, bảng điều khiển và thư viện thẻ phức tạp trở nên đơn giản. Flexbox vượt trội về khả năng phân phối trên một trục, tự động điều chỉnh kích thước theo trục chính và căn chỉnh trong hàng hoặc cột, lý tưởng cho các thanh công cụ, menu và chip. Việc cố gắng áp dụng Grid ở mọi nơi sẽ làm mất đi tính công thái học của việc căn chỉnh, trong khi việc áp dụng Flexbox cho bố cục macro sẽ tạo ra các lớp bao bọc dễ vỡ. Các hệ thống trưởng thành thường kết hợp cả hai, đôi khi trong cùng một thành phần, bằng cách chọn engine có đặc điểm phù hợp với vấn đề.

Sự khác biệt (bảng so sánh)

Tiêu chí lưới hộp flex
kích thước Đường ray hai chiều Dòng chảy một chiều
Sức mạnh Các khu vực rõ ràng, khoảng trống, lưới phụ Phân phối, sắp xếp, sắp xếp lại
Sử dụng tốt nhất Khung trang, bảng điều khiển Thanh công cụ, điều hướng, danh sách chip

Trả lời kèm ví dụ

.frame { display:grid; grid-template-columns: 1fr 3fr; gap: 1rem; }
.toolbar { display:flex; align-items:center; gap:.5rem; }

35) Những lợi ích và bất lợi của việc sử dụng là gì? aspect-ratio so với các thủ thuật đệm?

aspect-ratio cung cấp một phương pháp khai báo, tự ghi chú để duy trì hình dạng cho thẻ, phương tiện và hình thu nhỏ mà không cần các phần tử wrapper hoặc các thủ thuật phần tử giả. Nó tích hợp gọn gàng với các đối tượng lắp ghép và hoạt động theo cách có thể dự đoán được trong các bố cục Grid và Flex. Nhược điểm chính là các khoảng trống trình duyệt cũ trong các môi trường cũ và cần phải xem xét lại các thủ thuật CSS dựa trên thủ thuật trước đây. Các thủ thuật padding-top vẫn là một giải pháp dự phòng cho các công cụ rất cũ nhưng làm tăng độ phức tạp của DOM và làm giảm tính rõ ràng. Ưu tiên aspect-ratio để bảo trì và cổng nó với @supports chỉ khi phạm vi bảo hiểm kế thừa được yêu cầu theo hợp đồng.

Trả lời kèm ví dụ

.thumb { aspect-ratio: 16 / 9; object-fit: cover; }
@supports not (aspect-ratio: 1) {
    .thumb-wrap { position: relative; }
    .thumb-wrap::before { content:""; display:block; padding-top:56.25%; }
    .thumb { position:absolute; inset:0; }
}

36) Bạn sẽ xây dựng tiêu đề cố định có khả năng phục hồi, tôn trọng các khu vực an toàn và chế độ xem di động như thế nào?

Một tiêu đề đàn hồi cân bằng position: sticky cho các neo cấp phần với position: fixed chỉ khi thiết kế yêu cầu tính bền vững toàn cục. Các vùng chèn an toàn ngăn ngừa sự chồng chéo với giao diện người dùng hệ thống trên các thiết bị có khía và các đơn vị khung nhìn hiện đại như dvh tránh bị sập khi Chrome trình duyệt hiển thị hoặc ẩn. Chiến lược này bao gồm việc chỉ định ngữ cảnh xếp chồng rõ ràng, dành không gian để ngăn chặn việc thay đổi bố cục và cung cấp tùy chọn chuyển động cho các hiệu ứng đầu vào. Việc kiểm tra trên nhiều bàn phím và theo hướng ngang là rất quan trọng, vì bàn phím ảo có thể che khuất các thành phần cố định nếu không được xử lý.

Trả lời kèm ví dụ

.header {
	position: sticky;
	top: 0;
	padding-top: env(safe-area-inset-top);
	background: var(--bg);
	z-index: 100;
	box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
main { min-height: 100dvh; scroll-padding-top: 4rem; }

Những cân nhắc (bảng nhanh)

Hệ số Khuyến nghị
Khu vực an toàn Sử dụng env(safe-area-inset-*)
xem cổng Thích hơn dvh cho các vùng có chiều cao đầy đủ
chỉ số Z Tạo một tỷ lệ phủ và ghi lại nó

37) Sự khác biệt giữa tỷ lệ mật độ và tỷ lệ kích thước trong các thành phần là gì và khi nào nên sử dụng từng tỷ lệ?

Tỷ lệ mật độ thay đổi khoảng cách, khoảng trống và chiều cao dòng trong khi vẫn giữ nguyên kích thước phông chữ, do đó tạo ra các biến thể nhỏ gọn, thoải mái hoặc rộng rãi mà không làm thay đổi hệ thống phân cấp kiểu chữ. Tỷ lệ kích thước thay đổi bản thân tỷ lệ chữ, chuyển đổi tiêu đề, nội dung văn bản và điều khiển sang các bước lớn hơn hoặc nhỏ hơn. Sử dụng tính năng chia tỷ lệ mật độ cho giao diện người dùng doanh nghiệp, nơi mật độ thông tin thay đổi theo tác vụ; sử dụng tính năng chia tỷ lệ kích thước để đáp ứng khoảng cách thiết bị, nhu cầu trợ năng hoặc yêu cầu của thương hiệu. Xử lý cả hai như các mã thông báo với phạm vi được ghi lại để đảm bảo tính nhất quán trên các bề mặt.

Trả lời kèm ví dụ

/* Density */
[data-density="compact"] .btn { padding-block: .25rem; gap: .25rem; }
/* Size (type) */
:root { --font-0: 1rem; --font-1: 1.125rem; }
[data-size="lg"] { --font-0: 1.125rem; --font-1: 1.25rem; }

38) Những bất lợi nào phát sinh từ việc thiết lập lại toàn cục nặng nề và đâu là giải pháp thay thế an toàn hơn?

Việc thiết lập lại mạnh mẽ có thể vô tình xóa bỏ các mặc định có lợi như phác thảo tiêu điểm, ngữ nghĩa danh sách và khả năng điều khiển biểu mẫu. Điều này gây hại cho khả năng truy cập và buộc phải triển khai lại các hành vi gốc một cách dư thừa. Các giải pháp thay thế an toàn hơn bao gồm chuẩn hóa hiện đại để chế ngự những sự bất nhất trong khi vẫn bảo toàn ngữ nghĩa, và thiết lập lại có phạm vi được áp dụng thông qua @layer đối với các thành phần thực sự cần một bảng trắng. Ghi lại chính sách đặt lại, khôi phục rõ ràng các tính năng quan trọng như :focus-visiblevà tránh việc đưa các phần tử về 0 mà các giá trị mặc định của chúng truyền đạt ý nghĩa, chẳng hạn như b, strongvà em.

Trả lời kèm ví dụ

@layer reset {
	*,*::before,*::after { box-sizing: border-box; }
	:where(:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
}
/* Do not remove list semantics unless intentionally restyled */

39) Làm thế nào để gỡ lỗi các vấn đề phức tạp một cách hiệu quả bằng DevTools và các tính năng CSS hiện đại?

Gỡ lỗi hiệu quả bắt đầu bằng việc cô lập phần tử trong DevTools và kiểm tra tính toán để xem các giá trị thuộc tính cuối cùng và nguồn của chúng. Tiếp theo, hãy kiểm tra Phong cách thứ tự và tính cụ thể của quy tắc pane để hiểu lý do tại sao một quy tắc chiến thắng, chú ý đến @layer thứ tự và liệu việc xếp chồng hoặc chứa ngữ cảnh mới có gây trở ngại hay không. TogglCác quy tắc để xác thực các giả thuyết và sử dụng chế độ xem lớp xếp tầng (nếu có) để trực quan hóa thứ tự ưu tiên của các lớp. Thêm phác thảo gỡ lỗi tạm thời và xem xét các cờ tính năng thông qua @supports để phân chia vấn đề bằng cách vô hiệu hóa các đường dẫn nâng cao một cách có chọn lọc.

Trả lời kèm ví dụ

/* Debug helper */
*{ outline: 1px solid rgba(0,128,255,.15); outline-offset:-1px; }

/* Bisect: disable advanced path */
@supports (container-name: card) {
/* move experimental styles here; toggle block in DevTools */
}

40) Kiểu in và truy vấn phương tiện phù hợp như thế nào trong quy trình CSS chuyên nghiệp và ưu điểm cũng như nhược điểm của chúng là gì?

Phong cách in ấn vẫn rất cần thiết cho các sản phẩm, hóa đơn và tài liệu pháp lý có nhiều tài liệu. Một quy trình chuyên nghiệp bao gồm một @media print Phần này loại bỏ các phần không cần thiết, thiết lập mức độ dễ đọc và đảm bảo việc sử dụng màu sắc dễ đọc trên các thiết bị thang độ xám. Ưu điểm bao gồm chất lượng lưu trữ được cải thiện và sự tin tưởng của người dùng; nhược điểm bao gồm việc bảo trì bổ sung và nhu cầu kiểm tra nội dung thường tương tác. Giữ nguyên quy tắc in dựa trên mã thông báo, tránh định vị tuyệt đối ngoại trừ phần đầu trang và chân trang, đồng thời kiểm tra các trình duyệt và trình tạo PDF phổ biến để ngăn ngừa sự bất thường trong phân trang.

Trả lời kèm ví dụ

@media print {
	nav, .ads, .controls { display: none !important; }
	article { max-width: 80ch; margin: 0 auto; font-size: 11pt; line-height: 1.4; }
	a[href]::after { content: " (" attr(href) ")"; }
	img { break-inside: avoid; }
}

41) Chiến lược nào tạo ra một hệ thống lớp phủ có thể dự đoán được và bạn nên quản lý nó như thế nào? z-index tỉ lệ?

Một hệ thống lớp phủ có thể dự đoán được sẽ coi việc phân lớp như một hợp đồng được ghi chép lại chứ không phải là những con số tùy ý. Hãy xác định một thang đo nhỏ, có tên (ví dụ: base, raised, overlay, modal, toast) và gán các thành phần cho các tầng thông qua các biến hoặc lớp tiện ích. Chỉ giữ mỗi lớp phủ trong ngữ cảnh xếp chồng riêng của nó khi cần cô lập, và tránh các ngữ cảnh ngẫu nhiên từ transform or filter trừ khi cố ý. Ưu điểm chính là các kỹ sư có thể lý giải xung đột mà không cần thử nghiệm; nhược điểm là hệ thống phân loại ban đầu khá khiêm tốn. Hãy kết hợp thang đo với các mã thông báo thiết kế và kiểm tra lỗi để tìm các giá trị nằm ngoài phạm vi nhằm tránh sai lệch.

Tỷ lệ chồng chéo (bảng so sánh)

Tầng Mục đích Điển hình z-index Chú ý
Căn cứ Nội dung thường xuyên 0 Tránh tạo ra bối cảnh mới
Lớn lên Tiêu đề dính, ngăn kéo 10-100 Giữ sự nhất quán trong vỏ
Che Phông nền, màn che 900 Tấm chắn nhấp toàn trang
Modal Hộp thoại, bộ chọn 1000 Chức vụ fixed; bẫy tập trung
Bánh mì nướng Thông báo 1100 Không chặn; xóa theo thời gian

Trả lời kèm ví dụ

:root{
	--z-base: 0; --z-raised: 20; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100;
}
.header{ position: sticky; top: 0; z-index: var(--z-raised); }
.modal{ position: fixed; inset: 0; z-index: var(--z-modal); }
.scrim{ position: fixed; inset: 0; z-index: var(--z-overlay); }

42) Làm thế nào để tạo kiểu cho các điều khiển dạng gốc một cách có trách nhiệm và lợi ích cũng như bất lợi của các kỹ thuật phổ biến là gì?

Kiểu dáng biểu mẫu có trách nhiệm tôn trọng ngữ nghĩa đồng thời cải thiện khả năng tương thích. Bắt đầu bằng cách bảo toàn hành vi của bàn phím và trình đọc màn hình, sau đó cải tiến lớp: sử dụng accent-color để kiểm tra các đầu vào phù hợp với thương hiệu mà không cần thay thế các điều khiển; áp dụng appearance một cách tiết kiệm để chuẩn hóa các giao diện người dùng không nhất quán; và nhắm mục tiêu kiểm soát tải lên thông qua ::file-selector-button. Lợi ích là có thể tiếp cận, kiểm soát nhất quán với mức tối thiểu JavaScript; nhược điểm bao gồm các sắc thái khác nhau trên nhiều trình duyệt và khả năng thay thế toàn bộ các điều khiển. Ghi lại trạng thái tiêu điểm, trạng thái lỗi và trạng thái bị vô hiệu hóa như một phần của API thành phần để tránh ghi đè tùy ý.

Trả lời kèm ví dụ

/* Brand the native checkbox/radio without replacing it */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand, #4b6fff); }

/* Normalize look only when truly necessary */
select, input, textarea { appearance: none; }

/* File input affordance */
input[type="file"]::file-selector-button{
padding: .5rem .75rem; border-radius: .375rem; background: var(--brand);
color: #fff; border: 0; cursor: pointer;
}

43) Có những chiến lược nào cho CSS quan trọng và phân tách mã, và ưu điểm và nhược điểm của chúng là gì?

Critical CSS cải thiện Largest Contentful Paint bằng cách nhúng các quy tắc cần thiết cho nội dung hiển thị trên màn hình đầu tiên, đồng thời trì hoãn phần còn lại. Phân tách mã sẽ chia bảng định kiểu theo tuyến đường, tính năng hoặc thành phần. Một phương pháp được đo lường kết hợp một lát cắt quan trọng nhỏ với các gói bên ngoài được phân lớp để dễ bảo trì. Ưu điểm là tải được nhận biết nhanh hơn và tải trọng ban đầu nhỏ hơn; nhược điểm bao gồm độ phức tạp của quá trình xây dựng và nguy cơ trùng lặp nếu không được loại bỏ trùng lặp tại thời điểm biên dịch. Ưu tiên phân lớp xác định ( @layer ) và quy ước đặt tên để giữ cho các ghi đè ổn định trên các khối.

Chiến lược tải (bảng so sánh)

Chiến lược Các lợi ích Nhược điểm Sử dụng điển hình
Nội tuyến quan trọng <style> LCP nhanh hơn; không yêu cầu Khó bảo trì hơn Vỏ trên nếp gấp
CSS bên ngoài không đồng bộ Có thể lưu trữ đệm; mô-đun Rủi ro về nội dung không đúng định dạng Tuyến ứng dụng
Gói chia tách phương tiện Tải có điều kiện Độ phức tạp; chi phí thử nghiệm In, dpi cao, chế độ tối

Trả lời kèm ví dụ

<link rel="preload" href="/vi/css/app.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/vi/css/app.css"></noscript>
<style>@layer base{ /* small critical rules */ }</style>

44) Tùy chọn màu CSS hiện đại là gì ( color-mix, cú pháp màu tương đối, không gian nhận thức) và khi nào nên sử dụng chúng?

CSS hiện đại hỗ trợ việc soạn thảo màu sắc khi chạy với color-mix() và điều chỉnh các thành phần thông qua cú pháp màu tương đối, cho phép tạo chủ đề động mà không cần biên dịch trước. Các không gian màu nhận thức như OKLCH hoặc Lab cung cấp độ sáng và sắc độ đồng đều hơn so với sRGB, giúp các đường dốc và trạng thái (di chuột, tắt) nhất quán hơn. Lợi ích chính là độ tương phản và sắc độ có thể dự đoán được giữa các chủ đề; nhược điểm bao gồm hỗ trợ một phần trong các công cụ cũ hơn và cần xác minh tính tuân thủ thương hiệu. Sử dụng tính năng trộn thời gian chạy cho các trạng thái di chuột hoặc nhấn mạnh và lưu trữ các mã thông báo chuẩn trong không gian nhận thức nếu có thể, chuyển sang sRGB khi cần thiết.

Trả lời kèm ví dụ

:root{
	--brand: oklch(60% .15 260);
	--brand-hover: color-mix(in oklch, var(--brand), black 12%);
	--muted: color-mix(in oklch, var(--brand), white 70%);
}
a{ color: var(--brand); }
a:hover{ color: var(--brand-hover); }
.badge{ background: var(--muted); }

45) Kỹ thuật nào tạo ra kiểu chữ linh hoạt, nhạy bén và nhịp điệu theo chiều dọc?

Kiểu chữ linh hoạt cân bằng giữa độ dài dòng dễ đọc, kích thước có thể thay đổi và khoảng cách nhất quán. Hãy bắt đầu với cỡ chữ cơ bản phù hợp với sở thích của người dùng, sau đó sử dụng clamp() để xác định các bước chất lỏng bị giới hạn bởi các giới hạn hợp lý. Thiết lập nhịp điệu theo chiều dọc với lh hoặc chiều cao dòng gốc cố định và giới hạn các đoạn văn thành ch-biện pháp dựa trên. text-wrap: balance có thể cải thiện tiêu đề bằng cách phân bổ các ngắt đều hơn, trong khi hyphens: auto và siêu dữ liệu ngôn ngữ giúp giảm thiểu các cạnh không liền mạch. Ưu điểm là khả năng đọc và truy cập trên nhiều khung nhìn; nhược điểm bao gồm việc cần phải kiểm tra các chữ ghép và cân bằng hành vi với kiểu chữ thương hiệu.

Trả lời kèm ví dụ

:root{ --step-0: clamp(1rem, 1.2vw + .9rem, 1.125rem); line-height: 1.5; }
h1{ font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); text-wrap: balance; }
.prose{ max-width: 65ch; }
p{ margin-block: 1lh; hyphens: auto; }

46) Tính năng cuộn bắt và đệm cuộn/lề phối hợp với nhau như thế nào để cải thiện khả năng điều hướng?

Việc cuộn nhanh tạo ra các vị trí nghỉ xác định cho các vòng quay và bố cục phân đoạn, trong khi scroll-padding và scroll-margin đảm bảo các mục tiêu được căn chỉnh chính xác bên dưới các tiêu đề cố định. Sử dụng scroll-snap-type trên thùng chứa và scroll-snap-align trên các mục để hướng dẫn hành vi. Các lợi ích bao gồm cảm giác nhất quán và điều hướng bàn phím được cải thiện với tabindex và neo; nhược điểm là khả năng gây khó chịu nếu các điểm bắt quá mạnh hoặc không được điều chỉnh theo xung nhịp trên thiết bị cảm ứng. Cung cấp vùng đệm logic cho phần trên cùng của khung nhìn để tránh nội dung bị ẩn dưới giao diện người dùng cố định, và xác thực bằng tương tác bàn phím và con trỏ.

Trả lời kèm ví dụ

.carousel{ display:flex; overflow:auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; }
.slide{ flex: 0 0 80%; scroll-snap-align: start; margin-inline: .5rem; }
:target{ scroll-margin-top: 5rem; } /* sticky header offset */

47) Các mẫu CSS nào làm cho chú giải công cụ và cửa sổ bật lên trở nên linh hoạt và khi nào thì JavaVẫn cần kịch bản chứ?

CSS có thể xử lý các chú giải công cụ đơn giản, có hướng bằng cách sử dụng position, các bù trừ logic và ::after mũi tên, được kích hoạt bởi :hover và :focus-visible. Sử dụng inset và biến đổi để đặt chính xác và @layer Tiện ích cho việc sắp xếp theo thứ tự z. Đối với các popover phức tạp—phát hiện va chạm, định vị lại mũi tên hoặc bẫy tiêu điểm—JavaScript vẫn cần thiết, nhưng CSS vẫn định nghĩa các mã thông báo trình bày. Ưu điểm của các mẫu CSS-first là chi phí thấp và giảm thiểu sự suy giảm hiệu năng; nhược điểm là khả năng thích ứng hạn chế với các cạnh của khung nhìn không có logic. Luôn đảm bảo chú giải công cụ có thể truy cập được bằng bàn phím và không che khuất các điều khiển thiết yếu.

Trả lời kèm ví dụ

.tip{ position: relative; }
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble { opacity:1; transform: translateY(-4px); }
.tip__bubble{
	position:absolute; inset-block-end: 100%; inset-inline-start: 0;
	opacity:0; transform: translateY(0); transition: transform .15s, opacity .15s;
	z-index: var(--z-raised);
}

48) Làm thế nào để thiết kế các bảng dữ liệu dễ đọc, có khả năng phản hồi mà không cần phải viết lại phức tạp?

Bảng đáp ứng bảo toàn ngữ nghĩa đồng thời cung cấp chế độ xem hữu ích trên màn hình hẹp. Hãy bắt đầu bằng cách cuộn ngang bên trong một wrapper bị hạn chế để tránh việc sắp xếp lại các tiêu đề và mối quan hệ. Đối với dữ liệu khóa-giá trị, hãy chuyển sang bố cục xếp chồng bằng cách sử dụng display: grid với các vùng được đặt tên, hoặc thêm các điều khiển hiển thị cột để tiết lộ dần dần. Ưu điểm bao gồm khả năng truy cập được bảo toàn và bảo trì đơn giản; nhược điểm là không gian màn hình hạn chế và cần phải định dạng tràn cẩn thận. Ghi lại các cột nào là cần thiết tại mỗi điểm ngắt và ưu tiên text-overflow với chú giải công cụ cho các giá trị dài.

Các phương pháp tiếp cận (bảng so sánh)

Kỹ thuật Các lợi ích Nhược điểm tốt nhất cho
Wrapper cuộn ngang Bảo tồn ngữ nghĩa Yêu cầu kiểu tràn Bàn rộng, dày đặc
Bố cục khóa-giá trị xếp chồng Rất dễ đọc Mất các tính năng bảng gốc Thông số kỹ thuật di động, hóa đơn
Chuyển đổi cột Mật độ được điều chỉnh Yêu cầu hệ thống dây JS Bảng điều khiển quản trị

Trả lời kèm ví dụ

.table-wrap{ overflow:auto; max-inline-size:100%; }
.table{ min-inline-size: 52rem; border-collapse: collapse; }
.table th, .table td{ padding:.5rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

49) Khi nào chế độ hòa trộn, bộ lọc và mặt nạ mang lại giá trị thực tế và cần đánh đổi những gì?

Chế độ hòa trộn ( mix-blend-mode, background-blend-mode ), bộ lọc ( blur, grayscale, drop-shadow ), và mặt nạ ( mask-image, mask-composite ) cho phép các hiệu ứng như hiệu ứng thủy tinh, hiệu ứng hai tông màu và hiệu ứng hiển thị không theo hình chữ nhật mà không cần chỉnh sửa raster. Chúng nổi bật trên các bề mặt tiếp thị và các điểm nhấn dữ liệu hình ảnh, nơi mà chỉ đạo nghệ thuật là yếu tố quan trọng. Ưu điểm là giảm thiểu sự lan tràn của tài nguyên và tạo chủ đề động; nhược điểm bao gồm chi phí hiệu năng trên các thiết bị công suất thấp và khả năng truy cập có thể xảy ra nếu độ tương phản bị giảm. Hãy dành các hiệu ứng mạnh cho các bề mặt không quan trọng, kiểm tra tác động của GPU và cung cấp các phương án dự phòng giảm thiểu được ưu tiên.

Trả lời kèm ví dụ

.hero::before{
	content:""; position:absolute; inset:0;
	background: radial-gradient(circle at 30% 20%, #fff3, transparent 60%);
	mix-blend-mode: screen; filter: blur(20px);
}

50) Vai trò của bạn là gì? color-scheme và giao diện hệ thống có tạo nên phong cách thống nhất trên các trình duyệt không?

color-scheme Thuộc tính này khai báo bảng màu sáng và tối mong muốn để các thành phần tác nhân người dùng (điều khiển biểu mẫu, thanh cuộn trong một số công cụ) hiển thị với màu nền và màu chữ phù hợp. Điều này giúp giảm nhu cầu sử dụng giao diện điều khiển tùy chỉnh và ngăn ngừa hiện tượng không khớp màu gây khó chịu khi chế độ tối đang hoạt động. Ưu điểm là tính nhất quán với mã nguồn tối thiểu; nhược điểm là tính đồng nhất giữa các công cụ đang phát triển, và việc xây dựng thương hiệu tùy chỉnh vẫn có thể cần phải ghi đè. Kết hợp color-scheme với các thuộc tính tùy chỉnh cho mã thông báo và cho phép người dùng ghi đè rõ ràng để tránh việc người dùng bị mắc kẹt trong tùy chọn hệ thống mà họ không chọn.

Trả lời kèm ví dụ

:root{ color-scheme: light dark; }
body{ background: var(--bg); color: var(--fg); }
/* Controls inherit appropriate UA styling under the declared schemes */

🔍 Những câu hỏi phỏng vấn CSS hàng đầu với các tình huống thực tế và câu trả lời chiến lược

1) Sự khác biệt giữa inline, inline-blockvà block các thành phần trong CSS?

Mong đợi từ ứng viên: Người phỏng vấn muốn kiểm tra sự hiểu biết của bạn về các thuộc tính hiển thị phần tử và cách chúng ảnh hưởng đến bố cục và mô hình hộp.

Câu trả lời ví dụ:
“Trong vai trò trước đây của mình, tôi thường xử lý các vấn đề về sự không nhất quán trong bố cục do hiểu sai các loại hiển thị. A block phần tử chiếm toàn bộ chiều rộng có sẵn và bắt đầu trên một dòng mới. Một inline phần tử chỉ chiếm chiều rộng bằng nội dung của nó và không bắt đầu trên một dòng mới. Một inline-block Phần tử cho phép thiết lập chiều rộng và chiều cao như một phần tử khối nhưng vẫn chạy nội tuyến như văn bản. Hiểu được những điểm khác biệt này đã giúp tôi tinh chỉnh các thiết kế đáp ứng và duy trì sự nhất quán.”

2) Bạn tiếp cận việc gỡ lỗi các vấn đề CSS trong các bố cục phức tạp như thế nào?

Mong đợi từ ứng viên: Người phỏng vấn muốn biết cách tiếp cận có hệ thống của bạn trong việc xác định và sửa lỗi bố cục.

Câu trả lời ví dụ:
“Ở vị trí trước đây, tôi đã áp dụng phương pháp gỡ lỗi CSS có cấu trúc. Tôi sử dụng các công cụ phát triển trình duyệt để kiểm tra các kiểu dáng và mô hình hộp được tính toán, tách biệt các bộ chọn xung đột và vô hiệu hóa các quy tắc từng bước. Tôi cũng sử dụng các tiền tố dành riêng cho trình duyệt và thử nghiệm trên nhiều thiết bị. Quy trình gỡ lỗi có phương pháp này đã giảm đáng kể các vấn đề về bố cục front-end.”

3) Bạn có thể giải thích cách hoạt động của tầng CSS và tính đặc hiệu không?

Mong đợi từ ứng viên: Người phỏng vấn muốn đánh giá kiến ​​thức của bạn về cách trình duyệt xác định quy tắc CSS nào được ưu tiên.

Câu trả lời ví dụ:
“CSS cascade là quy trình xác định các quy tắc nào được áp dụng khi nhiều bộ chọn nhắm đến cùng một phần tử. Độ đặc hiệu quyết định mức độ ưu tiên, với các kiểu nội tuyến là cao nhất, tiếp theo là ID, sau đó là lớp, lớp giả và cuối cùng là phần tử. Thứ tự mã nguồn cũng quan trọng nếu độ đặc hiệu bằng nhau. Hiểu được điều này giúp tránh ghi đè kiểu vô ý và thúc đẩy mã sạch hơn.”

4) Mô tả cách bạn xử lý thiết kế đáp ứng mà không phụ thuộc nhiều vào các khuôn khổ.

Mong đợi từ ứng viên: Người phỏng vấn đang kiểm tra sự hiểu biết của bạn về tính linh hoạt của CSS và cách sử dụng truy vấn phương tiện.

Câu trả lời ví dụ:
“Trong vai trò cuối cùng của mình, tôi đã thiết kế các bố cục đáp ứng bằng cách sử dụng lưới chất lỏng, các đơn vị tương đối như em và remvà truy vấn phương tiện để điều chỉnh bố cục cho phù hợp với các độ rộng màn hình khác nhau. Tôi cũng sử dụng CSS Grid và Flexbox để tạo bố cục linh hoạt. Cách tiếp cận này tránh được sự phụ thuộc không cần thiết vào các framework, đồng thời vẫn đảm bảo thiết kế có khả năng mở rộng và bảo trì.”

5) Bạn sẽ tối ưu hóa CSS như thế nào để tăng hiệu suất và khả năng bảo trì?

Mong đợi từ ứng viên: Người phỏng vấn đang đánh giá nhận thức của bạn về các phương pháp hay nhất để mở rộng khả năng và hiệu suất.

Câu trả lời ví dụ:
“Ở công việc trước đây, tôi đã tối ưu hóa CSS bằng cách loại bỏ các kiểu không sử dụng, kết hợp các tệp để giảm yêu cầu HTTP và triển khai các biến CSS để dễ bảo trì. Tôi cũng áp dụng quy ước đặt tên BEM để giữ cho mã được tổ chức và dễ mở rộng. Ngoài ra, tôi còn sử dụng các công cụ hiện đại như PostCSS và thu nhỏ để cải thiện hiệu suất.”

6) Hãy kể cho tôi nghe về lần bạn phải hợp tác với các nhà phát triển hoặc nhà thiết kế để giải quyết xung đột về kiểu dáng.

Mong đợi từ ứng viên: Người phỏng vấn muốn thấy kỹ năng làm việc nhóm và giao tiếp trong môi trường đa chức năng.

Câu trả lời ví dụ:
“Trong một dự án trước, đã nảy sinh xung đột giữa kỳ vọng thiết kế và việc triển khai biểu mẫu động của nhà phát triển. Tôi đã lên lịch đồng bộ nhanh với cả hai bên, trình bày vấn đề về hình ảnh bằng ảnh chụp màn hình và đề xuất điều chỉnh biến CSS để duy trì tính nhất quán của thiết kế. Sự hợp tác chủ động này đã đảm bảo kết quả được đồng bộ về mặt hình ảnh mà không ảnh hưởng đến hiệu suất.”

7) Bạn đã gặp phải những thách thức nào khi triển khai hoạt ảnh hoặc chuyển tiếp CSS và bạn đã vượt qua chúng như thế nào?

Mong đợi từ ứng viên: Người phỏng vấn muốn đánh giá sự hiểu biết của bạn về tối ưu hóa hiệu suất và hiển thị trình duyệt.

Câu trả lời ví dụ:
“Trong một dự án, hoạt ảnh gây ra hiện tượng giật do lỗi reflow. Tôi đã xác định được một số thuộc tính CSS như top và left đang kích hoạt tính toán lại bố cục. Tôi chuyển sang sử dụng transform và opacity, được tăng tốc bằng GPU, mang lại hiệu ứng chuyển cảnh mượt mà hơn. Tôi cũng tối ưu hóa thời lượng hoạt ảnh để tạo cảm giác tự nhiên.”

8) Bạn sẽ cấu trúc CSS như thế nào cho một ứng dụng quy mô lớn?

Mong đợi từ ứng viên: Người phỏng vấn muốn hiểu cách tiếp cận của bạn đối với tổ chức, khả năng mở rộng và khả năng bảo trì.

Câu trả lời ví dụ:
Tôi sẽ sử dụng kiến ​​trúc mô-đun như BEM, SMACSS hoặc CSS Modules để cấu trúc các kiểu một cách logic. Mỗi thành phần sẽ có các kiểu được giới hạn phạm vi riêng để tránh xung đột. Tôi cũng sẽ áp dụng hướng dẫn về kiểu dáng và quy ước đặt tên để duy trì tính nhất quán giữa các nhóm và ngăn ngừa sự phình to của CSS khi dự án phát triển.

9) Giả sử một khách hàng phàn nàn rằng bố cục trang bị hỏng trong Internet Explorer 11. Bạn sẽ thực hiện những bước nào để giải quyết vấn đề này?

Mong đợi từ ứng viên: Người phỏng vấn muốn kiểm tra khả năng thích ứng của bạn với các vấn đề của trình duyệt cũ.

Câu trả lời ví dụ:
“Trước tiên, tôi sẽ tái tạo sự cố bằng cùng phiên bản trình duyệt. Sau đó, tôi sẽ xác định các tính năng CSS không được hỗ trợ thông qua các công cụ phát triển trình duyệt và kiểm tra tính tương thích bằng các tài nguyên như MDN hoặc Can I Use. Sau đó, tôi sẽ triển khai các phương án dự phòng hoặc polyfill nếu cần. Tôi cũng sẽ ghi lại bản sửa lỗi để bảo trì trong tương lai.”

10) Làm thế nào để đảm bảo khả năng tương thích giữa các trình duyệt trong các dự án CSS của bạn?

Mong đợi từ ứng viên: Người phỏng vấn muốn xác nhận hiểu biết của bạn về các tiêu chuẩn thử nghiệm và khả năng tương thích.

Câu trả lời ví dụ:
“Tôi đảm bảo khả năng tương thích đa trình duyệt bằng cách kiểm tra sớm và thường xuyên trên các trình duyệt chính bằng các công cụ như BrowserStack. Tôi tuân thủ các tiêu chuẩn CSS và tránh các thuộc tính không chuẩn. Tôi cũng sử dụng PostCSS với Autoprefixer để tự động xử lý tiền tố nhà cung cấp. Việc xác thực và kiểm tra nhất quán trong quá trình phát triển giúp ngăn ngừa các sự cố nghiêm trọng sau khi ra mắt.”

Tóm tắt bài viết này với: