Quickly Modify CSS Syntax With CSSEdit 3


Quickly Modify CSS Syntax With CSSEdit


If you are a into web development at all you should be familiar with CSSEdit. I have reviewed it before, its the one app that takes the pain away from hand writing CSS code, I love it and use it all of the time. This post is going to show you a couple of tricks and tips, to get your CSS formatting look neat and tidy, as well as efficient. It doesn’t take much, just a bit of know how. If you want to learn more about CSS, I recommend CSS: The Missing Manual.

Normal CSS code, with syntax highlighting will look like the image below. Pretty standard.

The first step is to get all of you code lined up nice an neatly. If you are like me, I prefer code to be tabbed correctly, have the required spacing underneath each section etc. Usually you would have to go through this by hand. But CSSEdit has a good little command called Re-Indent. If you hit this button, it will indent all of the code so it looks perfect. No need to select the text as I found out after using this tool about a hundred time. It turns code into something that looks similar to the image above. You can, by the way, just apply this to small sections.

The next tip is a way to change the formatting to what you want. Did you know that:

#style{padding: 0 5px; margin: 10px 5px;}

takes up disk space than:

padding: 0 5px;
margin: 10px 5px;

its not by much, but it can add up. As well as this I think the first is a bit easier to work with. To change the formatting to this style (or any style you want). Go to Format > Re-Indent With Spacing… here you will see a screen similar to the one below. That is the formatting that is actually applied to the example above, but this box is change able, so you can change the spacing between the words.

For example you can remove all of the spacing entirely this takes up a very small amount of room, and on a big style sheet it can really make a difference.

If you click through to the image below you can see the difference below. Everything is more compact. For example before with full, very easy to read formatting, the style sheet was 1558 lines. Once as the Re-Indent was applied it took up 263 lines. This is a massive difference. As well as this it also makes it a lot easier to find selectors you want.

It is fun to play with this tool. You can easily change the way the formatting works to your liking. Although the second options doesn’t have a whole lot of disk space, 4Kb, it will eventually add up. If you have a million visitors its around 4Gb of save bandwidth (if my math is correct). It would be even bigger of a deficit if you had a massive style sheet for a really large website.

If you want to find out more on saving space with style sheets, if found a cool article as I was writing this post. Head over to The Web Squeeze, which gives a lot more information. Hopefully you have found this article informative, and gives you insight into some of the cool tricks you can do with CSSEdit. Now I just wished there was a way to put the code in the selectors in alphabetical order.

To learn more about CSS in all its glory I recommend CSS: The Missing Manual from Amazon.

If you want to keep up with the latests post from Mac Tricks And Tips I recommend you subscribe to the RSS Feed.

Where To Next?

  • Subscribe To Mac Tricks And Tips