computer science

PostCSS

PostCSS is a computer science topic covered in the lgStudy science library. This page brings together a partial reference excerpt, illustrations, worked examples, real-world applications and a short study plan, so you can understand PostCSS rather than just read about it. In short: PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations. It was designed by Andrey Sitnik with the idea taking its origin in his front-end work for Evil Martians.

Key takeaways

PostCSS belongs to computer science; place it in that map before memorising details.
Learn the definition first, then one example that makes the definition concrete.
Connect PostCSS to a quantity you can measure, compute or draw — that is where exam questions come from.
Reproduce the core statement of PostCSS from memory before moving on to harder problems.

Reference excerpt

PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations. It was designed by Andrey Sitnik with the idea taking its origin in his front-end work for Evil Martians.

Functionality

PostCSS is a framework to develop CSS tools. It can be used to develop a template language such as Sass and LESS. The PostCSS core consists of:

CSS parser that generates an abstract syntax tree Set of classes that comprises the tree CSS generator that generates a CSS line for the object tree Code map generator for the CSS changes made Features are made available through plugins. The plugins are small programs working with the object tree. After the core has transformed a CSS string into an object tree, the plugins analyze and change the tree. Then PostCSS generates a new CSS string for the plugin-changed tree. PostCSS and its plugins are written in JavaScript and distributed through npm, which offer APIs for low-level JavaScript operations. There are official tools making it possible to use PostCSS with build systems such as Webpack, Gulp, and Grunt. There is also a console interface available. Browserify or Webpack can be used to open PostCSS in a browser.

Syntaxes PostCSS allows changing the parser and generator. In this case, PostCSS could be used to work with the Less and SCSS sources. However, PostCSS on its own cannot compile Sass or Less to CSS. What it does is change the original files — for instance, by sorting the CSS properties or checking the code for mistakes. PostCSS supports SugarSS.

Plugins PostCSS plugins perform different CSS processing tasks ranging from analysis and properties sorting to minification. The complete plugin list can be found on postcss.parts, with some examples listed below.

Autoprefixer to add and clear browser prefixes. CSS Modules to get CSS selectors isolated and code organized. It is supplied as part of Webpack. stylelint to analyze CSS code for mistakes and check style consistency. stylefmt fixes the CSS code according to the stylelint settings. PreCSS to perform some Sass/Less preprocessing functions. postcss-preset-env to emulate features from unfinished CSS specification drafts. cssnano to make CSS smaller in size by getting rid of the spaces and rewriting the code. RTLCSS to change CSS code so that the design should be suitable for right-to-left writing (such is applied in Arabic and Hebrew). postcss-assets, postcss-inline-svg and postcss-sprites to work with graphics.

History During the course of the Rework project, the idea of modular CSS processing was suggested by TJ Holowaychuk September 1, 2012. February 28, 2013, TJ expressed it in public. March 14, 2013, Andrey Sitnik's front-end work for Evil Martians resulted in Autoprefixer, a Rework-based plugin. Initially, the plugin name was rework-vendors. As Autoprefixer grew, Rework could no longer to meet its needs. September 7, 2013, Andrey Sitnik started to develop PostCSS based on the Rework ideas. In 3 months, the first PostCSS plugin, grunt-pixrem was released. December 22, 2013, Autoprefixer version 1.0 migrated to PostCSS. For PostCSS, the primary style focus is alchemy. The project logo represents the philosopher's stone. Major and minor PostCSS versions get their names after the Ars Goetia demons. For instance, version 1.0.0 is called Marquis Decarabia. The term postprocessor has caused some confusion. The PostCSS team used the term to show that PostCSS was not a template language (preprocessor) but a CSS tool. However, some developers think the term postprocessor would better suit browser tools (for instance, -prefix-free). The situation has become even more complicated after the release of PreCSS. Now, instead of postprocessor, the PostCSS team use the term processor.

References

External links Official website

Illustrations

Worked examples

Example 1 — a first encounter with PostCSS

Start with the simplest possible case. Write down what PostCSS claims or describes in one sentence, then invent the smallest concrete situation in which that sentence is true. In computer science, the smallest case is usually a single object, a single equation or a single measurement. Check that every symbol or term in your sentence has a meaning in that case.

Example 2 — changing one variable

Take the situation from Example 1 and change exactly one quantity: double it, halve it, or set it to zero. Predict what should happen to PostCSS before you calculate. Comparing your prediction with the result is the fastest way to find out whether you understand the idea or only the words.

Example 3 — an exam-style question

Typical questions about PostCSS ask you to (a) state it precisely, (b) apply it to given data, and (c) explain a limitation. Practise writing all three answers in under five minutes; the third part is what separates a full-mark answer from an average one.

Applications of PostCSS

In research: PostCSS appears in computer science research whenever the underlying quantities have to be modelled precisely. Papers usually cite it as a starting assumption and then explore where it breaks down.
In technology and industry: Engineering practice reuses PostCSS in design rules, simulations and safety margins. Knowing the idea lets you read a specification sheet and understand why the numbers look the way they do.
In the classroom: PostCSS is common in secondary-school and first-year university syllabi. It links to neighbouring topics Cascading Style Sheets, Free and open source interpreters, Free software programmed in JavaScript, so understanding it makes those chapters shorter.
In everyday life: Look for PostCSS outside the textbook — in sport, cooking, traffic, electronics or the sky above you. An example you found yourself is remembered far longer than one you were given.

Ask Teacher Smith questions about this articleOpens your AI tutor with a question about “PostCSS” →

Affiliate

Preply — study more efficiently by working with a personal tutor. 50% off.

How to study PostCSS in 20 minutes

Read the reference excerpt below once, without taking notes.
Close the page and write down what PostCSS means in your own words.
Compare your version with the excerpt and mark what you missed.
Work through the three examples above with pen and paper.
Explain PostCSS out loud to somebody else — or to Teacher Smith in the lgStudy chat.

Frequently asked questions

What is PostCSS in simple terms?

Why does PostCSS matter?

Because it connects several computer science ideas at once: it gives you a definition you can apply, a quantity you can calculate, and a way to check whether a result is plausible.

How should I study PostCSS?

Read the excerpt, restate it from memory, then work through the examples and applications listed on this page. The five-step study plan above takes about twenty minutes.

What does this page cover?

It gives you a compact reference excerpt plus original lgStudy explanations, examples, applications and study material on PostCSS.