A quick Sublime hack for faster Sass/CSS editor productivity

tl;dr: I made a Sublime plugin to show the corresponding CSS selector in the status bar when your cursor is next to a closing brace. Here’s why.

Staying in flow is one of the hardest and most important things you can do as a programmer. It’s why the smallest optimizations to your environment and workflow really matter. Whenever I’m not in flow, I think about how to get (and stay) in flow, a lot.

When Hakim el Hattab recently tweeted a cool idea for a Sublime plugin, it got my mind racing:

It piqued my interest partly because I’ve been hacking a lot of CSS lately, and partly because in a former life I wrote a tremendous amount of Java. Writing Java involves a lot of verbose code, so I was a big fan of IntelliJ IDEA for its innovative editor features, many of which were mind-blowingly awesome, especially at the time.

Whenever your cursor was over a closing brace, it would passively display a popup to show you the declaration from the corresponding opening brace, assuming that declaration wasn’t currently in the visible editor window:


The popup was easy to ignore if you didn’t need it, but incredibly useful when you did: it stopped you having to scroll back up your code, which might have meant a keyboard-mouse switch, or might have meant another part of the code distracted you, etc. Very useful for staying focused and in flow.

In Sublime, we can’t yet make anything quite that awesome: there’s no API for displaying rich annotations over the code. But we can do the next best thing: ensure the opening declaration/selector is visible somewhere that we can control — the statusbar.

I built Sublime-CSS-Selector-Reveal to do exactly that:
CSS Selector in the Statusbar

It’s most useful when editing SCSS files where you might have a lot of nesting. It’s a simple plugin but as I’ve written about before: a lot of simple improvements to a programmer workflow can provide big cumulative productivity benefits. Combine it with the official SCSS support for textmate/sublime and you’ve got yourself a step-change in Sass/CSS editing productivity.

I’m going to keep saying this until people start sending me their plugins: writing a plugin for Sublime is insanely easy compared to most editors. It gives you a better understanding of your editor, and it makes you a better programmer.

Let me know your great plugin ideas in the comments below, especially if you’ve started working on them!

to see future workflow hacks, front-end dev tips, tricks and more.

This entry was posted in CSS, Tools. Bookmark the permalink.

1 Response to A quick Sublime hack for faster Sass/CSS editor productivity

  1. ulfgj says:

    funny. when trying it out in a php file on the brackets of this if-statement:

    if (function_exists('register_nav_menus')){
    register_nav_menus ( array( 'primary' => 'Header navigation' ));

    i get this, of course 🙂

    CSS:if (function_exists('register_nav_menus'))

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s