Bart Veneman

Creator of Project Wallace, analytics for CSS. <noscript>-fanboy. Serverless clearfix engineer. I can lift node_modules twice my own weight.

Using Custom CSS to improve the web

Like many other web devs I browse the web quite a lot. And while every website has it's own personality, some of them have a bit too much for my taste. Luckily I have a browser plugin to apply some custom CSS to any site, so I'll share a short list of snippets that I use to improve my everyday life.

Twitter is where I have most of my conversations with other folks in Tech. This means that the (chronological) timeline is most important to me. Other things worth my time are:

Things that aren't useful and should therefore be hidden:

/* Floating: DM's */

/* Menu: Explore */

/* Menu: Lists */

/* Sidebar: Trending now */
[aria-label="Timeline: Trending now"],

/* Sidebar: Who to follow */
[role="complementary"][aria-label="Who to follow"],

/* Sidebar: Recommended topics */
[aria-label="Timeline: "]
display: none;

/* Sidebar: Recommended topics */
.r-1bro5k0 {
min-height: 0;

I adore XState and I use it in many different projects in many different forms (backend, frontend, models, controllers, UI). But whenever I use the Visualizer, I run out of horizontal space for the editor pretty quickly. I must admit that working on a 34" ultrawide is a luxury, but with that luxury I like to have more space to write my Finite State Machines.

Kudos to David Kourshid for using Custom Properties for setting the width. Makes it extra easy to override.

html {
font-size: 120%;

/* Crank up the sidebar width (where we write the code) */
--sidebar-width: 50rem;

Wikipedia is for looking up things and then reading. Lots of reading. And wikipedia articles tend to be long. That's fine, but the default styles aren't really optimized for long-form reading. So here's the summary of my

/* Make content more pleasant to read */
body {
font-weight: 400;
font-size: 1.2em;

max-width: 90ch;

/* Hide distracting elements (ads, navigations) */
display: none;

#mw-head-base {
height: 3em;

I use Gatsby for work and I'm not that interested in seeing marketing stuff. I need docs to make things work.

#marketing-banner {
display: none;

There's pretty much no focus state for search results, apart from a tiny 14px url changing from green to blue. So I added my own.

.result:focus-within {
outline: 2px solid;

Although most of this CSS isn't too hard, I've had to look up some attribute selectors to see the difference between some of them. That makes writing this custom CSS a little bit more of a fun journey.

Do you use custom CSS on any websites? Share your snippets with me (and everyone else) via Twitter!