[{"id":"css-content-box-width","domain":"general","topic":"content-box width arithmetic","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Use border-box everywhere"]},{"id":"css-id-beats-classes","domain":"general","topic":"One id vs many classes","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Zero out the id with :where()","Style with a class instead"]},{"id":"css-gap-not-at-edges","domain":"general","topic":"gap in a grid","kind":"code","options":["a","b","c","d"],"answer":"c","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Want space at the edges? Add padding"]},{"id":"css-parent-child-margin-collapse","domain":"general","topic":"Parent and child margin collapsing","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Make the card a flow root","Use padding instead"]},{"id":"css-custom-property-inherits","domain":"general","topic":"Custom properties inherit","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Set it on the element"]},{"id":"css-has-parent-state","domain":"general","topic":":has() styles the anchor","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Style the input itself"]},{"id":"css-absolute-nearest-positioned","domain":"general","topic":"Absolute vs nearest positioned ancestor","kind":"code","options":["a","b","c","d"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Position the card"]},{"id":"css-em-compounds","domain":"general","topic":"em font sizes compound","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Use rem","Reset nested items"]},{"id":"css-logical-margin-rtl","domain":"general","topic":"Logical margins in RTL","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Or use gap"]},{"id":"css-transform-keeps-space","domain":"general","topic":"transform doesn't move layout","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Move it in layout"]},{"id":"css-where-zero-specificity","domain":"general","topic":":where() vs :is() specificity","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Want the reset to win? Use :is()"]},{"id":"css-aspect-ratio-both-sizes","domain":"general","topic":"aspect-ratio with a fixed height","kind":"code","options":["a","b","c"],"answer":"c","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Leave one size auto"]},{"id":"css-inline-vertical-margin","domain":"general","topic":"Vertical margins on inline elements","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Make it inline-block"]},{"id":"css-unitless-line-height","domain":"general","topic":"Unitless vs em line-height","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Use a unitless number"]},{"id":"css-hidden-vs-opacity","domain":"general","topic":"display, visibility and opacity","kind":"code","options":["a","b","c","d"],"answer":"c","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Pair the fade with visibility"]},{"id":"css-percent-height-auto-parent","domain":"general","topic":"Percentage height, auto parent","kind":"code","options":["a","b","c"],"answer":"c","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Give main a height too","Use a viewport unit"]},{"id":"css-layer-order","domain":"general","topic":"@layer order beats specificity","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Put overrides in a later layer"]},{"id":"css-container-type-missing","domain":"general","topic":"Container queries need a container","kind":"code","options":["a","b","c"],"answer":"c","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Make the sidebar a container"]},{"id":"css-float-flow-root","domain":"general","topic":"Containing floats","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Use display: flow-root","Skip the float"]},{"id":"css-unlayered-beats-layers","domain":"general","topic":"Unlayered styles beat layers","kind":"code","options":["a","b","c"],"answer":"c","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Put the reset in an earlier layer"]},{"id":"css-nth-child-of-selector","domain":"general","topic":":nth-child(An+B of S)","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Zebra stripes that skip hidden rows"]},{"id":"css-flex-basis-beats-width","domain":"general","topic":"flex-basis vs width","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Let the basis read width"]},{"id":"css-var-invalid-at-computed-time","domain":"general","topic":"var() invalid at computed time","kind":"code","options":["a","b","c","d"],"answer":"d","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Store a colour in the property"]},{"id":"css-nesting-is-specificity","domain":"general","topic":"Native nesting specificity","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Wrap the list in :where()","Split the rule"]},{"id":"css-flex-min-width-auto","domain":"general","topic":"Flex items and min-width: auto","kind":"code","options":["a","b","c","d"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Let the item shrink","Make the item clip"]},{"id":"css-important-reverses-layers","domain":"general","topic":"!important reverses layers","kind":"code","options":["a","b","c"],"answer":"c","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Drop !important and let layers order it"]},{"id":"css-100vh-mobile","domain":"general","topic":"100vh on mobile","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Use dvh","Use svh"]},{"id":"css-grid-1fr-blowout","domain":"general","topic":"1fr vs minmax(0, 1fr)","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Use minmax(0, 1fr)","Drop the item's minimum"]},{"id":"css-z-index-stacking-context","domain":"general","topic":"z-index trapped in a stacking context","kind":"code","options":["a","b","c"],"answer":"b","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Drop the transform","Raise the whole card"]},{"id":"css-sticky-overflow-ancestor","domain":"general","topic":"position: sticky inside overflow","kind":"code","options":["a","b","c"],"answer":"c","rev":1,"gapFor":["react-spa","next-pages","next-app-legacy","other"],"fixes":["Let the wrapper scroll","Use overflow-x: clip"]}]