Sublime Text CSS code management

Tips & Tricks for CSS Development with Sublime Text

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

Shortcuts

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.

Colors

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

ASCII

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

ZEN

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:

Use a fixed indent e.g. 4 tabs or 4 spaces
Put selectors with a single declaration in one line
Keep selectors in groups
Make an empty single line before and after each selector
Always sort CSS attributes the same way, use CSS-comb or PostCSS Sorting

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.