Css pre-processor, post processor, and css Processor

Css pre-processor, post processor, and css Processor

Because I was just getting started with the front-end, I read the knowledge that a great master wrote yesterday, and then I began to search one by one, the following are my search results for css preprocessors and post-processors. First, I would like to share with you the knowledge in this area. On the other hand, I can easily read the results later. For more information, see.

Reprinted from "Zhao Lei's blog", original address: http://zhaolei.info/2014/01/04/css-preprocessor-and-postprocessor/

Speaking of CSS preprocessors, everyone is familiar with it. This article focuses on introducing the CSS post-processor extracted from it, which is also a new trend in the front-end community over the past year.
After the CSS post-processor is abstracted, it will bring some changes to the CSS development mode. The following describes the concept.

CSS Preprocessor

In a broad sense, the target format of the CSS Preprocessor is CSS Preprocessor, but this article specifically refers to the domain-specific language for the ultimate purpose of generating CSS.
Sass,LESS,StylusIs currently the most mainstream CSS Preprocessor.

Example

The following usesLESSFor example:

LESS

1234567

. Opacity (@ opacity: 100) {opacity: @ opacity/100; filter :~ "Alpha (opacity =@{ opacity})" ;}. sidebar {. opacity (50 );}

Add the above DSL source code (LESS), Compiled into CSS:

1234	. Sidebar {opacity: 0.5; filter: alpha (opacity = 50 );}

We can see that the language before and after compilation is completely different.

Implementation Principle

In reality, the CSS Preprocessor is a little more complicated, because a large number of functions must support both special DSL and native CSS. One thing is to consider processing in two cases at the same time.

 

Advantages and disadvantages

• Advantages: Language-level logical processing, dynamic features, and improved project structure
• Disadvantages: Special syntax, high coupling of framework, and high complexity

CSS post-Processor

 

The CSS post-processor is a Preprocessor that processes CSS and finally generates CSS. It is a generalized CSS pre-processor.
We used CSS post-processor a long time ago. The most typical example is CSS compression tools (suchclean-css), But it was not mentioned before.
There are also recent popularAutoprefixerAutomatically handles compatibility issues based on the data supported by browsers on Can I Use.

Example

ToAutoprefixerFor example:

123456

. Container {display: flex;}. item {flex: 1 ;}

Compile the above standard CSS into a compatible production environment CSS:

 

123456789101112

. Container {display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display: flex ;}. item {-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1; flex: 1 ;}

We can see that the code before and after compilation is CSS.

If you useSublime Text, You can usePackage ControlInstallAutoprefixerPlug-ins.

Advantages and disadvantages

• Advantages: CSS syntax makes it easy to modularize and is close to the future standards of CSS.
• Disadvantage: limited logic processing capability

Development mode changes

The original development mode is as follows:

DSL source code> production environment CSS

Compared with the original version, the biggest change in the new development mode is standard CSS programming. After the compatibility and optimization are handed over to CSS, the processor automatically completes:

DSL source code> standard CSS> production environment CSS

After many future CSS standards are implemented at the CSS post-processor level, some projects can even return to the standard CSS programming mode:

Standard CSS (including future standard post-processor implementation)-> production environment CSS

The following are some simple comparisons:

Item	Pre-processor	Post processor	Use both
Language learning cost	DSL	CSS √	DSL
Target output result	Production Environment CSS	Standard CSS √	Standard CSS √
Compatibility processing Coupling	High, dependent DSL framework	Low, dependent post-processor √	Low, dependent post-processor √
Programmability	High, language-level logic processing √	. CSS syntax Extension	High, language-level logic processing √

Now I recommend that you use both the CSS Preprocessor and the CSS post-processor to do what they are best.

I think this trend will happen in the future:

• More and more small CSS tool libraries focusing on a single function
• The transformation of CSS style library from the overall solution to the Modular Combination Solution
• Some future CSS standards are supported in the CSS Preprocessor
• The combination of native CSS and CSS post-processor becomes a new choice

Excellent CSS post-processor framework Rework

ReworkIt is an efficient, simple, scalable, and modular CSS Preprocessor.
It released the first version in September 2012, which isStylusAuthor TJ Holowaychuk.

In fact, he uses the CSS post-processor model, on which there is an imitationStylusTools for style indent nestingstyl, Part of its CSS Preprocessor function is inReworkPasscss-whitespace.
There are someReworkThe Style Library, referring to the CSS standard draft or CSS standard proposal, is equivalent to supporting the CSS future standards, suchrework-vars,rework-font-variant,rework-calc,rework-color-function.

Does it sound dizzy? This shows that its modularization is very good. You can combine CSS frameworks as needed, suchMyth.

SummaryReworkFeatures:

• Directly operate CSS parsing objects in JavaScript to facilitate extension
• You can freely combine modules and customize the CSS tool library as needed.
• The model of the CSS post-processor determines its module tendency CSS future standards
• In addition to servers, it also supports running in a browser Environment

ReworkIt is still very young and requires more time to accumulate.

PostCSS

PostCSSIs a CSS post-processor framework that allows you to modify CSS through JavaScript.
Its first version was released in November 2013, fromAutoprefixerThe framework abstracted from the project.

PostCSSIt has the following features:

• It andReworkThey are very similar, but they provide more advanced APIs for easier scaling.
• It can generate a new Source Map based on the existing Source Map.
• It is better to retain the original CSS format to facilitate the development of editor plug-ins.
• RatioReworkYounger, onlyAutoprefixerA success story

ActuallyAutoprefixerInitially based onReworkBut later the author had more requirements (the list above) and createdPostCSSThis wheel.

Last

The emergence of the CSS post-processor makes CSS workflows clearer, but they are still far from mature, and there are still many places to do better.

For exampleAutoprefixerOnly make the syntax Prefix level compatible, but also need some small modules dedicated to solving such problems as IE filter compatibility.
For example, CSS Sprites can be automatically classified and merged for images used separately in CSS.
For example, the font size can be automatically optimized based on the project's actual usage of the icon font.

When each module focuses on specific problems, it is more reliable than a large and comprehensive centralized framework in most cases.

You may also considerReworkOrPostCSSWrite a CSS post-processor for fun?