Podcast #27: CSS Workflow and Tools
Kyle Cronin
This is the twenty-seventh episode of the Ask Different Podcast. Your hosts this week are Kyle Cronin, Jason Salaz, Nathan Greenstein.
- We’re back already from our summer hiatus! Our topic this week is CSS development on the Mac.
- The software one spends the most time in when working with CSS is, of course, a text editor. Nathan is a fan of Chocolat, which is lightweight but full featured. Kyle likes TextMate for its powerful CSS bundle features. Jason loves Vim for its many powerful shortcuts and built-in editing tools.
- The next step up from a plain text editor is a dedicated IDE for web development, which usually includes previewing and deployment tools. We’re all big fans of Coda 2; its recent update has brought its capabilities beyond those of Espresso. The Hints and Navigator panels are especially helpful for working with CSS.
- We also discuss Diet Coda, a pared-down version of Coda made for iPad. The app’s editing and terminal features are attractive, but being limited to working with files directly on a server reduces the app’s value.
- Beyond a good editor, there are a few tools that can streamline the writing process even farther. Nathan has set up TextExpander to automatically expand abbreviations of properties that are hard to type. If a design is started in Photoshop, the CSS Hat plugin can also save time by automatically generating CSS rules to match the styling of an object.
- After writing CSS comes testing it. A tool called LiveReload streamlines this process considerably by automatically injecting new CSS into a webpage as you save, which is especially helpful when tweaking the design of a stateful web app. CodeKit is a similar tool with some compelling features, but its reloading capabilities are less robust.
- The WebKit developer tools are hugely helpful when tweaking CSS, allowing one to quickly change and test values, and when debugging, showing the cascade so one can diagnose specificity issues. Additionally, the Firefox developer tools have been greatly improved recently and are becoming comparable to the WebKit tools, even boasting a few unique capabilities.
- Returning to the process of writing CSS, we discuss two preprocessors, SASS and LESS. These languages are supersets of CSS that add helpful features like variables and nesting. LiveReload and CodeKit can automatically compile code written in these languages into standard CSS.
- After testing comes deployment, starting with minification. Smaller is a great tool that allows one to easily combine and minify all the code in a deployment folder. An IDE’s tools can be used to upload files to a deployment server, as well as dedicated apps like Transmit.
- Finally, we share one final tool that can be helpful when either working on a team or reading existing CSS. ProCSSor can prettify and un-minify CSS documents, ensuring that they adhere to the formatting rules you select.
