← Bytedance Interview Insights
I got the ordering right (inline beats id beats class beats element) but fumbled a bit explaining !important and when it actually overrides things.
Start by defining CSS specificity as the algorithm browsers use to determine which CSS rule applies to an element when multiple rules match. Then explain the specificity hierarchy (inline, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements) and how conflicts are resolved by comparing specificity values, with source order as a tiebreaker. Finally, discuss practical implications and trade-offs, such as avoiding !important and using methodologies like BEM to manage specificity.
Pro tip: Mention that while !important overrides normal declarations, it should be used sparingly and can be managed with CSS layers or cascade layers for better maintainability. Also, note that specificity is calculated as a four-part value (inline, IDs, classes, elements) and that inheritance and the cascade origin (user agent, user, author) also affect which styles apply.
Explain that specificity is a weight assigned to CSS selectors that determines which rule wins when multiple rules target the same element. It's calculated based on the types of selectors used.
Describe the specificity hierarchy: inline styles (highest), IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements (lowest). Mention that universal selector (*) and combinators have no specificity.
Detail how conflicts are resolved: compare specificity values; if equal, the rule that appears later in the source order wins. Also mention that !important declarations override normal declarations, and that cascade layers can alter the order.
Talk about how understanding specificity helps avoid !important and write maintainable CSS. Mention methodologies like BEM or CSS Modules that reduce specificity conflicts.
Discuss trade-offs: high specificity can lead to brittle code, while low specificity may require more verbose selectors. Mention tools like CSS layers for managing specificity in large projects.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.
Start by defining the CSS box model and its components (content, padding, border, margin), then explain how box-sizing changes the calculation of an element's total width and height. Use a concrete example to illustrate the difference between content-box and border-box, and mention practical implications for layout and responsive design.
Pro tip: Mention that border-box is often preferred in modern CSS resets (e.g., * { box-sizing: border-box; }) because it makes sizing more intuitive and avoids unexpected overflow, especially when adding padding or borders to elements with percentage widths.
Explain that every element is a rectangular box composed of content, padding, border, and margin. Describe how these layers stack from innermost (content) to outermost (margin).
State that with content-box (the default), width and height apply only to the content area. Padding and border are added outside, increasing the total rendered size.
State that with border-box, width and height include content, padding, and border. The content area shrinks to accommodate padding and border, keeping the total size fixed.
Give a concrete example: an element with width: 200px, padding: 20px, border: 5px. Under content-box, total width = 200 + 40 + 10 = 250px; under border-box, total width remains 200px, content width = 200 - 40 - 10 = 150px.
Explain why border-box is often preferred: it simplifies layout calculations, prevents unexpected overflow, and is commonly set globally via a CSS reset. Mention that content-box can be useful when you want padding to expand the element.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.
Ran through static, relative, absolute, fixed, sticky.
Start by listing the five CSS position values (static, relative, absolute, fixed, sticky) and briefly define each. Then explain when to use each one, focusing on practical scenarios and trade-offs like layout impact, containing block behavior, and performance. Emphasize how they interact with the document flow and stacking contexts.
Pro tip: Mention that while absolute and fixed positioning are powerful, they can lead to brittle layouts and accessibility issues; prefer modern layout techniques like Flexbox and Grid for most layout needs, reserving positioning for specific overlays or effects.
Explain that static is the default and relative offsets from its normal position without removing it from flow. Use relative for minor adjustments or as a containing block for absolutely positioned children.
Describe absolute positioning relative to nearest positioned ancestor, removing element from flow. Fixed positions relative to viewport, useful for persistent UI like headers. Mention trade-offs: absolute can cause overlap, fixed can be problematic on mobile.
Sticky is a hybrid: behaves relative until a threshold, then fixed. Use for sticky headers or table headers. Note it requires a threshold (top, bottom, etc.) and is widely supported.
For each mode, give a concrete example (e.g., relative for icon alignment, absolute for dropdowns, fixed for modals, sticky for navigation). Highlight impact on document flow, z-index, and performance.
Advise using positioning sparingly and preferring Flexbox/Grid for layout. Mention that understanding containing blocks and stacking contexts is crucial for debugging.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.
Start by categorizing the display modes into two groups: traditional layout (block, inline, inline-block) and modern layout (flex, grid). Then explain each mode's core behavior, focusing on how they affect element flow, sizing, and alignment. Finally, highlight when to use each, emphasizing flex for one-dimensional layouts and grid for two-dimensional layouts.
Pro tip: Mention that inline-block preserves inline flow but allows width/height, and that flex and grid are not just display values but entire layout systems with properties on children. This shows depth beyond surface-level definitions.
Group block, inline, and inline-block as traditional display values that affect element flow, and flex and grid as modern layout modules that create formatting contexts.
Describe block elements as taking full width and starting on a new line, and inline elements as flowing within text, ignoring width/height and vertical margins.
Highlight that inline-block elements flow inline like text but respect width, height, and vertical margins, making them useful for horizontal navigation or buttons.
Describe flex as a one-dimensional layout for distributing space and aligning items along a main axis, and grid as a two-dimensional layout for creating complex row and column structures.
Summarize key differences and provide practical scenarios: use flex for component-level layouts (e.g., navbars), grid for page-level layouts, and inline-block for simple inline elements with sizing.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.
Start by defining stacking contexts as a three-dimensional layering concept, then explain the CSS properties that create them and how they affect z-index. Use a concrete example to illustrate how z-index only works within the same stacking context, and mention common pitfalls like opacity and transforms.
Pro tip: Emphasize that z-index is relative to the nearest stacking context, not the root, and that creating unnecessary stacking contexts can lead to unexpected layering issues. Mention that debugging stacking contexts is easier with browser devtools that visualize them.
Explain that a stacking context is a hierarchical grouping of elements that determines how they are painted on the z-axis. Elements within a stacking context are layered relative to each other, and the context itself is atomic relative to other contexts.
Mention key properties: position (relative/absolute/fixed/sticky) with z-index not auto, opacity less than 1, transform, filter, will-change, flex/grid children with z-index, etc. Highlight that these create a new context, isolating z-index values.
Clarify that z-index only applies to positioned elements (or flex/grid items) and only affects layering within the same stacking context. A higher z-index in a child context cannot override a lower z-index in a parent context.
Talk about issues like z-index not working due to missing positioning, or unexpected layering from opacity/transform. Mention performance considerations: excessive stacking contexts can impact rendering.
Walk through a scenario: e.g., a modal with high z-index but inside a parent with opacity, causing it to be layered below other elements. Show how to fix by moving the modal to a higher stacking context or adjusting properties.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.