Use zero-width spaces to stop annoying Twitter users

Written by on CSS Wizardry.

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.


Did you enjoy this? Hire me!

Hi there, I’m Harry. I am an award-winning Consultant Front-end Architect, designer, developer, writer and speaker from the UK. I write, tweet, speak and share code about authoring and scaling CSS for big websites. You can hire me.


I am currently accepting new projects for Q1–2 2017

Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Events

I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance and CSS scalability and maintainability are paramount.