5 CSS Build Tools That You Should Know (Lint, Format, Remove, Modify, Minify)
FrontEnd development is evolving rapidly. And with it, CSS is getting interesting. New features such as logical properties, content-visibility have made their way into CSS recently.
The State of CSS 2020 survey has listed a few tools that developers know about and use regularly. Based on the result of the survey, let's take a moment to list a few of those tools that you should probably know about too.
https://levelup.gitconnected.com/5-cs...
Stylelint is a CSS linter and has over 170 built-in rules to catch errors, apply limits and enforce stylistic conventions.
Formatting your code with a build tool is useful because you are able to have a consistent style across your project, whether you are working alone or within a team. Prettier is the most popular code formatter. It is generally used with Javascript and Typescript but it works also with CSS and Sass.
PurgeCSS is a build tool to remove unused CSS. It works by analyzing the content of our website and comparing it to your CSS.
Minifying your code is a common practice. You want to minimize the amount of code that is sent to the client and it is not necessary to have whitespace in your code to the compiler. This practice is done in Javascript using terser.
In CSS, you will find cssnano, described as a modular minifer, built on top of the PostCSS ecosystem.
00:00 Introduction
00:27 Stylelint
01:49 Prettier
02:48 PurgeCSS
03:10 Autoprefixer
04:27 cssnano
05:03 Outro
Follow me on
Medium: / floriel
GitHub: https://github.com/Ffloriel