Use zero-width spaces to stop annoying Twitter users – CSS Wizardry

21 January, 2014

Table of Contents

Being the typically-polite Brit that I am, I often find myself feeling
sympathetic when I see people tweet things like I used Sass’ @extend, and
that @extend mentions a Twitter user who doesn’t want to see that tweet
at all. This doesn’t just apply to @extend, either; what about
@media, or @import, or anyone who has a Twitter handle that’s also
a CSS at-rule?

This morning, I had an idea that might ease their suffering: use zero-width
spaces to avoid mentioning people when you don’t mean to. Instead of writing
@import, you’d write @[zero-width-space-here]import.

The only problem with this is that, on a Mac, at least, there is no shortcut for
a zero-width spaces. Copying and pasting it—which, as you can imagine, is quite
difficult—from Wikipedia is too much effort to even bother…

I’ve long been a fan
of iOS’ (and now Mavericks’) keyboard shortcut mappings, so I decided to make
use of these again. I’ve mapped the following pairs:

!@import    @​import
!@media     @​media
!@extend    @​extend

The reason for the exclamation mark is so that I can still actually write
@import when I need it in my CSS/Sass; the !@import version
is just for use on Twitter.

To add these shortcuts on your Mac: