CSS bundling options in Ruby on Rails - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is CSS bundling in Rails?

CSS bundling in Rails means combining multiple CSS files into one file to make the website load faster and easier to manage.

beginner

Name two common CSS bundling tools used in Rails projects.

Two common CSS bundling tools in Rails are Importmap with Tailwind CSS and CSS bundling gem using esbuild or rollup.

intermediate

How does using Tailwind CSS with Importmap affect CSS bundling in Rails?

Using Tailwind CSS with Importmap lets Rails load CSS styles directly without a build step, simplifying bundling but may increase load time if many styles are unused.

intermediate

What role does esbuild play in CSS bundling for Rails?

Esbuild is a fast bundler that compiles and combines CSS files into one, improving load speed and allowing modern CSS features in Rails apps.

beginner

Why is CSS bundling important for website performance?

Bundling CSS reduces the number of files the browser downloads, which speeds up page loading and improves user experience.

Which tool is NOT typically used for CSS bundling in Rails?

A npm install

B esbuild

C webpack

D rollup

npm install is a command to install packages, not a bundler itself. esbuild, rollup, and webpack are bundlers.

What is a benefit of bundling CSS files?

A Removes all CSS styles

B Makes CSS harder to read

C Increases the number of HTTP requests

D Speeds up page loading

Bundling reduces HTTP requests, which speeds up page loading.

Which Rails CSS bundling option allows skipping a build step?

A Using esbuild

B Using rollup

C Using Importmap with Tailwind CSS

D Using webpack

Importmap with Tailwind CSS can load styles without a build step.

What does esbuild do in CSS bundling?

A Deletes CSS files

B Combines and compiles CSS files quickly

C Creates new CSS styles automatically

D Runs Ruby code

Esbuild bundles and compiles CSS files fast.

Why might you choose CSS bundling in a Rails app?

A To improve website speed and organization

B To make CSS files bigger

C To slow down the website

D To remove all CSS

Bundling improves speed and keeps CSS organized.

Explain what CSS bundling is and why it matters in Rails applications.

Think about how fewer files help browsers load pages faster.

Describe two different CSS bundling options available in Rails and how they differ.

One option skips building, the other compiles files.