Post CSS Module #45

Question 1

What is PostCSS?

Answer 1

PostCSS is a tool that allows developers to write CSS pre-processors or post-processors, called plugins.

Question 2

What is the main benefit of using PostCSS?

Answer 2

The main benefit PostCSS provides over CSS preprocessors like Sass or Less is the ability to choose your own path, and cherry-pick the features you need, adding new capabilities at the same time. Sass or Less are “fixed”, you get lots of features which you might or might not use, and you cannot extend them

Question 3

How can you install PostCSS CLI

Answer 3

npm install -g postcss-cli

Question 4

Using the PostCSS cli how can you run the autoprefixer plugin on your css files?

Answer 4

postcss –use autoprefixer -o main.css css/*.css

Question 5

What’s the reason for running autoprefixer in the first place?

Answer 5

Autoprefixer parses your CSS and determines if some rules need a vendor prefix.

Question 6

What are CSS modules?

Answer 6

CSS Modules are not part of the CSS standard, but they are a build step process to have scoped selectors.

https://css-tricks.com/css-modules-part-1-need/

CSS files in which all class names and animation names are scoped locally by default.

Example:

<h1>An example heading</h1>

.title { background-color: red; }

CSS Modules takes a different approach. Instead of writing plain HTML, we need to write all of our markup in a JavaScript file, like index.js. Here’s an example of how that might work (we’ll take a look at a more realistic example later):

CSS Module in JS:
element.innerHTML = 
  `<h1 class="${styles.title}">
     An example heading
   </h1>`;