{"id":7245,"date":"2025-09-24T13:18:49","date_gmt":"2025-09-24T18:18:49","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=7245"},"modified":"2025-10-10T16:49:15","modified_gmt":"2025-10-10T21:49:15","slug":"the-coyier-css-starter","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-coyier-css-starter\/","title":{"rendered":"The Coyier CSS Starter"},"content":{"rendered":"\n

I felt called out by Mike Mai’s You are not a CSS dev if you have not made a CSS reset<\/a>.<\/em><\/p>\n\n\n\n

I hadn’t! I mean, I’ve used * { box-sizing: border-box; }<\/code> a ton and, way back, I used to use that same universal selector to wipe away margins and padding, which was the inspiration behind the CSS-Tricks<\/a> logo, believe it or not. <\/p>\n\n\n\n

But I never made or published anything and planted a stake in the ground and said “This one. This one is mine.”<\/em><\/p>\n\n\n\n

So I’m going to do that. <\/p>\n\n\n\n

First, I think it’s important to lay some ground rules. Some principles, really. There are a lot of directions a thing like this can go, and without what it’s for (and not for) it’s fairly useless.<\/p>\n\n\n\n

Principles<\/h2>\n\n\n\n
    \n
  1. This is for me.<\/strong> The styles in here are useful to me. They are things I find myself doing very often (or forgetting to do.) I’d like to be using this in most<\/em> demos I make and dipping into it for any future project. I do hope y’all will find some value in it too of course, hence blogging about it, but as a guiding principal it’s for me.<\/li>\n\n\n\n
  2. This is not a reset<\/em>, it’s an opinionated starter<\/em>.<\/strong> I’m not trying to wipe out all<\/em> existing styles from user-agent stylesheets. I wipe out the ones that are useful for me to remove. It’s more about adding<\/em> useful styles, improving<\/em> UX broadly, and fixing<\/em> common issues.<\/li>\n\n\n\n
  3. Use only logical properties.<\/strong> It’s a net gain<\/a>.<\/li>\n\n\n\n
  4. Don’t use --custom-properties<\/code>.<\/strong> Setting those up is a step too far for this starter. Use Open Props<\/a> for that sort of thing.<\/li>\n\n\n\n
  5. Use @layer<\/code><\/strong> because<\/a> “you\u2019ll need to do it anyway if you ever want to use layers anywhere else.”<\/li>\n\n\n\n
  6. Do accessibility things that are easy to forget about<\/strong>, but nothing so niche it doesn’t come up for me often\/ever.<\/li>\n\n\n\n
  7. Don’t do too much.<\/strong> None of this is strictly necessary so if it feels too weighty I’d probably find myself not using it. This whole thing is pointless if I don’t use it. Doing nothing<\/a> is totally an option, so if this doesn’t feel more useful than just defining styles as you go<\/a>, it’s a fail.<\/li>\n\n\n\n
  8. This isn’t a thing anybody is going to npm install<\/code><\/strong>. It’s not versioned nor meant to be always<\/em> used wholesale. Copying out useful bits is fine usage.<\/li>\n\n\n\n
  9. This is a list of things I almost<\/em> wish were the browser defaults<\/strong> (i.e. in the user agent stylesheet) if I ruled the world and didn’t have to care about backwards compatibility.<\/li>\n<\/ol>\n\n\n\n

    The Whole Thing<\/h2>\n\n\n\n

    You can see it on this Pen<\/a>, or directly as a file here<\/a>. <\/p>\n\n\n

    @layer<\/span> reset {\n  html<\/span> {\n    color-scheme<\/span>: light dark;\n    font<\/span>:\n      clamp<\/span>(1rem<\/span>, 1rem<\/span> + 0.5vw<\/span>, 2rem<\/span>) \/ 1.4<\/span> system-ui,\n      sans-serif;\n    tab-size<\/span>: 2<\/span>;\n    hanging-punctuation<\/span>: first allow-end last;\n    word-break<\/span>: break-word;\n  }\n\n  body<\/span> {\n    margin<\/span>: 0<\/span>;\n    padding<\/span>: 2rem<\/span>;\n    @media (width < 500px) {\n      padding<\/span>: 1rem<\/span>;\n    }\n  }\n\n  *,\n  *::before<\/span>,\n  *::after<\/span> {\n    box-sizing<\/span>: border-box;\n  }\n\n  h1<\/span>,\n  h2<\/span> {\n    font-weight<\/span>: 900<\/span>;\n    letter-spacing<\/span>: -0.02rem<\/span>;\n  }\n  h1<\/span>,\n  h2<\/span>,\n  h3<\/span> {\n    line-height<\/span>: 1.1<\/span>;\n  }\n  h1<\/span>,\n  h2<\/span>,\n  h3<\/span>,\n  h4<\/span>,\n  h5<\/span>,\n  h6<\/span> \/* FUTURE :heading *\/<\/span> {\n    text-wrap<\/span>: balance;\n    margin-block-start<\/span>: 0<\/span>;\n  }\n\n  p<\/span>,\n  li<\/span>,\n  dd<\/span> {\n    text-wrap<\/span>: pretty;\n    max-inline-size<\/span>: 88ch<\/span>;\n  }\n\n  a<\/span> {\n    color<\/span>: oklch<\/span>(0.68<\/span> 0.17<\/span> 228<\/span>);\n    text-underline-offset<\/span>: 2px<\/span>;\n    &:not(:is(:hover, :focus)) {\n      text-decoration-color<\/span>: color-mix<\/span>(in srgb, currentColor, transparent 50%<\/span>);\n    }\n  }\n\n  sub<\/span>,\n  sup<\/span> {\n    font-size<\/span>: 75%<\/span>;\n    line-height<\/span>: 0<\/span>;\n    position<\/span>: relative;\n    vertical-align<\/span>: baseline;\n  }\n  sub<\/span> {\n    inset-block-end<\/span>: -0.25em<\/span>;\n  }\n  sup<\/span> {\n    inset-block-start<\/span>: -0.5em<\/span>;\n  }\n\n  ul<\/span>,\n  ol<\/span>,\n  dl<\/span> {\n    margin<\/span>: 0<\/span>;\n    padding<\/span>: 0<\/span>;\n    list-style-position<\/span>: inside;\n    ul,\n    ol,\n    dl {\n      padding-inline-start<\/span>: 2ch<\/span>;\n    }\n  }\n\n  img<\/span>,\n  video<\/span>,\n  iframe<\/span> {\n    display<\/span>: block;\n    max-inline-size<\/span>: 100%<\/span>;\n    block-size<\/span>: auto;\n    border-style<\/span>: none;\n  }\n\n  figure<\/span> {\n    inline-size<\/span>: fit-content;\n    margin-inline<\/span>: auto;\n  }\n  figcaption<\/span> {\n    contain<\/span>: inline-size;\n    font-size<\/span>: 90%<\/span>;\n  }\n\n  input<\/span>,\n  select<\/span>,\n  textarea<\/span>,\n  button<\/span> {\n    font<\/span>: inherit;\n    \/* FUTURE: appearance: base; *\/<\/span>\n  }\n  label<\/span> {\n    display<\/span>: block;\n  }\n  input<\/span>:not(<\/span>\n    :where(<\/span>\n      [type=\"submit\"<\/span>]<\/span>,\n      [type=\"checkbox\"<\/span>]<\/span>,\n      [type=\"radio\"<\/span>]<\/span>,\n      [type=\"button\"<\/span>]<\/span>,\n      [type=\"reset\"<\/span>]<\/span>\n    )\n  ) {\n    inline-size<\/span>: 100%<\/span>;\n  }\n  button<\/span>,\n  input<\/span>:where(<\/span>\n    [type=\"submit\"<\/span>]<\/span>,\n    [type=\"reset\"<\/span>]<\/span>,\n    [type=\"button\"<\/span>]<\/span>\n  ) {\n    background<\/span>: CanvasText;\n    color<\/span>: Canvas;\n    border<\/span>: 1px<\/span> solid transparent;\n  }\n  textarea<\/span> {\n    field-sizing<\/span>: content;\n    min-block-size<\/span>: 5<\/span>lh;\n    inline-size<\/span>: 100%<\/span>;\n    max-inline-size<\/span>: 100%<\/span>;\n  }\n\n  pre<\/span>,\n  code<\/span>,\n  kbd<\/span>,\n  samp<\/span> {\n    font-family<\/span>: ui-monospace, SFMono-Regular, monospace;\n  }\n\n  svg<\/span> {\n    fill<\/span>: currentColor;\n  }\n\n  [aria-disabled=\"true\"<\/span> i]<\/span>,\n  [disabled]<\/span> {\n    cursor<\/span>: not-allowed;\n  }\n  [hidden]<\/span> {\n    display<\/span>: none !important<\/span>;\n  }\n  [disabled]<\/span>,\n  label<\/span>:has(input<\/span>[disabled]<\/span>) {\n    opacity<\/span>: 0.5<\/span>;\n\n    [disabled] {\n      opacity<\/span>: 1<\/span>;\n    }\n  }\n\n  pre<\/span> {\n    white-space<\/span>: pre-wrap;\n    background<\/span>: CanvasText;\n    color<\/span>: Canvas;\n    padding<\/span>: 1.5rem<\/span>;\n  }\n\n  hr<\/span> {\n    border-style<\/span>: solid;\n    border-width<\/span>: 1px<\/span> 0<\/span> 0<\/span>;\n    color<\/span>: inherit;\n    height<\/span>: 0<\/span>;\n    overflow<\/span>: visible;\n    margin-block<\/span>: 2.5rem<\/span>;\n  }\n\n  :target<\/span> {\n    scroll-margin<\/span>: 3<\/span>rlh;\n  }\n\n  table<\/span> {\n    caption-side<\/span>: bottom;\n    border-collapse<\/span>: collapse;\n    td {\n      font-size<\/span>: 90%<\/span>;\n    }\n    td<\/span>,\n    th<\/span> {\n      word-break<\/span>: normal;\n      border<\/span>: 1px<\/span> solid gray;\n      padding<\/span>: 0.5rem<\/span>;\n    }\n  }\n  [role=\"region\"<\/span>]<\/span>[aria-labelledby]<\/span>[tabindex]<\/span> {\n    overflow<\/span>: auto;\n  }\n  caption<\/span> {\n    font-size<\/span>: 90%<\/span>;\n  }\n\n  .screenreader-only<\/span>:not(<\/span>:focus)<\/span>:not(<\/span>:active)<\/span> {\n    clip<\/span>: rect<\/span>(0<\/span> 0<\/span> 0<\/span> 0<\/span>);\n    clip-path<\/span>: inset<\/span>(50%<\/span>);\n    height<\/span>: 1px<\/span>;\n    overflow<\/span>: hidden;\n    position<\/span>: absolute;\n    white-space<\/span>: nowrap;\n    width<\/span>: 1px<\/span>;\n  }\n  :focus-visible<\/span> {\n    outline-offset<\/span>: 2px<\/span>;\n  }\n\n  @media<\/span> (prefers-reduced-motion:<\/span> no-preference) {\n    @view-transition<\/span> {\n      navigation<\/span>: auto<\/span>;\n    }\n    \n    html<\/span> {\n      interpolate-size<\/span>: allow-keywords;\n      &:focus-within {\n        scroll-behavior<\/span>: smooth;\n      }\n    }\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Notes about the Choices<\/h2>\n\n\n\n
    Layering<\/h3>\n\n\n
    @layer<\/span> reset {\n\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    There is no usage of :where()<\/code> in here just<\/em> to lower specificity. The usage of :where()<\/code> is only to write selectors that are less repetitive and easier to read. Specificity is already bottomed out due to the @layer<\/code>, and people who choose to use this can position the layer where they want to. <\/p>\n\n\n\n
    Color Scheme<\/h3>\n\n\n
    html<\/span> {\n  color-scheme<\/span>: light dark;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Putting color-scheme: light dark;<\/code> in there is a relatively big choice, because it opts you into needing to deal with both themes for nearly all color\/background-color usage. But that’s good. People like it when at least their operating system choice is honored. Just this basic thing alone buys dark-mode scrollbars and checkboxes and inputs and stuff, so it’s worth doing. Now light-dark()<\/code> will work so implementing scheme-specific colors isn’t so bad.<\/p>\n\n\n\n
    Clamped Root Font Size<\/h3>\n\n\n
    html<\/span> {\n  font<\/span>: clamp<\/span>(1rem<\/span>, 1rem<\/span> + 0.5<\/span>dvw, 2rem<\/span>) \/ 1.4<\/span> system-ui, sans-serif;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Controversial?! Maybe. But because clamp(1rem, 1rem + 0.5dvw, 2rem)<\/code> involves relative units, it should still scale properly with users adjusting their base font size. I feel like setting a fluid font size here (and nowhere else) percolates pretty nicely throughout the document and feels like visually.<\/p>\n\n\n\n
    That’s a juiced up line-height<\/code> and system-ui<\/code> as the font which tends to look nice everywhere. Just this alone speeds up demo-making where I just can’t look at the default Times New Roman very long. Nothing against that typeface, it just makes demos look un-cared for.<\/p>\n\n\n\n
    Tab Size<\/h3>\n\n\n
    html<\/span> {\n  tab-size<\/span>: 2<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    The fact that the default tab-size<\/code> is 8 is whackadoo and needs to get tamped down. I get that taking advantage of wider screens can feel good but narrow screens are so much more common. Maybe I should use a dvi<\/code> unit??<\/p>\n\n\n\n
    Body Spacing<\/h3>\n\n\n\n
    The body has an 8px<\/code> margin which is just awkward. I feel good about a more generous 2rem<\/code> padding kicking down to 1rem<\/code> at smaller screens. 500px is a heck of a magic number there, but feels generally right to me \u2014 it doesn’t have<\/em> to sync up with other layout changes.<\/p>\n\n\n
    body<\/span> {\n  margin<\/span>: 0<\/span>;\n  padding<\/span>: 2rem<\/span>;\n  @media (width < 500px) {\n    padding<\/span>: 1rem<\/span>;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Box Sizing<\/h3>\n\n\n
    *,\n*::before<\/span>,\n*::after<\/span> {\n  box-sizing<\/span>: border-box;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    The ultimate classic thing for a reset. When I don’t do it up-front, I very regularly find myself needing to circle back and add it. I originally went with the inheritance model<\/a>, but Miriam convinced me not to<\/a>, basically by saying it “solves a problem that doesn\u2019t really exist.”<\/p>\n\n\n\n
    Hanging Punctuation<\/h3>\n\n\n
    html<\/span> {\n  hanging-punctuation<\/span>: first allow-end last;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Preventing Breakouts<\/h3>\n\n\n
    html<\/span> {\n  word-break<\/span>: break-word;\n}\n\npre<\/span> {\n  white-space<\/span>: pre-wrap;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    These two are protective bits that essentially prevent long text (whether it wouldn’t naturally break or would be otherwise told not to break) from pushing a container wider than its parent would naturally be.<\/p>\n\n\n\n
    Headers<\/h3>\n\n\n
    h1<\/span>,\nh2<\/span> {\n  font-weight<\/span>: 900<\/span>;\n  letter-spacing<\/span>: -0.02rem<\/span>;\n}\nh1<\/span>,\nh2<\/span>,\nh3<\/span> {\n  line-height<\/span>: 1.1<\/span>;\n}\nh1<\/span>,\nh2<\/span>,\nh3<\/span>,\nh4<\/span>,\nh5<\/span>,\nh6<\/span> \/* FUTURE :heading *\/<\/span> {\n  text-wrap<\/span>: balance;\n  margin-block-start<\/span>: 0<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    The biggest two headers have a juiced up weight and are tucked in a little bit. The biggest three reduce their line-height<\/code> (1.4, like the rest of the document, is too much for large headers). All the headers (which can be selected with :heading<\/code> in the future) have wrapped balancing and have the margin above<\/em> them knocked out. I tried leaving most<\/em> of the user-agent stylesheet styles for stuff like this alone, but this one always annoys me.<\/p>\n\n\n\n
    Pretty Type<\/h3>\n\n\n
    p<\/span>,\nli<\/span>,\ndd<\/span> {\n  text-wrap<\/span>: pretty;\n  max-inline-size<\/span>: 88ch<\/span>;\n}\n\nsub<\/span>,\nsup<\/span> {\n  font-size<\/span>: 75%<\/span>;\n  line-height<\/span>: 0<\/span>;\n  position<\/span>: relative;\n  vertical-align<\/span>: baseline;\n}\nsub<\/span> {\n  inset-block-end<\/span>: -0.25em<\/span>;\n}\nsup<\/span> {\n  inset-block-start<\/span>: -0.5em<\/span>;\n}\n\npre<\/span>,\ncode<\/span>,\nkbd<\/span>,\nsamp<\/span> {\n  font-family<\/span>: ui-monospace, SFMono-Regular, monospace;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Those sub<\/code> and sup<\/code> styles date all the way back to the original Normalize<\/a>. I’m a fan because otherwise those elements can cause an extra-thick line-height in the middle of a paragraph and it’s quite unsightly. <\/p>\n\n\n\n
    Chilled Out Underlines<\/h3>\n\n\n
    a<\/span> {\n  color<\/span>: oklch<\/span>(0.68<\/span> 0.17<\/span> 228<\/span>);\n  text-underline-offset<\/span>: 2px<\/span>;\n  &:not(:is(:hover, :focus)) {\n    text-decoration-color<\/span>: color-mix<\/span>(in srgb, currentColor, transparent 50%<\/span>);\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Lists<\/h3>\n\n\n
    ul<\/span>,\nol<\/span>,\ndl<\/span> {\n  margin<\/span>: 0<\/span>;\n  padding<\/span>: 0<\/span>;\n  list-style<\/span>: inside;\n  ul,\n  ol,\n  dl {\n    padding-inline-start<\/span>: 2ch<\/span>;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    I like my list bullets inside the container and nested lists indented just a bit, matching the tab-size<\/code>. <\/p>\n\n\n\n
    Media<\/h3>\n\n\n
    img<\/span>,\nvideo<\/span>,\niframe<\/span> {\n  display<\/span>: block;\n  max-inline-size<\/span>: 100%<\/span>;\n  block-size<\/span>: auto;\n  border-style<\/span>: none;\n}\n\nfigure<\/span> {\n  inline-size<\/span>: fit-content;\n  margin-inline<\/span>: auto;\n}\nfigcaption<\/span> {\n  contain<\/span>: inline-size;\n  font-size<\/span>: 90%<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    I’m being protective here with my media elements, making sure they don’t break out of a container. Then if you are potentially limiting the width (inline-size), you need to let the height be free (block-size) so you don’t get squishing.<\/p>\n\n\n\n
    Forms<\/h3>\n\n\n
    input<\/span>,\nselect<\/span>,\ntextarea<\/span>,\nbutton<\/span> {\n  font<\/span>: inherit;\n  \/* FUTURE: apperance: base; *\/<\/span>\n}\nlabel<\/span> {\n  display<\/span>: block;\n}\ninput<\/span>:not(<\/span>\n  :where(<\/span>\n    [type=\"submit\"<\/span>]<\/span>,\n    [type=\"checkbox\"<\/span>]<\/span>,\n    [type=\"radio\"<\/span>]<\/span>,\n    [type=\"button\"<\/span>]<\/span>,\n    [type=\"reset\"<\/span>]<\/span>\n  )\n) {\n  inline-size<\/span>: 100%<\/span>;\n}\nbutton<\/span>,\ninput<\/span>:where(<\/span>\n  [type=\"submit\"<\/span>]<\/span>,\n  [type=\"reset\"<\/span>]<\/span>,\n  [type=\"button\"<\/span>]<\/span>\n) {\n  background<\/span>: CanvasText;\n  color<\/span>: Canvas;\n  border<\/span>: 1px<\/span> solid transparent;\n}\ntextarea<\/span> {\n  field-sizing<\/span>: content;\n  min-block-size<\/span>: 5<\/span>lh;\n  inline-size<\/span>: 100%<\/span>;\n  max-inline-size<\/span>: 100%<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Using field-sizing<\/code> on textareas is just correct, but you need a little extra there to make sure it doesn’t collapse.<\/p>\n\n\n\n
    SVG<\/h3>\n\n\n
    svg<\/span> {\n  fill<\/span>: currentColor;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    I’m not doing much for SVG. That could evolve. But for now I do like it when SVG icons color comes along for the ride and dare-I-say most<\/em> icons use fill<\/code> rather than stroke<\/code> for their main coloring.<\/p>\n\n\n\n
    Hidden (is a lie)<\/h3>\n\n\n
    [hidden]<\/span> {\n  display<\/span>: none !important<\/span>;\n}\n.screenreader-only<\/span>:not(<\/span>:focus)<\/span>:not(<\/span>:active)<\/span> {\n  clip<\/span>: rect<\/span>(0<\/span> 0<\/span> 0<\/span> 0<\/span>);\n  clip-path<\/span>: inset<\/span>(50%<\/span>);\n  height<\/span>: 1px<\/span>;\n  overflow<\/span>: hidden;\n  position<\/span>: absolute;\n  white-space<\/span>: nowrap;\n  width<\/span>: 1px<\/span>;\n}\n:focus-visible<\/span> {\n  outline-offset<\/span>: 2px<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Plus, you gotta have an accessible hiding class<\/a>. As a little bonus I think it looks a little nicer to push the default outlines away from elements a bit when they are tabbed to (with the keyboard). <\/p>\n\n\n\n
    Horizontal Rules<\/h3>\n\n\n
    hr<\/span> {\n  border-style<\/span>: solid;\n  border-width<\/span>: 1px<\/span> 0<\/span> 0<\/span>;\n  color<\/span>: inherit;\n  height<\/span>: 0<\/span>;\n  overflow<\/span>: visible;\n  margin-block<\/span>: 2.5rem<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    I hate the default weird beveled look. I just want a line with lots of space above and below it.<\/p>\n\n\n\n
    No Headbutting<\/h3>\n\n\n
    :target<\/span> {\n  scroll-margin<\/span>: 3<\/span>rlh;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    I also hate it when you #hash-link to something and it’s smashed to the edge of the browser window, potentially even hurting the context of why you’re linking to it. This is a magic number, but it feels good usually.<\/p>\n\n\n\n
    Tables<\/h3>\n\n\n
    table<\/span> {\n  caption-side<\/span>: bottom;\n  border-collapse<\/span>: collapse;\n  td {\n    font-size<\/span>: 90%<\/span>;\n  }\n  td<\/span>,\n  th<\/span> {\n    word-break<\/span>: normal;\n    border<\/span>: 1px<\/span> solid gray;\n    padding<\/span>: 0.5rem<\/span>;\n  }\n}\n[role=\"region\"<\/span>]<\/span>[aria-labelledby]<\/span>[tabindex]<\/span> {\n  overflow<\/span>: auto;\n}\ncaption<\/span> {\n  font-size<\/span>: 90%<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Motion<\/h3>\n\n\n
    @media (prefers-reduced-motion: no-preference) {\n  @view-transition {\n    navigation: auto;\n  }\n    \n  html {\n    interpolate-size: allow-keywords;\n    &:focus-within {\n      scroll-behavior: smooth;\n    }\n  }\n}<\/code><\/span><\/pre>\n\n\n
    This opt-in’s to multi-page view transitions which you probably almost always want, but only does it if the user hasn’t said they prefer reduced motion through their operating system. I think that’s highly appropriate here because it can make the whole screen move<\/em> which is the riskiest of all motion-sickness stuff in my experience.<\/p>\n\n\n\n
    This also opts-in to animate-to-auto<\/a> which just rules and allows for smooth-scrolling, but only when the page is focused (so doesn’t do that when you’re using “find” in the browser itself to search the page.<\/p>\n\n\n\n
    \n\n\n\n
    Critique?<\/h2>\n\n\n\n
    What do you like and dislike? What would you do differently? I love<\/em> scrutinizing other people’s starters\/resets, so I’m certainly open to the same on mine.<\/p>\n","protected":false},"excerpt":{"rendered":"
    A fairly opinionated CSS starter by Chris, following a set of personal principals to guide what is in there and what isn’t.  <\/p>\n","protected":false},"author":1,"featured_media":7255,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[7,405],"class_list":["post-7245","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-css","tag-starter"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/09\/The-Coyier-Starter-1.jpg?fit=1140%2C676&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=7245"}],"version-history":[{"count":18,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7245\/revisions"}],"predecessor-version":[{"id":7385,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7245\/revisions\/7385"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/7255"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=7245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=7245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=7245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
    This kicks the <caption><\/code> to the bottom of the table, where you’d normally put a <figcaption><\/code> so it just looks\/feels better. Then it smashes the border<\/code> of table cells together which just feels correct. Then it sets you up for proper very basic responsive tables<\/a>. Again, protective stuff.<\/p>\n\n\n\n
    Monica Dinculescu classic.<\/a> I think it’s worth being able to use (and trust) this attribute.<\/p>\n\n\n\n
    The first bit has form elements use the same basic typography as the rest of the site, which is a big improvement for consistency in a UI if you ask me. This is opinionated toward single-column full-width forms where research convinced me<\/a> is just better for users. Buttons flop out light\/dark colors and have an (invisible) border (which becomes visible in Windows High Contrast mode, so it’s an accessibility thing).<\/p>\n\n\n\n
    The figure\/figcaption stuff is from this whole journey<\/a> and I think it makes sense broadly.<\/p>\n\n\n\n
    You know I had to.<\/a><\/p>\n\n\n\n
    We balanced the headings above, but we can use pretty<\/code> on paragraph-y text for better typography<\/a>. I’m also limiting the line length by limiting size in the direction of the flow. That 88ch<\/code> still probably too<\/em> wide for most text. I just picked the Back to the Future number, but it’s not without merit<\/a>). I’m not trying to be ultra-opinionated in this case, just protective.<\/p>\n\n\n\n
    It’s just a little nicer looking so I’m taking my own advice<\/a>.<\/p>\n\n\n\n
    I was convinved this was a good idea from Mayank’s Your CSS reset should be layered.<\/a><\/p>\n\n\n\n