Sublime Text CSS code management

Tips & Tricks for CSS Development with Sublime Text

On the Road Manuscript - © Thomas Hawk
On the Road Manuscript - © Thomas Hawk

I spend quite a faire amount of time working with large CSS Files. Here are a few tricks & tipps which help me to achieve faster CSS coding. This tutorial doesn't include SASS or LESS :P


Quickly moving around in a big file is a huge time saver, here are a few Sublime shortcuts which help achieving this.

Go to Line Number

Press CTRL + G - input the desired Line Number and press enter to jump there.

Sublime IDE screencast - goto line number

Jump to CSS Selector

Press CMD + R - type in the selector name your are looking for and press enter to jump there in your codebase.

Sublime IDE screencast - jump to selector

Jump between Curly Braces

Put your cursor on any curly bracket and press CTRL + M to jump to the beginning/end of the declaration block.

Selection Fun

Expand your selection in steps with CMD + SHIFT + SPACE each time your press the shortcut the selection expands one step further.

This shortcuts also works in other code languages!

Minimap Helpers

Here are two useful addictions to the great Sublime Minimap feature.


Syntax Colors can be a big help to get a better overview of your code. I use Monnoroch's ColorHighlighter to color the Attribute text in the given color value, this colouring can be seen in the Minimap which helps locating a specific color attribute.

Sublime IDE Screenshot - syntax coloring


The newest addition to my tool box is the SublimeFiglet plugin from Adam Chainz. This plugin can create big ASCII texts blocks, which can help to visualize code sections. THis sections can also be seen in the Minimap, which can help to navigate big CSS files. ASCII text always remind me of my childhood when the Commodore64 was around ;-)

Sublime IDE Screenshot - ascii text


Of course no CSS tricks without a hint to ZEN-Coding. Use the Emmet Plugin! Really do it, learning how to use the this plugin will greatly improve your speed coding CSS.

Sublime IDE Screenshot - emmet plugin text

Errors, Style & Production

Lint your code

To reduce errors do yourself a favour and lint your CSS code while you type. Use the Sublime Linter with csslint — this github issue helped me to configure the iguration the css linter rules in this github issue — How to configure rules to exclude/ignore

Make a Styleguide for your own code

In your co-workers, collages and your own interest try to produce "clean" code. As your codebase might grow over time, it can help to set some formatting rules to follow. Here are some examples examples:

BEM your code

Another interesting option seems BEM (Block, Element, Modifier methodology). I want to include this workflow in my next project — see BEM 101 for more information.

Prefix your code

Write your CSS code without any Browser Vendor pre-fixes and use the Autoprefixer to automatically add them later on, with your Taskrunner or directly in Sublime Text.