Advanced HTML and CSS interview questions covering architecture, accessibility, performance, debugging, progressive enhancement and senior production scenarios.
Open a question for the full answer, code and interview guidance.
BEM stands for Block, Element, Modifier. It is a naming methodology that gives CSS classes an explicit component structure: a block is an independent component, an element is a part of that block, and a modifier represents a variation or state.
CSS Modules are a build-tool approach in which class names are locally scoped to a component or source module and transformed into generated unique names. They are commonly used with component-based JavaScript frameworks.
CSS-in-JS is a family of approaches in which component styles are authored or generated through JavaScript or TypeScript tooling. Depending on the library, styles may be generated at runtime, extracted at build time, or compiled into static CSS.
A CSS reset reduces or removes selected browser default styles so projects begin from a more controlled baseline. A normalization stylesheet instead tends to preserve useful defaults while making rendering more consistent across browsers.
CSS containment lets an author tell the browser that parts of an element's layout, paint, size, style, or other behavior are sufficiently isolated from the rest of the page. This can allow the browser to limit some rendering work.
content-visibility allows the browser to skip some rendering work for content that is not currently relevant to the viewport. content-visibility: auto can improve rendering performance on long pages by deferring layout and paint work for off-screen sections.
opacity: 0 makes an element fully transparent but normally leaves its layout box and can leave it interactive unless other behavior is changed. visibility: hidden keeps its layout space but prevents normal visibility and interaction in ways defined by the visibility model.
Sometimes visible text must be replaced by a visual treatment while an accessible text label remains available. A visually-hidden utility can position a small element outside normal visual presentation without using display: none or visibility: hidden.
:focus-visible matches when an element has focus and the browser determines that a visible focus indicator is appropriate, such as during keyboard navigation. It helps provide strong keyboard focus without necessarily showing the same custom ring for every pointer click.
Text, icons, controls, focus indicators, and meaningful graphical elements need sufficient contrast against their backgrounds. Exact requirements depend on the content and applicable accessibility standard, so teams should validate combinations with appropriate tools.
CSS should avoid unnecessarily hard-coding left and right when the design concept is actually start and end. Logical properties such as margin-inline-start, padding-inline, inset-inline-end, and text-align: start adapt to the document's writing direction.
Print CSS provides styles specifically for printed output, normally through @media print or a stylesheet with print media. It can remove navigation and interactive controls, adjust typography, avoid unsuitable colors, and improve page-break behavior.
Vendor prefixes are browser-specific prefixes such as -webkit- that were historically used for experimental or non-standard implementations of CSS features. Modern standardized CSS often works without manually written prefixes, but some compatibility cases still exist.
Progressive enhancement starts with a functional semantic baseline and adds richer styling or capabilities when the browser supports them. Core content and essential actions should remain usable even when an optional enhancement is unavailable.
@supports is a feature query that conditionally applies CSS when the browser reports support for a particular property-value combination or supported selector condition. It enables progressive enhancement without relying on browser-name detection.
CSS can affect network transfer, style calculation, layout, paint, compositing, and the time required before useful content is rendered. Very large stylesheets, unused rules, excessive font resources, expensive visual effects, and frequent layout-changing updates can all contribute to poor performance.
Critical CSS is the subset of styles needed to render the initially visible or otherwise important portion of a page. Some performance strategies inline or prioritize these rules so the browser can display useful content before a larger stylesheet finishes loading.
Unused CSS can be reduced by splitting styles by page or feature, removing obsolete components, and using build tools that analyze which selectors are needed. Framework projects may also use content scanning or tree-shaking-like CSS processes.
Fonts can delay text rendering and add substantial network cost when many families, weights, styles, or character sets are downloaded. A page should load only the font resources it actually needs.
Use browser developer tools to inspect the element, matched rules, computed styles, inherited values, cascade layers, and declarations that were overridden. This reveals which rule actually wins and why.
Start by identifying the element whose rendered width extends beyond the viewport. Browser developer tools can inspect box sizes and highlight overflow. Common causes include fixed widths, long unbreakable content, images without max-width, grid tracks with large minimums, and flex or grid children whose automatic minimum size prevents shrinking.
Flex and Grid items have automatic minimum-size behavior that can prevent them from shrinking below the size required by their content. Long URLs, code, tables, or other unbreakable content can therefore push the item beyond its container.
A large application benefits from predictable layers and clear ownership. A practical structure may separate design tokens, reset/base rules, layout primitives, reusable components, page-specific styles, and small utilities. The exact folder structure matters less than having consistent boundaries.
First verify the viewport configuration and reproduce the problem at the failing width. Inspect actual element sizes, grid and flex tracks, intrinsic content widths, media queries, images, tables, code blocks, fixed positioning, and any component with a hard-coded width.
Start with the content and document structure. Use semantic HTML for landmarks, headings, navigation, lists, forms, tables, buttons, links, and media. Establish accessibility at the markup level with language information, labels, alternative text, keyboard-operable native controls, and a logical heading hierarchy.