CSS tools I use

CSS tools are important for front-end developers because they help them by simplifying the jobs they have to do, simplify development related tasks and allow to write clean css codes. Some of these tools I have bookmarked are new and some are old, but hopefully everybody will find a couple of new or at least useful.

• RECESS — Developed at Twitter to support internal styleguide, RECESS is a simple, attractive code quality tool for CSS built on top of LESS.
• UnCSS — UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS.
• SUIT CSS — SUIT CSS is a reliable and testable styling methodology for component-based UI development. A collection of CSS packages and build tools are available as modules. SUIT CSS plays well with React, Ember, Angular, and other component-based approaches to UI development.
• Purify CSS — Remove unused CSS. Works on single-page apps.
• FormHack — FormHack works by providing a few variables that allow you to change some common attributes such as border-radius, input height/width, and colours. By changing these attributes, you will get a beautiful form that is consistent across all major browsers.
• Primer — Primer is the CSS toolkit that powers GitHub’s front-end design. It’s purposefully limited to common components to provide our developers with the most flexibility.
• CSSnext — CSSnext is a CSS transpiler that allows you to use the latest CSS syntax today. It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.
• Rework — CSS manipulations built on css, allowing you to automate vendor prefixing, create your own properties, inline images, anything you can imagine!
• Progre(c)ss — Pure css progress bars with minimal effort.
• PostCSS — PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
• Flexible Grid System 4 CSS — Flexible Grid System is a responsive CSS framework.
• Takana — Takana is a Sass/CSS live-editor. It lets you see your SCSS and CSS style changes live, in the browser, as you type them.
• Animate.css — Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
• CSS shrink — CSS minifier.
• CSshake — Some CSS classes to move your DOM.
• Autoprefixer — PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter, and Taobao.
• Inuit.css — Powerful, scalable, Sass-based, BEM, OOCSS framework.
• CSSCSS — CSSCSS will parse any CSS files you give it and let you know which rulesets have duplicated declarations.
• CSS Lint — Automated linting of Cascading Stylesheets.
• Helium — Helium is a tool for discovering unused CSS across many pages on a web site. The tool is javascript-based and runs from the browser. Helium accepts a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL list and checks if the selectors found in the stylesheets are used on the pages. Finally, it generates a report that details each stylesheet and the selectors that were not found to be used on any of the given pages.
• Prefix Free — A script that 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.
• Hover.css — A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration.
• Elastic CSS Framework — A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily.
• OO CSS Framework — xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing complex style cascades. Using xCSS means a dramatic cut down to your development time by: having a intuitive overview of the overall CSS structure, using variables, re-using existing style cascades and many other handy features.
• Base 2 — Base is a super simple, responsive framework, built to work on all devices big, small and in-between.
• Compass — Compass is an open-source CSS Authoring Framework.
• Normalize.css v3 — Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
• Reset CSS — The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
• Layers CSS — A lightweight, unobtrusive and style-agnostic, CSS framework aimed for practical use cases.
• Sanitize.css — Render elements consistently. Style with best practices.
• Magic — CSS3 Animations with special effects.
• Typebase.css — Typebase.css is a minimal, customizable typography stylesheet. It has both less and sass versions so it can easily be modified and merged into modern web projects. It provides all the necessary scaffolding for good typography without adding any aesthetics. It is built to be modified as projects evolve and grow, and plays nice with normalize.css.
• Fluidity — The worlds smallest fully-responsive css framework.
• Kouto Swiss — A complete CSS framework for Stylus.
• Ungrid — Ungrid is a tiny, responsive, table-based CSS grid system. The entire ungrid.css file is 97 bytes minified.
• Basscss — Basscss is a lightweight collection of base element styles, immutable utilities, layout modules, and color styles designed for speed, clarity, performance, and scalability.
• Kite — Kite is a flexible layout helper CSS library.