standardslisted

# Front-end engineering standards These are standards and failure modes, not one framework's current API surface. Where a rule depends on a specific framework or library version, confirm the current idiom (Context7 or official docs) instead of assuming React — the principle holds even where the syntax shown as an example doesn't. Read the reference file for any domain the task touches. The table below is the index, not a substitute for it. ## Quick Reference Deliberately not a syllabus. Every row is something commonly got wrong, not something a competent engineer does by default — rules like `box-sizing: border-box`, animating only compositor properties, or labelling an icon-only button are still enforced (see the checklist and the reference files); they just don't need a row here. When adding a rule, the test is whether its absence would change the output. If it wouldn't, it belongs in `reference/`, which costs nothing until it's opened. | Situation | Rule | Details | |---|---|---| | Fighting specificity with `!important` | Cascade layers (`@layer`) — note `!important` inverts layer order | [css.md#cascade-layers](reference/css.md#cascade-layers) | | Raising `z-index` does nothing | Find the ancestor's stacking context; `isolation: isolate` to scope your own | [css.md#stacking-contexts](reference/css.md#stacking-contexts) | | Modal/tooltip detaches from its trigger on scroll | `transform`, `filter`, **`container-type`**, or `contain` on an ancestor traps `position: fixe