Make your CSS production-ready by creating a build process

Hey everyone 👋 You know, most of my time as a beginner, I just used to write plain CSS and never really think of what happens next! Like, how can we finetune our designs so that it's compatible with any type or versions of browsers out there as well as load up faster than always? Wouldn't that be cool? 🤷‍♂️

🚩 Introduction

Hell yeah, that would be cool. 😎 So this is gonna be about fine-tuning your css designs in a manner that would make your pages load faster 🚀 as well as make your designs all browser compatible. 💻 And by all means, make your CSS production-ready for getting the best out of your CSS. 🎉

👀 What do we need?

We are going to install a couple of packages from npm, for which you need to have node installed. If that's not done, do it from here now. Also if you're dizzy, grab a cup of coffee and you're good to go. ☕

📌 Installing Dependencies

Let's start a new project using npm init --y (--y is for default values).

The dependencies that we are going to install (as devDependencies) are,

• node-sass (used to compress our css and also to compile .scss to css, if needed)
• concat (used to concatenate multiple files)
• autoprefixer (used primarily in prefixing css tags automatically)
• postcss-cli (autoprefixer is a plugin of postcss, so this is also required)
• npm-run-all (a CLI tool to run multiple npm-scripts in parallel or sequential)

Hence run this from terminal, npm install node-sass concat autoprefixer postcss-cli npm-run-all --save-dev. Let's now write some scripts in package.json that'll execute our process.

👨‍💻 Writing Scripts to Execute

I'm going to show the scripts object down below (in package.json) and later on explain each one of it. You can refer to them if any of it doesn't make sense.

    "scripts": {
        "compile:sass": "node-sass sass/main.scss css/style.comp.css",
        "concat:css": "concat -o css/style.concat.css css/style.comp.css css/any-other-file.css",
        "prefix:css": "postcss --use autoprefixer -b \"last 10 versions\" css/style.comp.css -o css/style.prefix.css",
        "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
        "build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
    }

Before we explain, I want you to know we have our sass in sass/main.scss which will be processed and stored in css/ folder. (if you don't write sass, make two folders one as input where you've written css by yourself and output where the program is going to store the css files after execution)
P.S.: folder names are arbitrary

🙌 Explanations

You can run these scripts by simply typing, npm run <your-command-name> to your terminal.

☑ = File we're going to input

✅ = File we're going to output

1️⃣ compile:sass (optional)

It's only if you write in Sass, you need this step otherwise skip it.🏂 This will just compile your sass code to browser readable css.

• node-sass: 📌 package name
• sass/main.scss : ☑ address of our manually written sass file
• css/style.comp.css: ✅ address where the resulting output of css file will be stored

2️⃣ concat:css (optional)

If you have your css in more than one file, then you'd probably want to combine them into one css file which is better for your browser which only would have to make one HTTP request instead of two.

• concat : 📌 package name
• -o / --output : denotes the output file
• css/style.concat.css: ✅ address of output file where all combined css is going to be stored
• css/style.comp.css: ☑ file returned from step 1
• css/any-other-file.css: ☑ any other css file which needs to be combined in the final

P.S.: If you have just one file this step doesn't make any sense. So skip, but make sure your keep track of the trail i.e. which file is returned from which step and which one is being put.

3️⃣ prefix:css

This is the command with which your css is going to have vendor prefixes like -webkit-, -moz, -ms- and -o-, which otherwise you'd have to add manually.

Vendor prefixing is a way for browser makers to add support for new CSS features before those features are fully supported in all browsers.

How and why you would want to use CSS vendor prefixes in your website?

• postcss : 📌 package name (autoprefixer is a part of postcss)
• --use : list of postcss plugins to use (i.e autoprefixer, here)
• autoprefixer : package name which prefixes our css
• -b : b is for browsers so we can specify which browsers to make our css compatible for
• "last 10 versions" : this fetches last 10 versions of all major broswers from caniuse.com
• css/style.concat.css : ☑ address of file we're going to put
• -o : option for output
• css/style.prefix.css : ✅ address of output file

P.S.: While writing last 10 versions I faced an issue, which was because of the double quotes as it is included inside another double quote, so we need to escape this using \ before every double quote inside the main double-quotes.

4️⃣ compress:css

This will reduce your css file size to a great extent resulting in faster page loads.

• node-sass : 📌 package name
• css/style.prefix.css : ☑ file containing the input for this command (uncompressed css)
• css/style.css : ✅ address of the output file (compressed css)
• --output-style compressed : command to make the compression

P.S.: You can choose to output the compressed css into another css file, like style.min.css which is alright, but you'll then need to add a link tag to your HTML to include this.

5️⃣️ build:css

At last, you want to run all of this by running just one command.

• npm-run-all : 📌 package name
• compile:sass concat:css prefix:css compress:css : list of commands in order of their sequence for execution

FunFact: 😉 You can add --parallel after the package name in this to run all the processes simultaneously which is helpful in some places, but not here. Why? Because here, each script is like a function that takes a file as input and its output file is required in the next function/script, which isn't possible if they run simultaneously.

P.P.S.: All output files will be automatically created so we don't have to create them individually.

🤝 Conclusion

Finally, we've set up our build process which means your project is now one command away from being ready for deployment 🤘, which is npm-run-all build:css. So, in a nutshell 🥜, this process,

• Combines all different files of your css in one single file, to minimize the number of HTTP requests you make
• Sets up prefixes for required tags for a wide range of browsers automatically by fetching data from caniuse.com so you don't have to manually
• Makes your final css which is to be used in the browser much compressed, that means faster page loads.

💖 Over to You

I love writing as much as learning new technologies. However, the truth is, the journey is never easy. And that is the only reason I write what I write, coz these were once the questions that I faced as a beginner and I want to help others who have the same ones that I did.

So I am curious about what difficulties or questions you once faced or are facing as a beginner? 🤷‍♂️ Reply in this thread, as we can all learn from each other.