- Version 10.0.1
- Project Flyweb Production
- Section blog
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
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
CTRL + G - input the desired Line Number and press enter to jump there.
Jump to CSS Selector
CMD + R - type in the selector name your are looking for and press enter to jump there in your codebase.
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.
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!
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.
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 ;-)
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.
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.