Welcome back to CSS three and 30 days.

Today is day number 28.

And instead of voting in this lesson, we're gonna spend a little bit of time talking about optimizing your CSS three.

Good, clean code is always a great idea.

Here are some hot tips on optimizing your CSS three.

First of all, code better You got to do the work right the first time.

Don't rely on optimization tools to make you a good CSS three coder.

As I always like to say crap in crap out, That simply means if you are putting something terrible into the machine, something terrible will come out no matter how much you prettify or optimize or compress the darned thing.

If you're doing a bad job in, it's gonna be a bad drug coming out.

So remember, crap in crap out one coating your CSS used shallow selectors instead of really long and messy, redundant selectors.

And that simply means if you can select simply the idea of awesome don't select Div paragraph tag span m idea of awesome.

Just simply using the idea of awesome is good enough.

That in and of itself is smart CSS three coating.

Utilize good code organization.

So instead of when you have an idea for a style just throwing it at the bottom of your CSS style sheet, find out where a good place for that piece of code is, and a nice little tip is.

Put a table of contents in a comment about the very top of your style sheet.

If you have a really big and heavy CSS style sheet, have some organization and have a way that you in the future can revisit your code.

Or, if you're handing off the project to somebody else, they can see what the heck you were doing.

Use shorthand where possible so instead of margin top 20 pixels Margin ranked 20 pixels Margin.

Bottom 20 pixels Margin left.

20 pixels.

Just say margin 20 pixels and treat your CSS three like it is art.

It's not just letters in a code editor.

It's your art.

It's your craft.

It's what makes the Web run, or at least that what it's what makes the Web look good.

So treat it like it is art, because arguably it iss hot tip number two.

Validate your code.

Sometimes the smallest error in your code can cause the biggest headache.

So be smart and use one of those free and awesome tools out there like this one.

Just CSS portal dot com slash CSS dash optimized.

All you gotta do is Google CSS optimizer or optimize your CSS.

There's a lot of tools out there.

This is one that I found and I'll just show you real quick how it works.

So have some CSS here cute up.

I'm just gonna hit paste relatively short CSS file.

But what I'm gonna do is I'm going to optimize it by compressing it and choosing different settings here in the tool so standard at sea.

Let's make it.

Let's start here highest no reading.

Readability.

Smallest size.

If you have a production ready style sheet that you wanna have ready to go, then you can have it at its highest compression because you don't need to be able to read it and modify it.

That's for developers only.

When you want to be able to see all your code easily see the organization, the table of contents, the comments, everything like that production ready, live sites.

You don't really need to have it be that readable.

So I'm gonna say highest this option.

Preserve CSS.

You can save the comments, hacks and so on and so forth.

By default, they have it turned off.

I would keep it off for now.

If you're having it, be highly compressed.

You consort the selectors that says, Use this with caution.

That may change the behavior of your CSS code because it's not a perfect tool sorting properties.

You can even start the properties by.

I don't know what method they're sorting them, but you can test it out and see what it does, or you can leave it off.

You can also regroup.

Selectors optimize short hands all of these sorts of things.

There's things that you can do better by coding better in the first place.

So my first hip was code better.

That saves you from having to sort your selectors and sort your properties just code properly so that you're not putting crap into the machine.

So it's gonna spit crap out.

That's why it has cautions, optimize short hands.

You could do safe optimization, Zor all optimization sze some short hands, maybe a little bit buggy.

So that's why you can use safe Optimization Compress colors If you're using the color pound 333333 You could simply say pound 333 And that's what this is going to do.

Compressing font waits that will help you save some key strokes, or at least some kilobytes in your CSS file.

Laura K selectors.

This says it's lower casing the element names for HTML ex HTML, but nobody cares what ex accept Jemele anymore.

So don't worry about that and any other elements here, like remove unnecessary back slashes or remove the last semi colon Little tip is in your code.

You don't actually have to have a semi colon on your last style.

So, for example, here in this entire selector final shadow type of right here, this one doesn't actually need a semi colon.

But I always do it by default because I don't want to get into the habit when I'm writing vanilla CSS to forget the semi colon, but in your production ready sight and you're compressing your code, you can have at it.

You can discard invalid properties and at a time stamp for when it was optimized up to you, process that CSS lets you know what when what went on.

So it's saying, Ah, if you're because I'm using CSS three, it's not.

It doesn't know what's going on.

So what I can do down here?

If I didn't want invalid properties, I can discard them but actually want them because I'm using CSS three.

So here is the output right here.

This is one Lions were gonna copy that and show you what that looks like.

So this is the the the original file, and this is what it would look like compressed.

That's it crazy.

It almost seems too short, but that's that's what it is.

So right here I have about 39 lines of CSS right here.

I've got technically one line.

It's just one really long line.

So and that's all The browser will load, so that's both validating and compressing.

It's letting you know any sort of messages here that you might need to know, So that is a neat little tool.

The other thing, which we just dated, was compressed your CSS.

So when you're developing, you want that CSS to be highly readable and easy to navigate with your comments that spacing the organization your table of contents, the hacks and everything like that.

Instructions for developers or co developers.

But in, like I said, those production ready sites like a live client site or live application of application.

You don't need all of that stuff because who's going to be reading that?

Other developers who collect developer inspect tools and read your CSS?

That's really it.

So those live sites you don't need all of those all of the organization, all of the comments and everything like that.

So what you can do, a little tip is have a developer CSS file.

That is your let's call it ap dot CSS.

And then you have a folder called Production.

And then in there you have another app dot CSS.

The production app Nazi SS is the file that you would use.

Two.

Load that when you're doing the live sites.

But when you're developing on the server, you just simply use your developer version now to show you how you can kind of do that.

Let's ah, let's do an example here.

So Code kit is one of my favorite developer tools.

Code kit is a paid application.

There's a free trial.

It's code kid app dot com.

I highly suggest you support this guy.

It's just a single dude.

And on every single or not, he is just odd developer who builds an awesome tool called code kit.

I truly love it.

It's only like 30 bucks.

You can actually pay what you want anywhere between, you know, 25 35 bucks or whatever it is.

Um, so I would recommend supporting him.

Code kit app dot com Basically, this is like an all in one compression output developer tool.

You can you can do a ton with it, but in a very basic way, you can optimize your CSS and even compress images and do everything like that and have it automatically output into a folder that you want.

So, for example, I have a folder here called theme styles on then a couple CSS files here.

I can actually say output style compressed.

They can choose how I want it to be compressed, and I can change the path.

So let me say I'm gonna create a new folder called Production like we just talked about, and it's going to say theme in production on C.

S s you can call whatever you want, but I'm gonna say this is gonna take that file and it's going to turn it into something.

I want to hit process.

Boom!

It's going to do that Compiled.

So in here now we have a production file called Theme in Production.

CSS.

Let's check it out.

So it's got all of the CSS that was in the original theme.

CSS.

So all of this is now compressed.

But I'm not overwriting this.

It's just got another file now.

The magic of this is I can have it run automatically when this file changes air build.

So it's checking this file when it changes re output.

So as a little example, if I just delete everything and just a body font size 12 pixels and leave it at that and save, it's going to re output, it just processed it.

And now that file is that so it automatically happens.

You don't need to re save copy and paste.

Take it down to this.

That and all the other things.

And I'm just gonna change that back because that was a very important file.

So I'm gonna go back hit save.

It's going to compile Bam!

Everything is back.

There we go.

So I would highly suggest using code kit for those production for giving and the kneading production ready files.

You can optimize a ton of stuff, but because this is CSS, we're just gonna talk about that.

The other thing that you can do is pre load your CSS in the browser so you can improve the performance and the loading time of your styles on your Web sites by simply adding the following code link pre load a trip and whatever your CSS is as style.

So you're basically using the rela tribute to tell the browser to pre load this file as a style, and it will just check a little bit earlier and load that style it.

So there's less waiting time.

Other thing you could do is lighten up those framework.

So bootstrap and other similar framer, sir, notoriously heavy, meaning that there are a lot of files, functions, assets and code that you simply do not need in the website.

Maybe you're just using the framework for like the grid or button styles or base styles.

If that's the case for you, then when you download the framework.

Either remove everything except what you plan on using or just download specific files from the framework that you need loaded up into your website, your application and make that will make the resources quicker load.

Instead of using all of bootstrap, you could just use this part of bootstrap that you actually need one.

Last thing that I want to leave you with is learn a pre process sir language.

Now I do have a course on SAS.

You could check that out afterwards, but you need to take advantage of a CSS pre processor like sass or less, and they'll not only save you coding time, but they'll give you more flexibility when it comes to styling.

And you can export highly optimized images and create production ready sites and applications.

But it's a really nice tool to know when coding I'm here coating vanilla CSS three.

And while it's great, I'm spending a lot of time typing things that I don't need to type.

If I'm using a pre processor, I won't talk too much about that, but I highly suggest checking out my course, learn SAS.

So those are my tips for optimizing that CSS code.

Better validate, compress pre load.

Lightened up those frameworks lor pre processor language and check out tools like code kit CSS optimize.

And I put a resource in the in the file and Day number 28 called Shorthand Properties teaches you a little bit about using short hands and a little bit of, ah, of how to improve your CSS coding.

So thanks for spending a little 15 minutes or so, learning a little bit of theory and why you should optimize your CSS see its moral on day number 29.