Mayank

@mayank.co

front-of-the-front end developer. usually writing CSS or listening to prog (or both). they/them

is it normal to make a website just to show my hair stylist so they fully understand what i want them to do with my hair?

one of my favorite code snippets that i've written: *:focus-visible { &:not(#a#b) { /* inflating specificity */ outline-style: solid !important; outline-width: 2px !important; } } placed outside all layers, and intentionally not using the `outline` shorthand for easier customization.

so done with rounded corners. give me pointy corners. give me razor-sharp "wear a glove before you press it" corners.

tidal keeps updating their UI seemingly every other day, and yet large parts of it remain untouched and broken. so many design issues just in this one little screenshot.

Screenshot of tidal's mobile homepage, showing two columns of tiny cards, all of them using the media object layout. Because of the small width, the labels are truncated. Because of the small height, the sublabels (artist names) are clipped by the bottom edge. Things are also generally misaligned and visually unbalanced.

too much good stuff is locked behind login (or worse, behind app stores). a few years ago, i would shake my head furiously. today, i still do that, but at the same time i get it because of all these fucking bots :/

what's the difference between these two lines of code? the first one imports the styles into a layer named css_is_awesome. the second one imports the styles into an anonymous layer if `@media (css_tooling_sucks)` matches. i've lost so many hours to this over the years.

@import "styles.css" layer(css_is_awesome);
@import "styles.css" layer (css_tooling_sucks);

don't like semicolons? you can punctuate your css with exclamation marks instead! p { color: hotpink! important}

<link rel="icon" href="data:," /> adding this line to all my starter templates to fix those pesky 404s.

the week has barely started but my open tabs are piling up fast 😬 (i like to close my browser at the end of the day)

Announcing The CSS Selection! 📰 www.projectwallace.com/the-css-sele... 📚 100,000 websites ⏱️ 100+ metrics 🔖 7 chapters The biggest deep-dive ever into real-world use of CSS across the globe. Dive in and find out some hidden gems. Also, see how much of 'the new CSS' is actually used!

The CSS Selection - 2026 Edition - Project Wallace

The CSS Selection shows real-world CSS usage from over 100,000 websites and looks at the most important metrics.

projectwallace.com