The CSS+ bundle is a project I've been working on for a while. It is a vast collection of CSS snippets and commands which has completely changed the way I write CSS.

When I started using TextMate for development I was amazed by the simplicity and flexibility of its Bundle Editor. This, coupled with existing bundles such as Minimal Design's mCSS bundle inspired me to find ways to use it to speed up my general development. While the mCSS bundle is an amazing piece of work, I felt it could do so much more. With this in mind, I started my own bundle, with the view that I would never need to write a line of CSS by hand again.

Using the bundle

The CSS+ bundle contains (nearly) every line of CSS you will ever need to write, all mapped to Tab Triggers. All the shortcuts have been set up so you can write the first letter of each word in the line you want, then hit tab to expand the full line.

c  -> colour: #fff;
b  -> border: 1px solid #777;
mt -> margin-top: 10px;
ts -> text-shadow: 1px 1px 2px #000;

Multiple Choice

You can also add the first letter of each word within values for extra control.

db  -> display: block;
di  -> display: inline;
dib -> display: inline-block;
dn  -> display: none;

The value is optional for some properties and if omitted, a multiple choice drop-down appears to assist you in finishing the line.

oa -> overflow: auto;
o  -> overflow: auto;  
      overflow: hidden;
      overflow: scroll;

Exceptions

As there are so many CSS properties available, there are some inevitable clashes. To avoid these, some properties use the first two letters of their initial word as their triggers. While this seems confusing, after a few uses it becomes second nature. It also avoids confusing multiple choice drop-downs with too many mixed values.

fl  -> float: ; /* f is reserved for font */
flr -> float: right;
cl  -> clear: ; /* c is reserved for color */
cll -> clear: left;
bg  -> background: ; /* b is reserved for border */
bga -> background-image: url("image.png");

Tab Stops

If you write a line where the value is customisable, for example a colour or pixel value, the editable value will be automatically highlighted for you to edit.

w -> width: 10px;
c -> color: #fff;

Multiple Tab Stops

Some snippets have multiple tab stops to allow complete control. At each step, the value can be changed - or removed, with another tab press highlighting the next value. Pressing tab a final time will always leave you at the end of the line, ready to continue coding.

/* Continue tabbing to move through all values*/
b -> border: 1px solid #777;
  -> border: 2px solid #777;
  -> border: 2px dashed #000;
  -> border: 2px dashed #000;

Nested Tab Stops

Another cool feature of the bundle is that some snippets contain nested tab stops. This means that, for example with background position, the default value of 0px is automatically selected. This means you can write a percentage or keyword in its place. If instead, you press tab again, the selection changes to just the unit part, allowing you to change the pixel value without the need to type px each time.

/* Continue tabbing to move through all values*/
bgp -> background-position: 0px 0px;
    -> background-position: 0px 0px;
    -> background-position: 5px 0px;
    -> background-position: 5px 0px;
    -> background-position: 5px top;

Pseudo Classes, Pseudo Elements and Attribute selectors

As well as speeding up writing properties and values, the CSS+ bundle helps with selectors.

a:h     -> a:hover
li:fc   -> li:first-child
span:b  -> span:before
span::b -> span::before
[       -> [attr="value"]

Special Values

Some properties can be triggered in multiple ways, to quickly reset values to empty or default values. As with the mCSS bundle, these can be triggered by repeating the final letter of the trigger.

m  -> margin: 10px;
mm -> margin: 0;
l  -> left: 10px;
ll -> left: 0;

CSS3

I've tried to include as many CSS3 properties and selectors as possible, but with more frequently surfacing there are probably a couple missing. If you find any that don't appear in the CSS+ bundle, you can either add an issue on GitHub which I will fix, or fork the bundle and submit your own pull request.

All the CSS3 properties in this bundle are prefix free. This is a conscious choice, as many people already have their own ways of dealing with these, either by hand or through a service such as Prefixr. I've created a separate TextMate bundle and Sublime Text snippet as my way of adding relevant prefixes.

Use with TextMate

This bundle has a well organised menu structure, so for an overview of all the commands and snippets available, go to Bundles -> CSS+ in the menu bar. The snippets are organised into groups, with each snippet listing its keyboard trigger for reference. At the bottom of the menu is an 'Update Bundle via Git' option which will ensure your version of CSS+ is up to date.

I have also included a handy colour conversion command to speed up switching between colour formats. With your caret (text cursor) on the correct line, press cmd + ctrl + c to switch between Hex, RGB and RGBa formats. This command currently only works on lines which contain one colour.

Use With Sublime Text

I switched from TextMate to Sublime Text a while ago, as it is a much more feature rich editor. One of the deciding factors for the switch was that Sublime supports TextMate bundles. That said, the support isn't flawless. The colour format command doesn't yet work and it sometimes has trouble if you delete a set of nested tab stops, with it still requiring that you tab through all of the removed tab stops before allowing you on to the next snippet.

Even with these drawbacks, the CSS+ bundle if definitely a must for anyone who writes CSS. Sublime also adds the advantage that users on Windows and Linux can make use of this normally OSX bundle.

Download

The best way to get your hands on this bundle is to clone it using Git. This means you can easily update it when changes are made. Installation instructions, as well as a regular download version of the CSS+ bundle can be found on GitHub.

Download / Source