11
What would be a CSS post-processing? I’ve heard of pre-processed CSS, like Gulp does when it compiles a SASS in CSS. But recently I heard the term post-processed CSS and I didn’t really understand what it is and how it works.
What would be this practice of post-processing CSS, what advantages does it bring to CSS? Improves code performance or maintenance?
How this post-processing actually works, what it does with my . css?
4
A CSS post-processor is nothing more than a program to help in the development of CSS codes.
Like the SASS?
Not.
preprocessing vs post-processing
Unlike code preprocessing (Sass, Lass, and Stylus), which, when processed, your code is interpreted and transformed into CSS, post-processing can act directly on CSS code to improve it in some way.
In preprocessing you instruct the construction of css code. Here you have a large control of what will be produced.
In post-processing you have the code analyzed and the interpreter changes by following its own rules. You don’t have much control, because post-processing serves to protect you from yourself as we will see below...
[...] what advantages it brings to CSS? Improves code performance or maintenance?
Depends on the post-processor. The snasnano for example, just compile the CSS code by deleting comments and deleting useless things. That is, it can improve performance.
A post-processor that aims to help in the maintenance and production of the code is the stylelint...
"that helps avoid mistakes and enforce conventions in their styles"
There is also the self-prefix, the most famous, which helps in the development, generating the codes for different browsers and their respective versions. Example:
css input.
body {
display: flex;
}
css output.
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
Browser other questions tagged html css css3 performance sass
You are not signed in. Login or sign up in order to post.
Hello, my dear! It may be interesting to read from here: https:/postcss.org/
– user154549
Looks like a pre-processor without transpilator, has the same idea except transpilar of SCSS, SASS, etc for CSS
– Costamilam
@Costamilam seems, but it’s much more than that, it removes a lot of things like comments, classes that are not used, repeated classes, repeated properties, sometimes depending on what you set up it does the short-hand of everything, and can even change,
header-btn-btn-active{}forhba{}. Of course it is only used when on the project for production, it is not used in development because it would hinder more than it would help– hugocsl
@hugocsl this could also be done during pre-processing, no?
– Costamilam
@Costamilam some part yes, but usually the pre only converts Sass/Less/scss into css, I believe most pre tools have some limitations. And the post-processing is only at the end of the project itself, imagine how bad it would be to be working on a minified CSS with a different class name than what is in your SCSS only because you did something wrong. Like imagine that you missed something in SCSS and went to CSS to check the output and everything is compiled/minifica. It would disturb you more than help
– hugocsl
@hugocsl can be generated different outputs, many tools have a production build and other development
– Costamilam
@Costamilam may even be yes, this is not my area, that’s why I left the rss question, and tb never talked about compiled pre-css that make these treatises, but it may exist tb, but I do not know...
– hugocsl