Editorial Design Patterns with CSS Grid and Named Columns

hankchizljaw.com hankchizljaw.com3 years ago in #Dev Love348

🇯🇵 If you would prefer to read this article in Japanese, head over here, where コリス has very kindly translated it for me. I think about and enjoy very boring CSS stuff—probably much more than I should do, to be honest. One thing that I’ve probably spent too much time thinking about over the years, is CSS resets. In this modern era of web development, we don’t really need a heavy-handed reset, or even a reset at all, because CSS browser compatibility issues are much less likely than they were in the old IE 6 days. That era was when resets such as normalize.css came about and saved us all heaps of hell. Those days are gone now and we can trust our browsers to behave more, so I think resets like that are probably mostly redundant. A reset of sensible defaults permalink I still like to reset stuff, so I’ve been slowly and continually tinkering with a reset myself over the years in an obsessive code golf manner. I’ll explain what’s in there and why, but before I do that, here it is in its entirety: *,*::before,*::after { box-sizing: border-box;}ul[class],ol[class] { padding: 0;}body,h1,h2,h3,h4,p,ul[class],ol[class],li,figure,figcaption,blockquote,dl,dd { margin: 0;}body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5;}ul[class],ol[class] { list-style: none;}a:not([class]) { text-decoration-skip-ink: auto;}img { max-width: 100%; display: block;}article > * + * { margin-top: 1em;}input,button,textarea,select { font: inherit;}@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }} Breaking it down permalink We start with box-sizing. I just flat out reset all elements and pseudo-elements to use box-sizing: border-box. *,*::before,*::after { box-sizing: border-box;} Some people think that pseudo-elements should inherit box sizing, but I think that’s silly. If you want to use a different box-sizing value, set it explicitly—at least that’s what I do, anyway. I wrote about box-sizing more over on CSS From Scratch. ul[class],ol[class] { padding: 0;}body,h1,h2,h3,h4,p,ul[class],ol[class],li,figure,figcaption,blockquote,dl,dd { margin: 0;} After box-sizing, I do a blanket reset of margin and padding, where it gets set by the browser styles. This is all pretty self-explanatory, so I won’t get into it too much. I will mention the situation with lists, though. I select only lists that do have a class attribute because if a plain ol’ <ul> or <ol> gets used, I want it to look like a list. A lot of resets, including my previous ones, aggressively remove that. body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5;} Next up: body styles. I keep this really simple. It’s useful for the <body> to fill the viewport, even when empty, so I do that by setting the min-height to 100vh. I also like smooth anchor scrolling, so I set scroll-behavior: smooth, too. I only set two text styles. I set the line-height to be 1.5 because the default 1.2 just isn’t big enough to have accessible, readable text. I also set text-rendering to optimizeSpeed. Using optimizeLegibility makes your text look nicer, but can have serious performance issues such as 30 second loading delays, so I try to avoid that now. I do sometimes add it to sections of microcopy though. ul[class],ol[class] { list-style: none;} Just like the margin and padding rules, I only reset list-style where a list element has a class attribute. a:not([class]) { text-decoration-skip-ink: auto;} For links without a class attribute, I set text-decoration-skip-ink: auto so that the underline renders in a much more readable fashion. This could be set on links globally, but it’s caused one or two conflicts in the past for me, so I keep it like this. img { max-width: 100%; display: block;} Good ol’…

Like to keep reading?

This article first appeared on hankchizljaw.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply