Use zero-width spaces to stop annoying Twitter users

Written by Harry Roberts on CSS Wizardry.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

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:

1. System Preferences
2. Keyboard
3. Text

On your iPhone:

1. Settings
2. General
3. Keyboard
4. Shortcuts

Copy/paste the above rules into their respective boxes, and done. Add any more that you think might be useful.

I just used this for the first time, it worked a treat.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

By Harry Roberts

Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.