[MUSIC]

When it comes to performance and optimization,

CSS has had its fair share of criticism.

From bloated style sheets, unnecessarily deep selectors, and

poorly performing selectors, there are more than a handful of articles out there

telling you what to do and what not to do.

This section where we view techniques that yield promising results

in real performance improvements.

The example code from our last lesson, as a series of very common CSS mistakes,

one mistake that you see here, is not using CSS shorthands.

We should get these all addressed.

In this small example, it doesn't seem like much, but your app grows, practices

like this will add weight to your CSS, decreasing performance over time.

Remember, CSS is a render-blocking header call.

Also, the less CSS your browser has to load into the CSS object model,

the faster you get to that first meaningful paint, and

really help your perceived performance.

Another common practice is repeating CSS rules under different selector names.

Focusing on the individuality of the UI object in the HTMLversus reuseability and

performance of the CSS.

Again, it is highly recommended that you do not do this.

Let's remove all of these repeated image selectors and use a single selector that

defines its responsibility, that of painting the image frame.

Doing so, this also makes it a lot easier to make our media query calls as well.

Now that our CSS is cleaned up, let's go back to the HTML and

update these class values.

We, easily remove these selectors in favor of the more usable

image frame selector we created in the CSS a minute ago.

In the long run, having a strategy to minimize rules and

limit the number of selectors in your CSS will help keep these files lean and

your site highly performant.

With these updates, our site is still looking pretty good.

Now, that we have our selectors more standardized and

the output of CSS is reduced,

another thing you may have noticed is the media query and its initial perspective.

We made the classic mistake of starting from desktop first.

Let's go back in and re-factor the CSS, so that it's mobile first and

see how this has an effect in the browser.

As we see here, we have a series of media query rules using

the max width media query respective.

Not only can this have a possible negative impact on performance, but

we are not truly taking advantage of progressive enhancement at all.

Keeping with a mobile first approach, we want to update all of our CSS,

so that the rules we want for mobile are at the root of each selector.

This will ensure that our mobile UI's rendered first and

as the desktop rules that are inside of media queries progressively enhancing our

experience as the user increases their screen size.

So let's keep moving through here and get the background positions,

so that we have our 50% as the base and 65 when it goes to desktop.

Then another thing we need to do is remove our padding round as well.

Okay, looking good so far.

Let's move our font sizes so

we have our default font size is a bigger ren size.

So, looking good, when refreshing in the browser we see that

our view is not changed at all so our updates are completely successful.

And resizing the browser,

we see at what point our media queries are being triggered.

Good job.

We have refactored our CSS by deleting unnecessary lines of code.

And less code reduces latency and gets us to that first meaningful paint faster.

But we can do more.

All of our CSS is human readable.

When we are sending this code to a browser, it doesn't care about formatting.

We should fix that.

What about vendor prefix rules?

To maintain performance CSS we want to ensure

that we are only ever using CSS rules that we need.

While there are manual processes we can use to maintain this

we should automate this.

And in our last example we did a lot of manual fixing of CSS.

Is there a way we can automate cleaning things up?

Sure there is.

In our last example, I illustrated how you can mainly go through your CSS and

with some simple modifications, you can clean things up.

But in this example,

we have some CSS that may look like what you typically see in production code.

It'll be vendor prefexes, verbose rules, scattered media queries,

commented out code, and even selectors without any rules.

Manually going through all of this code may be a real challenge.

To fix this, how about using an automated process pipeline to help

clean things up and minify your code.

A double win for performance.

To start off we're gonna use a simple gulp file.

This'll help us get started processing our CSS.

Simply put what we are doing here is telling gulp where our css file is and

processing it to a disk directory.

Running this script doesn't really do very much as we'll see in the output that

our new css is the same as our old css.

So, the first issue that we should try to solve is vendor prefixing.

So to do this, we're gonna lean on a new policy assess technique,

a tool called autoprefixer.

To install, it's pretty simple.

We're gonna add the variable of pause css that points to the gulp

pause css mpm module.

Then, we're gonna add the variable of autoprefixer that is going to point to

thempm auto prefixer module.

Then, we need to add in a plugin statement for the autoprefixer options, and

we're gonna go back three versions.

Last, we need to reference the plugin within the return statement like so.

Let's run gulp again and see how this affects our output css.

We will see that that the hard-coated bender prefixes we put in there are not

removed because of the three-version rule.

If I go back and update the auto prefixer rules to go way back,

we will see that auto prexifer leaves in the higher coded values.

Just note that if we had not higher coded the prefixes,

the behavior would have been exactly the same, given these rules.

So, let's go back and we're gonna reset this back to three versions, and

run gulp again.

Things are looking really good at this point, but

one more thing I just wanna show is another optimization tool for

post-CSS called post-CSS z-index Adding this to our Gulp file,

this is gonna optimize our Z index rules values in our CSS.

So to install, we're gonna go back to the gulp and we're gonna add the variable of

postcss Z index, that's a big one that points to the postcssZindex MPM module.

Then, we can add another option to the plugin that we created, and

start the index at one.

So, let's run gulp here.

So, looking at our output, we will see that our previous z index

values have been replaced, this one with one, this one was two and so on.

So with venderprefixing automated and z index normalized,

the next thing that we need to do is minify our css.

There are a number of ways to do this, but for this example,

I'm gonna use a tool called clean-css and

gulp-concat to produce a min.css file in our disk directory.

To install, we're gonna add the var concat that points to the gulp-concat mpm module.

Then cleanCSS that points to the gulp-clean-css module.

Now, we need the pipe in cleanCSS, and

then concat with the new name of prod.min.css

that will be our new output file.

And we're gonna run gulp and then let's open up the new prod.min.css file and

then we'll see that our css has been minified,

we're gonna go here and then open this up.

So this is pretty awesome.

To really see the progress we have made, though,

we can use a tool called css on minifier.

We can run this in the command line and

then we can use this to view an expanded version of our minified css.

When expanded, we see that empty selectors and commented out rules have been removed.

The selector normal-rules has been completely removed and

the selector no-rules-here is reduced to only the width rule.

This is less code and less code is more performant code.

But, what about combining media queries,

combining similar adjacent selectors and automating our shorthand CSS.

There are tools in cleanCSS that were not completely taken advantage of yet,

so let's go update our gulp script and add some parameters into our task.

So one way to use all the base rules for

cleanCSS is to simply add the level option within the return statement like so.

Let's go run gulp again.

And then we're gonna use CSS unmidifier to see the results once again.

With this update, we call in the full cleanCSS API and

get a really great series of features that help us really optimize our CSS.

Vendor prefixing is addressed.

Our z-indexing is addressed.

Notice, how the no rule selector was removed and make one and make two became

adjacent selector with mirror rules as the selectors are cacatinated.

Also notice that the two media queries

were grouped into a single media query selector.

This and other features like auto short handing your CSS roles just makes for

leaner and more performance CSS and

is a great tool to add to your automation process.