Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
No matter which plugins you use, what's most important is the CSS output you serve the browser. In this video, you'll learn to optimize your CSS for production.
PostCSS plugins offer a wide
variety of syntax extensions.
0:00
Some even provide Sass like syntax.
0:04
With the language extension plugins,
0:06
you're able to nest selectors,
use variables, create mix ins and
0:09
extends, even import partials,
just like you would with Sass.
0:13
In other words, PostCSS could do enough of
what Sass offers that it could be your go
0:19
to styling method.
0:23
And since the plugins
are written in JavaScript,
0:24
your CSS is processed faster
than Ruby Sass and LibSass even.
0:28
So, if you're working
with a large CSS file,
0:33
that speed can make a big
difference in your bill times.
0:34
The PreCSS plugin pack combines all
the plugins that use Sass like syntax and
0:38
features into one plugin, so you don't
have to manually install each one.
0:43
Now, I'm not gonna cover the language
extension plugins in this workshop,
0:49
but now that you know how to install and
run a plugin, you can try them out for
0:52
yourself later.
0:56
No matter what plugins you use or
which features and syntax, ultimately,
0:58
what's most important is the final
CSS output you serve the browser.
1:02
PostCSS plugins also offer an easy way
to optimize your CSS for production.
1:07
The output CSS currently displays
all the comments and spaces.
1:13
And the CSS rules are fully expanded,
1:18
which can be helpful when
debugging in development.
1:21
But it's best not to deploy your CSS to
production this way, since every line,
1:24
space, and comment can make the file
size larger than it needs to be,
1:29
especially if this was a big project.
1:33
So you can optimize your build file for
production by stripping out
1:36
all the comments and spaces and
compressing the CSS to one line.
1:40
This process is called minification.
1:45
So the plugin I'm going to install to
optimize my CSS is called cssnano.
1:47
In the terminal, I'll install
the cssnano plugin as a dev dependency
1:54
by typing npm install --save-dev,
followed by cssnano.
2:00
Then I'll require cssnano in my gulp file.
2:10
And like the rest of our plugins,
I'll add cssnano to the processor's array.
2:22
I'll save my gulp file,
bring up the terminal, and
2:32
run gulp to start the watcher.
2:36
And now when you save your source CSS,
cssnano minifies your CSS
2:40
to make the final CSS as small as
possible for your production environment.
2:47
So now the entire style sheet
is compressed to one line.
2:52
cssnano also removes empty rules and
declarations.
2:57
It converts longhand
properties into the shorthand.
3:01
And it shortens hex values to
three digits, wherever possible.
3:05
cssnano will even output the smallest
CSS representation of a color value.
3:11
For example,
if you define the hex value for
3:16
the color red, so let's say #ff0000.
3:21
It will output the actual
keyword value red because
3:26
the word red is shorter than ff0000,
creating less output.
3:32
We've just barely scratched the surface
of the PostCSS plugin ecosystem.
3:43
Hopefully now you're more curious and
excited about its possibilities.
3:47
In this workshop, you learned that
PostCSS is a different approach
3:50
to writing CSS because it's not limited
to any one type of functionality.
3:53
You can customize and configure PostCSS to
align it with the way you like to work.
3:58
And it can help solve problems that
other tools like CSS preprocessors may
4:03
not be able to solve yet.
4:07
You can even build your own solutions to
problems by building a custom plugin and
4:09
sharing it with the developers
in the PostCSS community.
4:13
So be sure to check the teachers' notes
for resources on plugin development and
4:16
the latest in PostCSS.
4:20
Thanks everyone.
4:22
You need to sign up for Treehouse in order to download course files.
Sign up