As we all know, CSS is great, it makes the site look beautiful, can add animations to the site, and let the rendering and content separate. To understand everything about CSS is very difficult to do, it will only become more difficult because we want our code to be cross-browser compatible.
Here are a number of third-party tools, from simplifying workflows to generating real CSS, which provide the code we need and run faster than the code we write ourselves.
Pure
Pure is not a framework. Instead, it simply integrates some of the CSS code that has been applied to the module to make it easier for us to use. Just grab the part of the CSS code you want for your project. Of course, all components are available. Pure contains grid systems, buttons, tables, forms, and menus, all built on NORMALIZE.CSS.
Magic Animations CSS3
The Magic animations CSS3 integrates CSS3 animations, which can be applied to any element, including the effects of element substitution, slippage, deformation, and fading.
Jeet Grid System
Jeet and Semantic.gs are somewhat similar and are sass based grid systems. Instead of adding a class to a markup element, you can define columns (and sometimes define rows) in the CSS. Jeet makes responsive layouts easier, and further separates content and presentation.
Ten Pure CSS Flat Mobile Devices
A guy named Oleg. Redraws and emulates 10 different mobile devices (including iphone 6, IPad Mini, Nexus 5, and Lumia 920) with pure CSS
Codyhouse
You can add a library of unrelated, standalone components to your site. Codyhouse is built with HTML, CSS, and JavaScript, and you can choose from a wide variety of navigation, parallax, paging, modal windows, page layouts, and more, each of which is unique to your quick-to-use tutorials.
Ratchet
If you use HTML, CSS and JavaScript to be mobile App,ratchet should be a good framework. Each UI component is customized for mobile devices, and it has many features that you don't see in the traditional HTML/CSS framework. The default effect of the component is very good.
Animo.js
Animo based on jquery, can help you to better trigger CSS animation. You can overlay animations, or trigger a second animation after the first time, and take advantage of the hardware acceleration provided by CSS animations.
Adobe Extract
It's a pain to convert a Photoshop layer style file to CSS. Fortunately, Adobe has a tool (running in a browser) that allows you to select a layer and convert its properties to CSS code. You can also select any text that is used in the PSD file for any online website.
Sculpt
Sculpt based on Sass, is a good framework. Sculpt supports abandoned, low-version browsers compared to other already published frameworks. If you use SASS to develop mobile-first site, and want the website to run properly on the low version of IE, you can consider sculpt.
CSS3 Generator
A simple generic CSS3 property generator. It's not very new, but it's very useful when you forget some precise syntax.
Bourbon Neat
Sass's favorite, Bourbon. Neat is a simple semantic grid system that can be used alone, but it is designed with Bourbon Mixin Library.
Enjoy CSS
Enjoy CSS is also a CSS3 generator, but interestingly, it is not just generating css3-related code, you can also choose the elements you want to apply: a div, text input, a button, and so on, in a simple visual way to get the exact effect you want.
Keyframer
Start from here to create your keyframe-based CSS animations. Just go to this website to learn some tutorials.
Gumby
Gumby is a HTML/CSS framework designed for those who prefer to work in a ruby environment. You can download it separately, of course, but also packaged as a Ruby Gem,ruby gem is created by people of those technologies.
Csshake
There are more CSS animations that focus on making some changes (know what I'm saying?), but they're showing off their online money-making art (I can't tolerate it!). )。
Bounce.js
Bounce.js combines visualizations (for designing CSS3 animations) and JS libraries (for implementation), which are very simple to use for those who prefer visual design.
Gridlover
Need a simple, visual way to adjust the font size? Gridlover provides an easy way to preview typography, set up symmetrical vertical, and crawl CSS. You can crawl the pixel values of the fonts in CSS, EMs, or REMs, these values will be formatted as normal CSS, SASS, less or other code styles.
Extractcss
Want to quickly set up CSS files? One way is to write the HTML first, then set the ID, class, etc., paste the HTML code into the Extractcss,web app will list all the selectors, and finally put them in the CSS file is ok.
Kite
Kite is a CSS library for layouts that has been designed with CSS flex modules, but not fully flex-used. Kite compatible with ie8+.
Pesticide
Need to find out exactly what happened to your layout? Add the Pesticidecss file. It adds a border to each element on the page, and subtly changes the border color when the element is a child hierarchy. Simple, but impressive.
Pleeease
Tired of looking for different tools to pre-process CSS, add specific prefixes, including IE filters? Do you mind using the command line? This is for you. Compatible with sass,less and stylus
CSS Colours
A list of CSS-friendly color names that contains 16 binary and RGBA formats.
CSS Vocabulary
A small application that provides a handy list of CSS-related terms. Select one, and it will illustrate the term by highlighting some sample code.
Tridiv
Build a complex three-dimensional model with pure CSS.
Buttons
Building CSS button libraries with sass and compass
CSS Menu Maker
CSS Menu Maker helps you to create simple, responsive navigation
One% CSS Grid
The one% CSS Grid is a 12-column, Flow-layout grid system designed to build a faster, lower-cost, responsive layout.
Simptip
Simptip is a CSS cue box tool made by sass. Not only can you set the direction of the cue box (top, right, bottom, left), you can also set different colors, such as success, information, warning, and dangerous colors.
Myth
Myth is a CSS preprocessor, so you only need to write CSS, not worry about the support of the lower version of the browser, or even the improvement of the lower version specification.
Hover CSS
The code that integrates the CSS hover effect can be used for links, buttons, logos, SVG, featured images, and more.
CSS Animation Cheat Sheet
CSS Animation Cheat sheet is a set of preset, Plug and Play animated CSS libraries. You just import the stylesheet into your site and then add the class to the element you want to animate.
Spinkit
Spinkit contains some simple but great CSS animation loading effects
Typebase.css
Typebase.css is a small, customizable layout style sheet. It is also less and sass versions, so it can be easily modified and merged into modern Web projects.
Spritebox
Make your CSS imager sprites into a drag-and-drop editor and let it write 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 applications where some CSS files have gone beyond the control of large projects.
CSS Beautifier
Beautify the CSS, if you've got a shrink file but can't find the original (or you're just a bit confusing code) file, the code beautification can be repaired by proper formatting and indentation.
Csscomb
After using CSS Beautifier to make your code readable, you can use Csscomb to run the code to make sure that all the attributes are sorted alphabetically by the alphabet. Remember, not selectors, but attributes, such as width always after the font declaration and so on
Anima
An animation library designed to extend the functionality of a CSS animation and animate 100 elements at the same time.
Recess
Recess is a program that can also be run as a compiler to ensure that your CSS conforms to a set of rules and remains streamlined. Each rule can be individually banned to suit your coding style.
Bonus:a to Z CSS
Bonus:a to Z CSS is not a tool, but it is a good resource for beginners. The A To Z,guy Routledge provides a solid course for every CSS basic rule, such as the box model and most commonly used CSS properties.
Source: http://www.ido321.com/1545.html
English Original: Writing Tools for better CSS
40 tools to write a better CSS prerequisite