This is not an attempt to create a list of all existing tools for CSS development. Only some of the most useful ones were selected and placed in the appropriate categories.


For a tool to be truly useful, it must have good documentation and a friendly interface. Unfortunately, some tools in the list are not fully covered by these criteria. If someone knows better alternatives with a friendlier interface and more functionality, write in the comments.

Layouts

CSS Layout Generator
This generator can create a three-column (one-, two-) layout with floating or fixed markup, containing header and footer. Dimensions can be specified in px, em or%.

Grid designer
Allows you to create a modular grid layout, taking into account such parameters as: the number of columns, the distance between columns, the size of the fields, the size of the main font, size of titles, indents, etc. You can also see how the basic elements of text formatting in this grid will look.
')
Layout Generators
Allows you to create rubber multicolumn or grid markings. Allows you to set the width and color. CSS code is generated automatically.

Generator HTML + CSS templates
The service allows you to get a ready-made frame with the necessary parameters in a few mouse clicks. After selecting the options, you will be offered to download the archive, which contains 2 files with HTML and CSS.

PSD2CSS
Service, for converting PSD layouts to the converted page. Fast, free and relatively high quality.

CSS frameworks

Boks
Boks is a visual editor for the CSS framework Blueprint, made in the form of an Adobe AIR application. With the help of this editor, you can visually create and fill a marking grid, set a vertical rhythm, and export the result in HTML and CSS.

Useful tools and links for the CSS framework Blueprint.

YAML Builder
YAML Builder is an online service for visually creating templates based on the HTML / CSS framework of YAML.

YUI CSS Grid Builder
A simple web interface used to quickly create cross-browser templates based on the YUI grid.

960 Grid System - Variable Grid System
The Variable Grid System is a quick way to create a CSS grid based on the CSS framework 960 Grid System.

Grid system generator
Grid System Generator allows you to create templates with fixed markup and valid CSS / XHTML. Templates can be based on one of four CSS frameworks: 960 Grid System, Golden grid, 1kb grid, Simple grid system. In addition to each template, a png file is also created for design in Fireworks, Illustrator, OmniGraffle, Photoshop or Visio.

Fonts

Typetester
Typetester is a very successful web application designed to compare fonts to each other. According to the developers, the main task is to make life easier for the web designer. You can compare three fonts at the same time.

CSS Type Set
This is a service that allows you to apply properties to CSS text and see how it will look.
All changes are instantly reflected in the example, and the generated CSS code can be copied and used in the future.

Typechart
Using Typechart you can evaluate the design of various fonts. After finding your favorite version, you can copy the CSS code for use on your site.

Texster
Texster - service for the selection of "safe" fonts for your site. Despite the fact that there are many similar and mostly foreign resources, texster is different in that the results are displayed immediately for all fonts, which allows you to compare them and select the desired one.

CSS-Typoset Matrix and Code Generator

CSStxt
A simple web based tool for creating CSS font styles.

EM Calculator AIR Application
Vertical Rhythm Calculator in XHTML & CSS; easily converts px to em; padding and margins are calculated automatically.

Em calculator
Em Calculator is a small JavaScript tool that converts a specific px value to the corresponding value in em.

PXtoEM
PXtoEM is a table showing font sizes in various units, which also helps to convert a size from one value to another.

Colour

CSS Color Editor
CSS Color Editor allows you to replace the color scheme of the website. On the service local CSS file, new colors are selected, and then the service generates a CSS file with already replaced colors.

Color Palette Generator
For a given pattern, a color palette consisting of key colors is generated.

Color Contrast Check
A truly intuitive online color-checking tool that allows you to bring foreground and background colors in hexadecimal format or with sliders. The tool gives an instant result - shows how this combination looks like and whether it has sufficient contrast when viewed by people who have a color perception problem or when viewed on a black and white screen (WCAG 2 test).

Colorzilla
ColorZilla extension for Firefox. In ColorZilla, you can get the color by clicking anywhere on the site and then transfer this color to any other program (there are 5 color description options). You can zoom the page (20% - 1000%). There is also a built-in palette viewer, favorites, DOM inspector and firebug support.

HSL to RGB Converter

Sprites

CSS Sprite Generator
This tool allows you to automate the process of creating CSS sprites. Just give it a ZIP file containing 2 or more images (GIF, PNG or JPG), and it will generate a sprite image and the corresponding CSS rules for orientation and display of each image element.

YASC (Yet Another Sprite Creator)
Another generator. The process of creating a sprite is the following: the image is loaded, then the necessary areas are visually marked and assigned a CSS id. When all plots are selected, CSS is generated for these sprites.

Smartsprites
SmartSprites is a console Java utility for creating CSS sprites. SmartSprites handles special directives in the CSS file, marking individual images that should be turned into sprites. After processing the CSS file from the selected images, a sprite is created, and the corresponding fragments of the file are automatically changed to use the sprite instead of single images.

Forms

Quick Form Builder
Generates XHTML / HTML compatible and accessible forms with CSS markup. Enter the field names, then select the type of each field format (HTML or XHTML) and get the ready HTML and CSS code of the form.

Wufoo
Wufoo is a free online service that makes it easy to create good-looking, valid CSS / XHTML forms.

UI components

List-matic
Generates navigation menus (up to 2 levels), allowing you to select one of several available designs.

CSS Menu Generator
Generates horizontal, vertical, drop-down CSS menus.

ThemeRoller
Allows you to create your own themes for jQuery UI.

Text wrapper

CSS Text Wrapper
The CSS Text Wrapper service makes it easy to give the text any shape and paste it onto your page. Lines set the form. Anchor points are added by clicking on the line in the place where you want to add. You can customize block sizes, alignment, font, etc.

The box office
This tool that will allow you to create text wrapping for images with different irregular shapes. Just enter a link to any image of arbitrary shape, set the main alignment of the image, the background color to be ignored, the height of the line, additional indents and text color, and then follow the result.

Analysis and Debugging

W3C CSS Validation Service
CSS validation check.

CSS Analyzer
CSS Analyzer combines the W3C CSS Validation Service and additional color checking for contrast (useful for improving usability) and the units of measure used in the source code. The result is a very detailed description of errors and warnings, just like in the W3C CSS Validation Service.

Firebug
Firebug is a Firefox browser extension that is a console, debugger, and DOM inspector for JavaScript, DHTML, CSS, XMLHttpRequest. Firebug shows in the console the function that caused the error, the stack of function calls that caused this error. He warns that the CSS rule or JavaScript method / property you are trying to use does not exist.

Escort

Dust-Me Selectors
Allows you to analyze the page and show how many and which styles are not used on the site page, and also indicate in which style file, in which line they are written.

Csscleaner
A Windows application for removing unused CSS classes.

CSS Redundancy Checker
Checks whether all rules from CSS are used in HTML. After verification, displays a list of unused on this page or group of pages.

Optimization

CSS Drive CSS Compressor
CSS compressor with compression options “Weak”, “Normal” and “Super Compact”.

Robson CSS Compressor
Another good tool for compressing CSS files is the Robson CSS Compressor. While he is under development, and there may be inaccuracies in his work.

MinifyMe - AIR Application
A small AIR application that allows you to collect several css-files into one.

Formatting

CleanCSS - CSS Formatter and Optimizer
Clean CSS is a popular online tool for CSS formatting and optimization. Contains settings groups for balance between optimization and readability. One of the important features is the automatic connection of identical selectors and properties.

Styleneat
Styleneat transforms CSS code into a standardized, readable format, structures it in such a way that it becomes easy to understand where are what areas and how they relate to each other.

CSS toolbox
Free CSS Toolbox includes many tools for quick and effective development of CSS –validator, formatter, optimizer.

Browser dependency

Conditional-CSS
A parser for CSS files on the server side, checking for the type and version of the browser. Allows you to create special conditional comments for different groups of browsers. PHP, C # and C versions are available.

7 Easy Ways to Test Cross-Browser Compatibility

Web Browser CSS Support
Detailed table of support for CSS standard by popular browsers.

When Can I Use?
It makes it possible to compare browser support for various new technologies, namely, HTML 5, CSS 3, SVG, etc. You can choose as certain browsers, time periods, statuses, and certain technologies.

IE7.js
IE7-js is a JavaScript library that fixes many bugs in HTML and CSS for Internet Explorer versions 7 and below. For example, it fixes transparency support in PNG, fixed positioning of elements and background images (position: fixed), support for the pseudo class: hover for all tags, etc.

Modernizr
Modernizr is a small simple Javascript library that will help to use technologies such as CSS3, HTML5 in browsers that do not yet support this technology.

Selectors

Sizzle JavaScript Selector Library
Fast JavaScript CSS selectors engine. Sizzle supports almost all CSS3 selectors — even rarely used ones like shielded selectors (".foo \ + bar"), Unicode selectors, etc.

YASS: Yet Another cSS selector
The fastest JavaScript library for selecting items by CSS selector.

SelectORacle
The service provides a description in human language of complex CSS selectors and can be very useful when learning of these.

YUI Selector Utility
YUI Selector Utility allows you to use CSS3 syntax selectors on JavaScript, simplifying the collection, filtering and testing of HTML elements.

YUI StyleSheet Utility
Using StyleSheet Utility on the fly to create and modify CSS styles.

miscellanea

XRAY
XRAY is a bookmarklet that can display various useful information about all the "internals" of a page. In particular, the size of all elements, the coordinates of their location, CSS properties, the names of HTML tags corresponding to the displayed blocks, and some other details.

Cheat sheets

CSS Cheat Sheet
A one-page CSS cheat sheet listing all selectors (CSS 2.1) and properties. Includes picture box-models, units of measurement CSS.

CSS Shorthand Cheat Sheet

YUI Library: CSS Reset, Base, Fonts, and Grids

Blueprint CSS Cheat Sheet

Beyond CSS

MoreCSS
MoreCSS is a JavaScript-oriented library of designers that allows you to write code in CSS style to create pop-up windows, tooltips, menus on tabs, zebra tables, extended list styles, and cross-browser transparency.

LESS - Leaner CSS
Less is a Ruby gem that extends CSS by adding the following features: variables, mixins, operations, and nested rules. Just rename the .css .less files to get all these features.

Dtcss
DtCSS is a PHP script that processes CSS files, allowing you to use nested selectors, color mixing, etc. DtCSS reads a CSS file with special instructions written for DtCSS, and issues normal CSS outside. There is a smart caching system.

Sass + compass
SASS - the compiler in the stack. Very convenient - formatting indentation, as in python, mixins with parameters (almost functions), variables and operations on them.