good day everybody welcome back to css3
in 30 days today is day number 28 and
instead of coding in this lesson we're
going to spend a little bit of time
talking about optimizing your css3 good
clean code is always a great idea here
are some hot tips on optimizing your
css3 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 css3 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 darn thing if you're doing a bad job
in it's going to be a bad job coming out
so remember crap in crap out when coding
your css use shallow selectors instead
of really long and messy redundant
selectors and that simply means if you
can select simply the id of awesome
don't select div
paragraph tag span m id of awesome
just simply using the id of awesome is
good enough that in and of itself is
smart css3 coding 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
up at 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 right 20
pixels margin bottom 20 pixels margin
left 20 pixels just say margin 20 pixels
and treat your css 3 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 it what
it's what makes the web look good so
treat it like it is art because
arguably it is
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
it's just cssportal.com css dash
optimize all you got to 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 i have some css
here queued up i'm just going to hit
paste
relatively short css file but what i'm
going to do is i'm going to optimize it
by compressing it
and choosing different settings here in
the tool so standard let's see let's
make it
let's start here highest no readability
smallest size if you have a production
ready style sheet that you want to 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 going to 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 can sort the
selectors it says use this with caution
it may change the behavior of your css
code because it's not a perfect tool
sorting properties you can even sort 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 shorthands all of these sorts
of things are things that you can do
better by
coding better in the first place so my
first tip 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 shorthands you can do safe
optimizations or all optimizations some
shorthands may be a little bit buggy so
that's why you can use safe
optimizations
compress colors uh if you're using the
the color pound three three three three
three three you could simply say pound
three three three and that's what this
is going to do compressing font weights
that will help you save some keystrokes
or at least some kilobytes in your css
file
lowercase selectors this says it's
lowercasing the element names for html
xhtml but nobody cares about xhtml
anymore so don't worry about that and
any other elements here like remove
unnecessary backslashes or remove the
last semicolon little tip is in your
code you don't actually have to have
a semicolon on your last style so for
example here
in this entire selector final shadow
typo right here this one doesn't
actually need a semicolon 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 semicolon but in your
production ready site
and you're compressing your code you can
have at it
you can discard invalid properties and
add 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 uh if you're because i'm
using css3 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 i actually want them because i'm
using css3 so here is the output right
here this is one line so i'm going to
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 did was compress your css so when
you're developing you want that css to
be highly readable and easy to navigate
with your comments the 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 a live application web
application you don't need all of that
stuff because
who's going to be reading that other
developers who click developer inspect
tools and read your css that's really it
so in those live sites you don't need
all of the all the organization all 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
app.css
and then you have a folder called
production and then in there you have
another app.css the productionapp.css
is the file that you would use to
load that
when you're doing the live site 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 uh let's do an example here so
codekit is one of my favorite developer
tools codekit is a paid application
there's a free trial uh it's
codekitapp.com i highly suggest you
support this guy it's just a single dude
i don't know if he's single or not he is
just a developer who builds an awesome
tool called codekit i truly love it it's
only like 30 bucks you can actually pay
what you want anywhere between you know
25 and 35 bucks or whatever it is
so i would recommend supporting him
codekitapp.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
and then a couple
css files here i can actually say output
style compressed i can choose how i want
it to be compressed
and
i can change the path so
let me say i'm going to create a new
folder called
production like we just talked about and
it's going to say
the min
production.css you can call whatever you
want but i'm going to say
this it's going to take that file and
it's going to
you know turn it into
something when i hit process boom
it's going to do that it compiled so in
here now we have a production file
called thememin 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 or builds so it's
checking this file when it changes
re-output so as a little example if i
just delete everything and just say 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 so you don't
need to resave copy and paste take it
down do this that and all the other
things and i'm just going to change that
back because that was a very important
file so i'm going to go back hit save
it's going to compile bam everything is
back
there we go so i would highly suggest
using codekit for those production uh
for deving and then needing production
ready files you can optimize
a ton of stuff
but because this is css we're just going
to talk about that the other thing that
you can do is preload your css in the
browser so
uh you can improve the performance and
the loading time of your styles on your
websites by simply adding the following
code link preload href and whatever your
css is as styles so you're basically
using the rel attribute to tell the
browser to preload this file as a style
and it will just check a little bit
earlier and load that style up so
there's less waiting time other thing
you can do is lighten up those
frameworks so bootstrap and other
similar frameworks are 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
load it up into your website your
application and make that will make the
resources quicker to load instead of
using all of bootstrap you can just use
this part of bootstrap that you actually
need one last thing that i want to leave
you with is learn a pre-processor
language now i do have a course on sas
you can check that out afterwards but
you need to take advantage of a css
preprocessor like sas 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 uh but it's a really nice
tool to know
when coding i'm here coding vanilla css3
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
preprocessor i won't talk too much about
that but i'd highly suggest checking out
my course learn sas so those are my tips
for optimizing that css code better
validate compress
preload lighten up those frameworks
learn a preprocessor language and check
out tools like codekit css optimize
and i put a resource in the
in the file in day number 28 called
shorthand properties teaches you a
little bit about using shorthands and a
little bit of
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 you tomorrow in day number
29.
[Music]