Things To Avoid When Writing CSS

Multiple files

A lot of web development seems to be about splitting things up into manageable chunks or “components”. For each discrete bit of javascript functionality or each HTML partial I might make a dedicated file, then organize related files into folders named javascript and html or controllers and templates. Whatever you like. This way, you can easily dip into the file system and focus on just the file containing the code you want to edit at the time.

- buttons.css 
- reset.css

Nesting (with Sass)

I’m ambivalent about Sass. Some things about it really excite me, like the ability to write generatively, using loops and conditionals. Other features, like the ability to nest declarations infinitely, aren’t so hot.

Pixel units

Back when Internet Explorer 6 was still a thing, we were told to set font sizes in em units. Newer browsers, with zoom functionality, made it easy to increase the size of the page content proportionately, but in IE6 you could only increase the font size. Since text set in pixels refuses to be enlarged, we’d otherwise be marginalizing a lot of low vision users.

@media (min-width: 400px) { 
h1 {
font-size: 22px;
margin-top: 33px;
}
}
h1, h2 { margin-top: 1.5rem; } 
h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
/* all your other element styles */
@media (min-width: 400px) { /* "Should be ems too!" - lots of folks :-) */
html {
font-size: 120%;
}
}
body * + * { 
margin-top: 1.5rem;
}

Device breakpoints

A few months ago, in the wake of Apple’s latest Chinese factory exorcism, I read a tweet by a commentator. Their tweet contained a diagram of, “all the viewports available on iOS 9 for Responsive Web Design”.

Fuck CSS, let’s rock

Thank you for indulging my opinions on CSS authorship. If you’re a fan of web accessibility and music (who isn’t?) and you’d like to support a couple of awesome organisations, check out A11Y ROCKS.

Part Two

There is now a second instalment of Things To Avoid When Writing CSS. Read part #2.

--

--

I often eat rice and do not own an Audi. I know CSS and accessibility. I have a blog about inclusive interaction design: https://inclusive-components.design

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Heydon

Heydon

I often eat rice and do not own an Audi. I know CSS and accessibility. I have a blog about inclusive interaction design: https://inclusive-components.design