Several best front-end CSS development tools and css development tools

Several best front-end CSS development tools and css development tools

Keeping up with updates to any development kit is a task that requires continuous efforts, especially front-end development tools.

Move your attention away from the flood of methods and technologies for a while, and you may miss something! I met a front-end development friend of mine last week. He was excited to talk to me about some of his new tools. The most interesting one is to use Grunt to compile SCSS.

It is easy to forget that not everyone is on the same path with you. They may be limited in use or have a narrow field of vision, so they cannot understand the surrounding environment. I used Grunt for as long as I used SCSS. As he said, he had to use the command line to manually trigger the compilation, which made me very painful. So I want to share some front-end development tools that I often use. (Especially CSS)

Extremely important front-end development tools 1. File Viewing and compilation

First, if you are still using the command line to compile SASS, you must see the automatic execution process. Here there are many tools you can use. I use Grunt-Watch, however, many people like Gulp-Watch.

Some built-in pre-processors in IDE can be used to see which one is suitable for you.

2. SCSS Library

Library is a large toolkit that contains and combines many things such as CSS resetting, cross-browser background gradient, and convenient mathematical calculations that use a golden ratio to set the font size.

Mainstream libraries:

• Bourbon
• Compass
• PostCSS

I have been using Compass for several years. This is a great tool set.

But I found that it can do far more than what I actually need. I created a lightweight custom stack plug-in using the knowledge I learned from Compass, which reduced the scss Compilation Time from 4 seconds to almost zero.

3. Autoprefixer

You don't have to worry about the browser prefix!

Autoprefixer adds the required prefix Based on the https://caniuse.com. When I work alone, it saves me a lot of time and is strongly recommended.

4. Animate.css

I like to write my own CSS animation effects, but we often don't have much time.

Animate.css allows me to quickly add and test CSS animations without thinking about the logic of these animations.

5. KSS styleguide

KSS allows you to directly create a style wizard file from your CSS, which has many advantages.

The paired KSS contains a modular CSS, such as BEM, which allows you to reliably create a reusable visible style set, and you will get a huge return from the powerful documentation.

KSS Styleguide is one of my favorite front end development tools6. CSS minification with CSS NANO

The CSS file I wrote is automatically reduced.

Minification for front end development

CSSNANO can also delete unnecessary or outdated browser prefixes, if any, and duplicate classes.

5. KSS styleguide

KSS allows you to directly create a style wizard file from your CSS, which has many advantages.

The paired KSS contains a modular CSS, such as BEM, which allows you to reliably create a reusable visible style set, and you will get a huge return from the powerful documentation.

6. CSS minification with CSS NANO

The CSS file I wrote is automatically reduced.

CSSNANO can also delete unnecessary or outdated browser prefixes, if any, and duplicate classes.

I have a front-end learning exchange QQ group: 328058344 if you encounter any problems during the process of learning the front-end, please come to my QQ Group to ask questions. The group will update some learning resources every day. Chat is prohibited.