[Translation] 40 Essential Tools for Writing Better CSS_html/css_WEB-ITnose

As we all know, CSS is great for making websites look beautiful, adding animations to them, and keeping presentation and content separate. It's very hard to understand everything about CSS, and it only gets harder because we want our code to be cross-browser compatible.
Many third-party tools are introduced here, from simplifying workflow to generating real CSS, these tools provide the code we need and run faster than the code we write ourselves.

Pure

Pure is not a framework. Instead, it just integrates some CSS code that has been applied to the module for our convenience. Just grab the parts of CSS code you want for your project. Of course, all components are available. Pure includes a grid system, buttons, tables, forms and menus, all built on normalize.css.

Magic Animations CSS3

Magic Animations CSS3 integrates CSS3 Animations and can be applied to any element, including element replacement, slide-out, transformation and fade effects

Jeet Grid System

Jeet is somewhat similar to semantic.gs and is a grid system based on SASS. Instead of adding a Class to a markup element, you can define columns (and sometimes rows) in CSS. Jeet makes responsive layout easier and further separates content and presentation.

10 Pure CSS Flat Mobile Devices

A guy named Oleg repainted and simulated 10 different mobile devices (including iPhone 6, iPad Mini, Nexus 5, and Lumia) using pure CSS 920)

CodyHouse

A library that can add unrelated, independent components to your website. CodyHouse is built with HTML, CSS and JavaScript. You can choose from a variety of navigation, parallax effects, paging, modal windows, page layouts, etc. Each component has its own tutorial for quick use.

Ratchet

If you use HTML, CSS and JavaScript for a mobile APP, Ratchet should be a good framework. Every UI component is customized for mobile devices, and it has many features you don't see in traditional HTML/CSS frameworks. The default effects of the components are all great.

Animo.JS

Animo is based on JQuery and can help you better trigger CSS animations. You can overlay animations, or trigger a second animation after the first is completed, while taking advantage of the hardware acceleration provided by CSS animations.

Adobe Extract

Converting a Photoshop layer style file to CSS is a pain. Fortunately, Adobe has made a tool (that runs in the browser) that allows you to select a layer and convert its properties into CSS code. You can also select the text used by any online website in the PSD file.

Sculpt

Sculpt is based on SASS and is a good framework. Compared to other released frameworks, Sculpt supports abandoned lower version browsers. If you use SASS to develop a mobile-first website and want the website to run normally on lower versions of IE, consider Sculpt.

CSS3 Generator

A simple and universal CSS3 property generator. It's not very new, but it's very useful when you forget some precise syntax.

Bourbon Neat

A favorite of SASS, Bourbon Neat is a simple semantic grid system that can be used alone, but it is designed to use the Bourbon mixin library.

Enjoy CSS

Enjoy CSS is also a CSS3 generator, but interestingly, it doesn’t just generate CSS3-related code, you can also select the element you want it applied to: a div , text input, a button, etc. to get the exact effect you want in a simple visual way.

Keyframer

Start here to create your keyframe-based CSS animations. Just go to this website and follow some tutorials.

Gumby

Gumby is an HTML/CSS framework designed for those who prefer to work in a Ruby environment. You can download it separately, of course, but it's also packaged as a Ruby gem, a Ruby gem created by those in this technology.

CSShake

This has more CSS animations, the focus is on making some changes (you know what I said?), but, they are showing off their art of making money online (which I can’t stand ! ).

Bounce.JS

Bounce.JS combines visualization (for designing CSS3 animations) and a JS library (for implementation), making it useful for those who like visual design is very simple.

GridLover

Need a simple, visual way to adjust font size? GridLover provides an easy way to preview typography, set well-proportioned verticals and grab CSS. You can grab the pixel values, EMs, or REMs of fonts in CSS, and these values ​​will be formatted into normal CSS, SASS, LESS or other coding styles.

ExtractCSS

Want to quickly set up a CSS file? One way is to first write HTML, then set ID, class, etc., paste the HTML code into ExtractCSS, Web APP will list all the selectors, and finally put them into the CSS file.

Kite

Kite is a CSS library for layout. Its design uses the CSS Flex module, but it does not fully use Flex. Kite is compatible with IE8.

Pesticide

Need to find out exactly what is going on with your layout? Add a PesticideCSS file. It will add a border to every element on the page, subtly changing the border color when the element is a child of the hierarchy. Simple, yet impressive.

Pleeease

Tired of looking for different tools to preprocess CSS, add specific prefixes, including IE filters? Don’t mind using the command line? This is for you. Compatible with SASS, LESS and Stylus

CSS Colors

CSS-friendly color name list, including hexadecimal and rgba format.

CSS Vocabulary

A small application that provides a convenient list of CSS-related terms. Select one and it will illustrate the term by highlighting some example code.

Tridiv

Build complex 3D models using pure CSS.

Buttons

Build a CSS button library using SASS and Compass

CSS Menu Maker

CSS Menu Maker can help you build simple, responsive navigation

One% CSS Grid

One% CSS Grid is a 12-column fluid layout grid system designed for building faster and cheaper responsive layouts.

Simptip

Simptip is a CSS prompt box tool made by SASS. Not only can you set the direction of the prompt box (up, right, down, left), but you can also set different colors, such as success color, information color, warning color and danger color.

Myth

Myth is a CSS preprocessor, so you only need to write CSS and don't have to worry about the support of lower version browsers or even the improvement of lower version specifications.

Hover CSS

Integrate CSS hover effect code, which can be used in links, buttons, logos, SVG, featured images, etc.

CSS Animation Cheat Sheet

CSS Animation Cheat Sheet is a set of preset, plug-and-play animation CSS libraries. You just need to import the style sheet into your website, and then it gives you Just add a class to the element you want to animate.

Spinkit

Spinkit contains some simple but awesome CSS animation loading effects

Typebase.CSS

Typebase.CSS is a small, Customizable typography stylesheet. It has both Less and Sass versions, so it can be easily modified and incorporated into modern web projects.

SpriteBox

Turn your CSS imager sprites into a drag-and-drop editor and let it write the code for you.

CSS Ratiocinator

CSS Ratiocinator is a command line tool that cleans up useless CSS code by checking the actual rendering effect. It is ideal for large projects where some CSS files are out of control.

CSS Beautifier

Beautify CSS, if you have got a minified file but can't find the original (or you are just a little messy with the code) file, the beautification of the code can be done by formatting it appropriately ization and indentation fixes.

CSScomb

After using CSS Beautifier to make your code readable, you can run the code using CSScomb to ensure that all properties are ordered alphabetically. Remember, not the selector, but the properties, such as width always after the font declaration, etc.

Anima

An animation library, designed to extend the functionality of CSS animations, and can Animate 100 elements simultaneously.

Recess

Recess is a stripper program that can also be run as a compiler, with the goal of ensuring your CSS adheres to a set of rules and remains lean. Each rule can be individually disabled to suit your coding style.

Bonus: A to Z CSS

Bonus: A to Z CSS is not a tool, but it is a great resource for beginners. In A to Z, Guy Routledge provides a solid lesson on every basic CSS rule, such as the box model and the most commonly used CSS properties.

Translation source: http://www.ido321.com/1545.html
Original English text: 40 tools for writing better CSS