- Cascade trong CSS nghĩa là gì?
Cascade là thuật toán chọn ra giá trị thắng khi nhiều khai báo cùng nhắm vào một thuộc tính của một element. Thứ tự xét, từ trên xuống — dừng ngay khi phân định được: 1. Origin + !important: !important của user agent !important của…
- Inheritance trong CSS là gì?
Một số thuộc tính CSS tự truyền xuống element con, số còn lại thì không. Kế thừa Không kế thừa ------ color, font-, line-height, letter-spacing margin, padding, border, background text-align, visibility, cursor, list-style width, height, display, position Quy luật chung: thuộc tính về chữ thì…
- Đơn vị px, em, rem, %, vw, vh khác nhau?
Chia làm ba nhóm theo cái mà giá trị phụ thuộc vào. Đơn vị Neo vào Rủi ro --------- px không gì không co theo cỡ chữ người dùng đặt em font-size của element hiện tại nhân dồn khi lồng nhiều lớp rem font-size của…
- !important dùng khi nào? Tại sao nên tránh?
!important đưa một khai báo lên nhóm ưu tiên riêng, đứng trên mọi specificity trong cùng origin. Vì sao nên tránh: cách duy nhất để ghi đè một !important là một !important khác có specificity cao hơn. Trong một dự án đang chạy, việc đó…
- :has() selector là gì?
:has() là selector cha — chọn element dựa trên thứ nằm bên trong nó. Trước đây CSS không làm được việc này, phải nhờ JS gắn class. Specificity lấy theo selector mạnh nhất bên trong (giống :is()), không phải 0 như :where(). Hỗ trợ: Baseline…
- Combinator selectors (>, +, ~, space) khác nhau?
Bốn combinator mô tả quan hệ giữa hai element: Ký hiệu Tên Quan hệ --------- khoảng trắng descendant con cháu bất kỳ cấp child con trực tiếp + adjacent sibling anh em kế ngay sau ~ general sibling mọi anh em phía sau Dùng thực…
- :is(), :where(), :not() khác nhau?
- Box model gồm những gì?
Mỗi element là một hộp gồm bốn lớp, từ trong ra ngoài: content → padding → border → margin. Margin khác ba lớp còn lại ở ba điểm: nằm ngoài viền, luôn trong suốt (không nhận background), và gộp theo chiều dọc với margin liền…
- box-sizing: content-box vs border-box?
Khác nhau ở width đang đo cái gì. content-box border-box --------- width bao gồm chỉ content content + padding + border Thêm padding element phình ra content co lại Margin không tính trong cả hai không tính trong cả hai Dòng gần như mọi dự…
- Margin collapsing là gì?
Khi hai margin theo chiều dọc chạm nhau, browser gộp thành một, lấy giá trị lớn hơn chứ không cộng. Ba tình huống xảy ra: Không xảy ra với: margin ngang, flex item, grid item, element position: absolute/fixed, element tạo block formatting context (overflow: hidden,…
- Position property có những giá trị nào?
position quyết định element có nằm trong normal flow hay không, và top/right/bottom/left neo vào đâu. Giá trị Còn chiếm chỗ Neo theo --------- static có — relative có (chỗ cũ giữ nguyên) chính nó absolute không tổ tiên gần nhất có position ≠ static…
- Position sticky hoạt động thế nào?
sticky là relative cho tới khi chạm ngưỡng, sau đó thành fixed trong phạm vi cha. Ba điều kiện phải đủ, thiếu một là không chạy: 1. Có ít nhất một trong top/right/bottom/left. 2. Không tổ tiên nào có overflow: hidden auto scroll — nếu…
- Z-index hoạt động thế nào?
z-index quyết định thứ tự xếp chồng, nhưng chỉ so sánh được giữa các element cùng một stacking context. Hai điều kiện để z-index có tác dụng: element phải position khác static, hoặc là flex/grid item (trường hợp này z-index chạy mà không cần position).…
- Stacking context là gì?
Stacking context là một nhóm xếp chồng độc lập: mọi so sánh z-index chỉ diễn ra bên trong nó, và cả nhóm được xếp như một khối duy nhất so với bên ngoài. Cái gì tạo ra nó: - element gốc <html - position khác…
- Flexbox là gì? Khi nào nên dùng?
Flexbox là mô hình layout một chiều: bố trí item dọc theo một trục, và phân chia không gian còn thừa hoặc còn thiếu. Điểm mạnh thật sự là flex trên item — kiểm soát co giãn theo nội dung: Flex hay Grid? Tình huống…
- justify-content và align-items khác nhau?
justify-content căn theo trục chính, align-items căn theo trục phụ. Trục nào là chính do flex-direction quyết định. justify-content align-items --------- Trục chính phụ Giá trị riêng space-between, space-around, space-evenly stretch, baseline Chung flex-start, center, flex-end Căn giữa hoàn toàn — cách ngắn nhất: Lưu…
- flex-grow, flex-shrink, flex-basis là gì?
Ba thuộc tính này trả lời ba câu hỏi khác nhau về một flex item: Hiểu flex: 1 vs flex: auto — chỗ hay nhầm nhất: Viết tắt Đầy đủ Kết quả với 2 item nội dung dài ngắn khác nhau --------- flex: 1 1…
- flex-wrap hoạt động thế nào?
flex-wrap quyết định item có được xuống dòng khi hết chỗ hay không. Phân biệt hai thuộc tính hay bị lẫn khi đã wrap: - align-items — căn từng item trong một dòng. - align-content — căn các dòng với nhau trong container. Shorthand gộp…
- Gap property trong Flexbox là gì?
gap tạo khoảng cách giữa các item, không thêm khoảng thừa ở mép container. So với cách cũ dùng margin: Ưu điểm cụ thể: - Không có margin thừa ở phần tử đầu/cuối, không cần :last-child. - Không bị margin collapsing — flex/grid vốn không…
- Làm thế nào để center cả horizontal và vertical bằng Flexbox?
- CSS Grid là gì? Khác Flexbox thế nào?
Grid là layout hai chiều: khai báo cả hàng và cột, và item được đặt vào ô của lưới đó. Flexbox Grid --------- Số chiều một (hàng hoặc cột) hai (hàng và cột) Bố cục quyết định bởi nội dung đẩy ra container định sẵn…
- fr unit là gì?
fr (fraction) chia phần không gian còn lại của grid container sau khi đã trừ mọi kích thước cố định và gap. Vì sao hơn %: Kết hợp với minmax() để không co quá nhỏ: Lưu ý: 1fr thực chất là minmax(auto, 1fr), nghĩa là…
- grid-template-columns và grid-template-rows hoạt động thế nào?
Hai thuộc tính này khai báo explicit grid (lưới tường minh): có bao nhiêu track và mỗi track rộng/cao bao nhiêu. Giá trị hay dùng cho một track: <độ dài, %, fr, auto (vừa nội dung), min-content, max-content, minmax(a, b), fit-content(300px). Item vượt quá số…
- auto-fit và auto-fill khác nhau?
Cả hai đi cùng repeat() để browser tự tính số cột, khác nhau ở cách xử lý track rỗng. Với container 1000px và chỉ 2 item: Số track tạo ra Kết quả nhìn thấy --------- auto-fill 5 (tạo cả track rỗng) 2 item rộng 200px,…
- minmax() function dùng để làm gì?
minmax(min, max) đặt cận dưới và cận trên cho một track của grid. Dòng cuối là công thức được dùng nhiều nhất trong CSS Grid hiện đại: mỗi card tối thiểu 260px, số cột tự tính theo bề rộng, và card giãn ra cho vừa…
- Grid template areas là gì?
grid-template-areas cho phép vẽ bố cục bằng chữ rồi gán item vào từng vùng theo tên. Đổi bố cục cho mobile chỉ cần vẽ lại bức tranh, không đụng tới từng item: Dùng dấu . cho ô cố ý để trống: Lưu ý 1: mỗi…
- Subgrid là gì?
- Grid placement (grid-column, grid-row) hoạt động thế nào?
- Responsive design là gì?
Responsive design là làm cho một bộ code hiển thị hợp lý trên mọi kích thước màn hình, thay vì dựng site riêng cho mobile. Ba thành phần gốc (Ethan Marcotte, 2010): 1. Lưới co giãn — %, fr, flex thay cho chiều rộng cố…
- Mobile-first approach là gì?
Mobile-first nghĩa là CSS mặc định viết cho màn hình nhỏ, rồi dùng min-width để bổ sung cho màn lớn hơn. So với desktop-first: Ba lý do chọn mobile-first: 1. Ít ghi đè hơn — mỗi breakpoint thêm thứ mới thay vì huỷ thứ cũ,…
- Media queries dùng như thế nào?
Media query áp một khối CSS khi điều kiện về thiết bị đúng. Ngưỡng hay dùng: 640 / 768 / 1024 / 1280px — nhưng đó là quy ước của Tailwind, không phải chuẩn. Lưu ý 1: đừng đặt breakpoint theo tên thiết bị. Chọn…
- clamp() function dùng để làm gì?
clamp(min, ưa-thích, max) khoá một giá trị trong khoảng, và co giãn liên tục ở giữa. Thay thế cho việc nhảy bậc bằng media query: Công thức thường dùng cho fluid typography — trộn rem với vw để vẫn co theo cỡ chữ người dùng…
- Container queries là gì?
Container query cho component đáp ứng theo bề rộng của khối cha, không phải theo viewport. Lợi ích thực tế: cùng một component đặt trong sidebar 300px và trong vùng nội dung 900px sẽ tự hiển thị khác nhau — media query không làm được,…
- Responsive images (srcset, sizes) hoạt động thế nào?
srcset liệt kê nhiều phiên bản ảnh, sizes cho browser biết ảnh sẽ hiển thị rộng bao nhiêu để chọn đúng file. Cách browser quyết định với sizes="(min-width: 1024px) 50vw, 100vw" trên màn 1280px, DPR 2: - Ảnh sẽ rộng 50vw = 640px CSS →…
- @keyframes hoạt động thế nào?
@keyframes mô tả các mốc trạng thái, animation gắn chúng vào element. Các thuộc tính con của animation: name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state. fill-mode là thứ hay bị quên: - forwards — giữ trạng thái cuối sau khi chạy xong. - backwards…
- will-change property dùng để làm gì?
will-change báo trước cho browser rằng thuộc tính nào sắp đổi, để nó chuẩn bị (thường là tách element ra một composite layer riêng). Vấn đề: mỗi layer chiếm bộ nhớ GPU. Đặt will-change cho hàng loạt element làm trang chậm hơn thay vì nhanh…
- Tại sao transform/opacity animate mượt hơn top/left?
- Reflow và repaint là gì?
- CSS logical properties là gì?
Logical property mô tả vị trí theo hướng viết của ngôn ngữ thay vì theo trái/phải/trên/dưới cố định. Hai trục: - inline — hướng chữ chạy. LTR: trái→phải. RTL (Ả Rập, Do Thái): phải→trái. - block — hướng dòng xếp chồng. Thường là trên→dưới. Physical…
- scroll-snap CSS là gì?
scroll-snap cho phép cuộn dừng đúng vào từng mốc, không cần thư viện JS. Giá trị Hành vi ------ mandatory luôn dừng đúng mốc — hợp carousel toàn màn hình proximity chỉ dính khi dừng gần mốc — hợp danh sách dài, tự nhiên hơn…
- Color spaces mới trong CSS (oklch, lab) là gì?
- CSS Nesting native hoạt động thế nào?
- @layer (Cascade Layers) là gì?
- BEM (Block Element Modifier) là gì?
BEM là quy ước đặt tên class để một class nói rõ nó thuộc component nào và đóng vai gì. Cái nó giải quyết: selector lồng sâu (.sidebar .card h3 span) rất dễ vỡ khi đổi cấu trúc DOM, và specificity leo thang không kiểm…
- Utility-first CSS (Tailwind) là gì?
Utility-first là viết style bằng nhiều class nhỏ, mỗi class một thuộc tính, ngay trên HTML. Điểm mạnh thật sự không phải "viết nhanh" mà là: 1. Không phải đặt tên — phần lớn thời gian tranh luận CSS trong team là tranh luận tên…
- CSS Modules là gì?
CSS Modules biên dịch mỗi file .module.css thành các class được đổi tên duy nhất, nên style không rò ra ngoài component. Sau khi build, .root trở thành Buttonrootx7f2a — hai component cùng đặt tên .root không đụng nhau. Đặc điểm quan trọng: toàn bộ…
- CSS-in-JS là gì? Ưu nhược điểm?
CSS-in-JS viết style bằng JavaScript, gắn thẳng vào component. Ưu: scope tự động, style đổi theo props/state ngay trong cùng file, xoá component là xoá luôn style của nó (không còn CSS chết). Nhược: thư viện runtime phải sinh và chèn CSS trong lúc render…
- Critical CSS là gì?
Critical CSS là phần CSS tối thiểu để vẽ được nội dung ngay trên màn hình đầu tiên, nhúng thẳng vào <head để không phải chờ tải file CSS ngoài. Vấn đề nó giải: <link rel="stylesheet" là render-blocking — browser không vẽ gì cho tới…
- font-display property có những giá trị nào?
font-display quyết định browser xử lý ra sao trong lúc font tuỳ chỉnh chưa tải xong. Giá trị Giai đoạn chờ Kết quả --------- block ~3s ẩn chữ FOIT — trắng chữ, tệ nhất cho cảm nhận tốc độ swap 0s hiện font dự phòng…
- Layout thrashing là gì? Cách tránh?
- Backdrop-filter dùng để làm gì?
backdrop-filter áp filter lên phần nền phía sau element, không phải lên chính element. So với filter: Dùng cho: thanh điều hướng dính trong suốt, lớp phủ modal, thẻ kiểu glassmorphism, overlay trên ảnh. Lưu ý 1: quên nền bán trong suốt. Nền đục hoàn…
- Scroll-driven animations là gì?
- CSS Anchor Positioning là gì?
- @property rule dùng để làm gì?
- CSS View Transitions API là gì?
- Popover API và CSS liên quan là gì?
- Tại sao nên dùng CSS Grid cho page layout thay vì float/position?
- Text truncation (ellipsis) thực hiện thế nào?
Hai công thức, tuỳ số dòng cần giữ. Một dòng: Nhiều dòng: Dù mang tiền tố -webkit-, line-clamp chạy trên mọi browser hiện đại (Chrome, Safari, Firefox 68+, Edge) — đây là một trong số ít tiền tố đã thành chuẩn trên thực tế. Từ…
- Variable fonts là gì?
Variable font là một file chứa cả một trục biến thiên (độ đậm, độ rộng, độ nghiêng) thay vì mỗi kiểu một file riêng. Các trục chuẩn: wght (weight), wdth (width), slnt (slant), ital (italic), opsz (optical size). Trục riêng của từng font truy cập…
- prefers-reduced-motion media query dùng khi nào?
prefers-reduced-motion cho biết người dùng đã bật thiết lập giảm chuyển động ở cấp hệ điều hành. Đây không phải sở thích thẩm mỹ: chuyển động lớn gây chóng mặt, buồn nôn thật với người có rối loạn tiền đình. Cách viết được khuyến nghị…
- prefers-color-scheme media query là gì?
prefers-color-scheme cho biết hệ điều hành đang ở chế độ sáng hay tối. Cách triển khai đúng là khai báo token màu ở :root, rồi chỉ ghi đè token trong dark — không viết lại từng luật CSS: Muốn người dùng tự chọn (sáng /…
- picture element và source dùng thế nào?
<picture cho phép browser chọn giữa các nguồn ảnh khác nhau về định dạng hoặc bố cục, với <img là phương án cuối. Browser duyệt các <source theo thứ tự và dừng ở cái đầu tiên khớp — nên định dạng mới nhất phải đứng…
- Fluid typography công thức thế nào?
- Design tokens là gì?
- content-visibility: auto là gì?
- box-shadow vs filter: drop-shadow() khác nhau?
box-shadow đổ bóng theo hình hộp; filter: drop-shadow() đổ bóng theo hình thật của nội dung, kể cả phần trong suốt. Khác biệt lộ rõ với PNG trong suốt, SVG icon, hoặc element có clip-path: box-shadow drop-shadow() --------- Theo hình hộp + border-radius alpha channel…
- Breakpoints nên đặt theo thiết bị hay theo content?
Theo nội dung, không theo thiết bị. Lý do đơn giản: danh sách thiết bị đổi mỗi năm — iPhone SE 375px, iPhone Pro Max 430px, tablet gập, cửa sổ desktop chia đôi màn hình. Không có tập "kích thước chuẩn" nào ổn định để…
- Composite layers trong browser là gì?
Composite layer là một mặt phẳng vẽ riêng mà browser giao cho GPU ghép lại ở bước cuối. Element nằm trên layer riêng có thể di chuyển hoặc đổi độ mờ mà không phải vẽ lại phần còn lại của trang. Cái gì khiến một…
- CSS math functions (calc, min, max, clamp) khác nhau?
Bốn hàm toán, dùng được ở mọi chỗ nhận độ dài, số, góc hay tần số. Mẹo hay dùng — min() thay max-width, max() thay min-width: Cả bốn lồng nhau và cộng trừ với nhau được: Lưu ý 1 — khoảng trắng quanh toán tử.…
- :focus-visible vs :focus khác nhau?
- color-mix() function dùng để làm gì?
- Tại sao oklch tốt hơn hsl cho design systems?
Vì oklch đồng đều theo cảm nhận: giữ nguyên L và C, đổi H thì mắt thấy các màu sáng ngang nhau. hsl không có tính chất đó. Hệ quả với design system: 1. Thang màu sinh được bằng công thức. Với oklch, --blue-500 →…
- Cách tối ưu Cumulative Layout Shift (CLS)?
- Khi nào nên dùng CSS-in-JS vs CSS Modules vs Tailwind?
- Dark mode implementation best practices?
Nguyên tắc gốc: mọi màu đi qua custom property, dark mode chỉ đổi giá trị token chứ không viết lại luật CSS. Ba khối này xử lý đủ ba trạng thái: người dùng chọn sáng, chọn tối, hoặc để theo hệ thống. Bốn điểm về…
- touch-action property dùng để làm gì?
touch-action cho browser biết thao tác chạm nào nó được xử lý, phần còn lại nhường cho JS của bạn. Giá trị Browser giữ JS nhận --------- auto tất cả phần còn lại none không gì toàn bộ manipulation pan + pinch double-tap pan-x /…
- Container queries so với media queries - khi nào dùng gì?
- Cách optimize Largest Contentful Paint (LCP) bằng CSS?
- Cách giảm CSS bundle size?
- Flexbox vs Grid. Khi nào dùng cái nào? Tại sao?
Flexbox là hệ thống layout một chiều, phân bố item dọc theo một trục (hàng hoặc cột), phù hợp cho navigation bar, danh sách item, hoặc căn chỉnh đơn giản. CSS Grid là hệ thống layout hai chiều, cho phép định nghĩa cả hàng và…
- BFC (Block Formatting Context) là gì? Cách trigger BFC?
BFC (Block Formatting Context) là một vùng layout độc lập trong CSS, nơi các phần tử bên trong không ảnh hưởng đến layout bên ngoài và ngược lại. Cách tạo BFC gồm: overflow: auto hoặc hidden, display: flex hoặc grid, position: absolute hoặc fixed, float:…
- Margin collapsing trong CSS. Tại sao margin: 20px cộng với margin: 30px không bằng 50px?
Margin collapsing là hiện tượng margin dọc (vertical) của hai block-level element liền kề bị gộp lại thành một margin duy nhất, lấy giá trị lớn hơn — nên margin 20px + 30px chỉ còn 30px chứ không phải 50px. Margin ngang (horizontal) không bị…
- CSS Grid template areas. Làm sao layout dashboard responsive mà không thay đổi HTML?
CSS Grid template-areas cho phép đặt tên cho các vùng trong grid và gán phần tử vào bằng property grid-area, tạo ra layout trực quan và dễ đọc. Ví dụ: grid-template-areas: 'header header' 'sidebar main' 'footer footer' rồi gán mỗi phần tử với grid-area: header,…
- Stacking context trong CSS. Tại sao z-index không work?
Stacking context là hệ thống phân lớp trong CSS, mỗi context tạo ra một hệ thống z-index riêng biệt. Các thuộc tính tạo stacking context mới gồm: position kết hợp z-index, opacity nhỏ hơn 1, transform, filter, và nhiều thuộc tính khác. z-index không hoạt…
- CSS reset và normalize khác nhau như thế nào?
Cả hai xử lý việc trình duyệt có default styles khác nhau (margin <body, cỡ <h1, style <ul...), nhưng theo hai triết lý ngược nhau: - Reset (vd Meyer reset): xoá sạch hầu hết style mặc định về 0 — margin, padding, font-size... Như tờ…
- `border` và `outline` trong CSS khác nhau như thế nào?
- border: là một phần của box model, vẽ giữa padding và margin, chiếm chỗ nên làm tăng kích thước phần tử và đẩy layout. Đặt được từng cạnh (border-top...) và bo góc theo border-radius. - outline: vẽ bên ngoài border, không chiếm chỗ trong…
- `flex: 1` là viết tắt của những giá trị nào? Khác `flex: auto` ở đâu?
flex: 1 là shorthand của flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Điểm mấu chốt là flex-basis: 0%: trình duyệt coi kích thước khởi điểm của item là 0, rồi chia toàn bộ không gian còn lại theo tỉ lệ flex-grow. Kết quả là các item…
- Với một thanh toolbar (logo trái, menu giữa, nút phải) và một lưới card sản phẩm, bạn chọn Flexbox hay Grid cho từng cái? Vì sao?
Toolbar → Flexbox. Lưới card → Grid. Tiêu chí chọn: Flexbox là layout một chiều — bố trí một hàng (hoặc một cột) và phân phối không gian dư theo nội dung. Grid là layout hai chiều — định nghĩa hàng và cột trước, rồi…
- `align-items` và `align-content` khác nhau thế nào? Vì sao đặt `align-content` mà không thấy gì thay đổi?
- align-items: căn từng item bên trong dòng (line) của nó, theo trục cross. - align-content: căn cả tập hợp các dòng so với container, cũng theo trục cross. align-content chỉ có tác dụng khi container có nhiều dòng và còn không gian thừa trên…
- Vì sao nên dùng `gap` thay cho `margin-right` + `:last-child { margin-right: 0 }` khi tạo khoảng cách giữa các item?
gap khai báo khoảng cách giữa các item và chỉ áp dụng ở phần ở giữa — không sinh margin thừa ở hai đầu, nên không cần luật bù :last-child. Ưu điểm cụ thể: - Wrap đúng: khi item xuống dòng, gap cũng tạo khoảng…
- Một flex item chứa text dài hoặc `overflow: hidden` mà không chịu co lại, làm tràn container. Nguyên nhân và cách sửa?
Nguyên nhân là min-width: auto — giá trị mặc định của flex item theo trục chính. Giá trị này nghĩa là item không được co nhỏ hơn kích thước nội dung tối thiểu (min-content), tức là chữ dài nhất hoặc bề rộng tối thiểu của…
- Dùng `repeat(auto-fit, minmax(240px, 1fr))` mà khi chỉ còn 1 card thì nó kéo dài hết hàng. Vì sao? Đổi sang `auto-fill` thì sao?
Vì auto-fit thu gọn (collapse) các track rỗng về 0 rồi để các track có nội dung ăn hết phần dư. Còn 1 card thì mọi track khác biến mất, card duy nhất giãn theo 1fr chiếm trọn hàng. auto-fill giữ nguyên các track rỗng.…
- Grid có cột `1fr` nhưng nội dung dài (bảng, URL không ngắt) làm cả grid tràn ngang. Sửa thế nào?
Đổi 1fr thành minmax(0, 1fr). 1fr thực chất là viết tắt của minmax(auto, 1fr). Phần auto đặt mức tối thiểu bằng min-content của ô, nên khi bên trong có nội dung không ngắt được, track buộc phải rộng ra và cả grid tràn ngang khỏi…
- Dựng layout dashboard (header / sidebar / main / footer) và đổi thứ tự trên mobile bằng `grid-template-areas` như thế nào?
grid-template-areas đặt tên cho vùng rồi vẽ layout bằng chuỗi ASCII; đổi responsive chỉ cần vẽ lại bản đồ, không đụng tới HTML hay order. Quy tắc cần nhớ: mỗi chuỗi là một hàng, số token mỗi hàng phải bằng nhau, tên lặp lại thì…
- Đặt `position: sticky; top: 0` nhưng phần tử không dính. Bạn kiểm tra những nguyên nhân nào?
Bốn nguyên nhân theo thứ tự hay gặp: 1. Thiếu offset: sticky không làm gì nếu không có ít nhất một trong top / right / bottom / left. Đây là lỗi phổ biến nhất. 2. Tổ tiên có overflow khác visible: bất kỳ cha…
- Đặt `margin-top: 40px` cho phần tử con nhưng cả khối cha bị đẩy xuống thay vì con dịch trong cha. Vì sao và chặn thế nào?
Đó là margin collapsing giữa cha và con đầu tiên: khi không có gì ngăn cách ở cạnh trên (không border, không padding, không nội dung inline), margin-top của con thoát ra ngoài và hợp nhất với margin-top của cha. Giá trị cuối cùng là…
- `aspect-ratio` dùng thế nào? Nó thay được kỹ thuật padding-top phần trăm ở điểm nào?
aspect-ratio khai báo trực tiếp tỉ lệ giữa chiều rộng và chiều cao; trình duyệt tự suy ra chiều còn lại từ chiều đã biết. So với kỹ thuật cũ padding-top: 56.25% cộng một lớp con position: absolute; inset: 0: - Không cần phần tử…
- Dropdown đặt `z-index: 9999` vẫn bị phần tử khác che. Giải thích nguyên nhân và cách xử lý.
- `height: 100%`, `100vh` và `100dvh` khác nhau thế nào? Vì sao `100vh` gây lỗi trên mobile?
- Trong flex column (header + vùng nội dung + footer), đặt `overflow-y: auto` cho vùng nội dung nhưng nó không cuộn mà kéo dài cả trang. Sửa thế nào?
- Khi nào dùng container query thay media query? Cần khai báo gì và có bẫy nào?
- Trang bị nhảy layout khi ảnh và font tải xong. Nguyên nhân và cách xử lý để giảm CLS?
- Một rule viết sau trong file vẫn không đè được rule viết trước. Bạn giải thích thứ tự thắng thua của CSS thế nào?
Trình duyệt chọn giá trị theo thứ tự ba tầng, chỉ khi hoà ở tầng trên mới xét tầng dưới: 1. Nguồn và mức quan trọng — user-agent < author < !important (đảo ngược thứ tự). 2. Độ cụ thể (specificity) — bộ ba (inline,…
- Style của thư viện UI đè style của bạn, đồng nghiệp thêm `!important` cho nhanh. Vì sao đó là dấu hiệu xấu và bạn xử lý thế nào?
!important không sửa nguyên nhân, nó đi vòng qua cascade. Hệ quả: - Muốn đè lại một khai báo !important chỉ còn cách thêm !important khác cụ thể hơn — file CSS trượt dần vào cuộc đua leo thang. - Style inline từ JS (animation…
- Bạn muốn dùng một thuộc tính CSS mới nhưng vẫn phải chạy được trên trình duyệt cũ. `@supports` viết thế nào và lưu ý gì?
@supports là feature query: hỏi trình duyệt xem nó có hiểu một cặp property/value hay không, rồi mới áp dụng khối bên trong. Cú pháp hỗ trợ not, and, or và cả selector() để kiểm tra selector: Lưu ý khi phỏng vấn hay hỏi: -…
- Biến CSS khai báo trong một component không dùng được ở component khác. Vì sao? `var(--x, giá trị)` fallback chạy khi nào?
Vì custom property theo luật kế thừa của DOM, không phải biến toàn cục như SASS. Khai báo --gap trên .card thì chỉ .card và con cháu của nó đọc được; anh em bên ngoài cây đó nhận var(--gap) là không hợp lệ. Muốn dùng…
- Bạn thiết kế dark mode bằng biến CSS thế nào để vừa theo cài đặt hệ thống vừa cho người dùng tự chọn, và không bị nháy màu lúc tải trang?
Nguyên tắc: component không biết màu, chỉ đọc token. Toàn bộ khác biệt sáng/tối nằm ở một chỗ. - prefers-color-scheme lo mặc định theo hệ điều hành. - Thuộc tính data-theme trên <html lo lựa chọn thủ công và thắng media query nhờ selector cụ…
- `:is()` và `:where()` viết giống hệt nhau thì khác gì? Khi nào bắt buộc chọn `:where()`?
Hai hàm nhóm selector này giống nhau hoàn toàn về phần khớp, chỉ khác specificity: - :is(...) nhận specificity của selector có độ cụ thể cao nhất trong danh sách. - :where(...) luôn có specificity bằng 0, bất kể bên trong là gì. Hệ quả…
- `:has()` giải quyết được bài toán nào mà trước đây phải viết JS? Cho ví dụ thực tế.
:has() là parent selector: chọn phần tử dựa trên thứ nó chứa hoặc thứ đứng sau nó. Trước đó CSS chỉ đi xuống, nên mọi trạng thái phụ thuộc con đều phải để JS toggle class. Ví dụ hay dùng trong dự án: Lưu ý:…
- Sản phẩm sắp hỗ trợ tiếng Ả Rập (RTL). Logical property giúp gì và bạn đổi CSS hiện có thế nào?
Logical property mô tả vị trí theo hướng đọc của văn bản thay vì theo trục vật lý trái/phải. Khi dir="rtl", trình duyệt tự lật, không cần một file CSS RTL riêng. Vật lý Logical ------ margin-left margin-inline-start padding-right padding-inline-end text-align: left text-align: start border-top…
- Team tranh luận giữa BEM và utility-first (Tailwind). Bạn phân tích đánh đổi của hai bên thế nào?
Hai cách giải cùng một vấn đề: CSS không có scope, nên phải quy ước để tránh tên class đụng nhau và style rò rỉ. BEM — blockelement--modifier, mỗi class một tầng ý nghĩa: - Specificity phẳng (một class), dễ đoán thứ tự đè. -…
- Dùng `clamp()` cho cỡ chữ responsive thay vì hàng loạt media query. Công thức thế nào và có bẫy gì về accessibility?
clamp(min, preferred, max) cho giá trị co giãn liên tục theo viewport, thay vì nhảy bậc tại breakpoint: Giá trị giữa phải có thành phần vw thì mới co giãn. Cách suy ra hệ số: chọn hai mốc (vd 360px → 28px, 1280px → 48px),…
- Menu trượt ra bị giật trên máy yếu. Bạn chọn animate thuộc tính nào và vì sao đổi `left`/`width` sang `transform` lại mượt hơn?
Vì mỗi khung hình trình duyệt đi qua các bước style → layout → paint → composite, và thuộc tính bạn đổi quyết định phải chạy lại từ bước nào. - Đổi left, top, width, height, margin → layout lại (reflow) toàn bộ nhánh liên…
- Dự án lớn có reset, thư viện, component và utility đè lẫn nhau khó lường. `@layer` giải quyết thế nào và bẫy khi dùng là gì?
- Chọn giữa CSS Modules, CSS-in-JS và Tailwind cho một app React mới, bạn dựa trên tiêu chí gì?
- Có người thêm `will-change: transform` cho mọi phần tử có animation để "chạy mượt hơn". Làm vậy hại gì?
- Trang danh sách dài (vài nghìn card) render chậm dù dữ liệu đã phân trang phía server. `content-visibility` và `contain` giúp gì?
- File CSS của dự án tăng dần, không ai dám xoá vì sợ vỡ giao diện. Bạn đưa ra chiến lược kiểm soát thế nào?
