-prefix-free: break free from CSS-prefix hell

-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

An explanation of the CSS animation on Apple's iPhone 4S webpage

Great visualization of how Apple’s clever, CSS3-animated iPhone4S website is constructed.

LiveReload for OSX

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.

Zen Coding — a new way of writing HTML and CSS code

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. For example:

div#page>div.logo+ul#navigation>li*5>a

…can be expanded into:

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

CSS Prism by Ryan Berg

Sprite Cow

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css. Load the example image, and have a click around. It becomes pretty obvious.

This is really well done.

Asciiflow - ASCII Flow Diagram Tool

IMG to CSS

Looks like it creates a table with the appropriate number of pixel-sized cells to build the image. Pretty clever.

Stubbornella » Our (CSS) Best Practices Are Killing US

Each time we start a new project, we think “this time, I’m going to keep the code clean. This time the project will be a shining example of what can be done with CSS.” And without fail, over time, as more content and features are added to the site, the code becomes a spaghetti tangle of duplication and unpredictability.

It is time to let ourselves off the hook. There is nothing we could have done by trying harder. There is no magic juju that some other developer has that we don’t. Following our beloved best practices leads to bad outcomes every. single. time.

holmes.css - CSS Markup Detective

Holmes is stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class.

ProCSSor - Advanced CSS Prettifier

ProCSSor is a powerful (and wholly free) CSS prettifier that lets you format CSS in the exact way you want. It empowers you to turn your CSS into something that is visually more compelling, and with a minimum of effort at that.

Adapt.js - Adaptive CSS

Adapt.js is a lightweight (777 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.

Powerful New CSS Techniques and Tools - Smashing Magazine