IntroductionWelcome| 00:04 | Hi, my name is Justin Seeley, and
I'm a staff author here at lynda.com.
| | 00:07 | I want to welcome you to this
course on CSS visual optimization.
| | 00:12 | This is a course that focuses on helping you
create clean, easy to read CSS code that can
| | 00:17 | easily be interpreted by you, a fellow designer,
or even a developer that you hand it off to.
| | 00:22 | During the first part of this course, I'll
discuss why clean markup is so important to
| | 00:26 | the web design workflow, and I'll also show you
some real world examples of both good and bad CSS.
| | 00:32 | From there I'll take you through organizing
your code, wherein you'll learn the importance
| | 00:36 | of creating an outline document, developing
a CSS table of contents, and how to properly
| | 00:41 | use indents and line rules to
keep your code nice and tidy.
| | 00:45 | After we've mastered the art of organization,
it's time to talk about commenting.
| | 00:49 | Commenting is an essential
tool in any coder's tool belt.
| | 00:52 | We'll wrap things up with stuff like creating
a master color and typography guide, building
| | 00:57 | a structure template, and also ways to speed up
your code and make your website run that much faster.
| | 01:03 | So if you're ready, let's begin
our look at CSS Visual Optimization.
| | 01:08 |
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium Member of the lynda.com
online training library, you have access to
| | 00:04 | the asset files for this course.
| | 00:06 | I've included several different code snippets
and exercise files in this folder called Assets
| | 00:10 | which you can access as we
go throughout the course.
| | 00:12 | Whenever we're in a movie that's dealing
with one of these files, you'll see an overlay
| | 00:15 | indicating the file that you should open.
| | 00:17 | Just navigate to that file, then open it
in whatever coded application that you might
| | 00:20 | have, and then once you have that file
open you can follow along with me step by step
| | 00:24 | with whatever it is that I am doing.
| | 00:26 | If you're not a Premium Member of
the online training library, that's okay.
| | 00:29 | You can still follow along with
everything that I do using your own files.
| | 00:34 |
| | Collapse this transcript |
|
|
1. Getting StartedThe importance of clean code| 00:00 | Before we actually get started learning how to write cleaner
code, it's important to understand exactly why we're doing it.
| | 00:06 | In this movie I'm going to talk about the
importance of clean code and why you should
| | 00:09 | focus more of your attention on
writing this way in the future.
| | 00:13 | So why should you keep it clean, as they say?
Well, first and foremost, writing clean code
| | 00:19 | makes your code more accessible, and I'm not just talking
about for you, but for other designers and developers as well.
| | 00:25 | Also, if you're developing consumer facing
products like themes for a CMS--like let's
| | 00:29 | say WordPress for instance--you want your
code to be easily read by even the greenest
| | 00:34 | of web designers so that they can make
changes on their own without having to send you an
| | 00:38 | email or fill up your
support forms with requests.
| | 00:41 | In addition to helping out others, you'll
also find that writing optimized code and
| | 00:45 | sticking to a template will help you start new projects and
edit existing ones more efficiently. Think of it this way.
| | 00:51 | If you've defined a structure for all of
your CSS documents, you can develop a template
| | 00:55 | document that can easily be used each and
every time you start a new project, making
| | 00:59 | it easier to get started writing out your code.
| | 01:02 | Also, by using a structured layout to your
CSS code, you will automatically know where
| | 01:06 | certain elements are and where
they start and stop in your CSS docs.
| | 01:10 | This means that you can easily go in
and edit them whenever you need to.
| | 01:14 | Now you might be asking yourself
exactly what makes CSS more readable.
| | 01:18 | Well, here are a few points related to that,
and we'll cover more of these and more as
| | 01:22 | we go throughout the course, but these are
the main ones I'd like for you to focus on.
| | 01:25 | Number one, ordering your
CSS properties consistently.
| | 01:30 | So what this is going to do for you is give
you a basic template for your CSS declarations
| | 01:33 | and allow you to easily write and edit
blocks of code in a more efficient manner.
| | 01:38 | Also, you should consider indenting your
child elements in CSS, because this is a great way
| | 01:43 | to show dependencies in your code, and
it'll make it easier for you to spot these child
| | 01:46 | elements during the editing process.
The third point is really a no-brainer.
| | 01:51 | If you're not already using shorthand for
things like Hex codes, margins, and padding,
| | 01:55 | you're kind of late for the party, but
lucky for you the party is still going on so you
| | 01:59 | don't have to worry.
It's never too late to start.
| | 02:01 | Using shorthand is a great way to cut down on
development time and also page load times as well.
| | 02:07 | Commenting is by far one of the best ways to
explain the structure of your CSS documents.
| | 02:12 | Comments allow you to distinctly identify
separate areas of your codes like headers,
| | 02:15 | footers, body areas, et cetera, as well as
things like color and typography sections.
| | 02:21 | This makes it easy for someone to come in,
find what they need, and easily make changes
| | 02:24 | to the code that you've written.
| | 02:25 | It also makes it easy
for you to do that as well.
| | 02:28 | Finally, you should focus on using
your whitespace effectively when coding.
| | 02:33 | Whitespace refers to things like tabs, spaces, and line
breaks, and it's important to the readability of your code.
| | 02:38 | However, too much whitespace is a bad thing,
and it can add a bit to the page weight.
| | 02:43 | Every space, line break, and tab that you
can safely eliminate is like having one less
| | 02:47 | character for the browser to parse.
| | 02:49 | We'll talk more about whitespace later on,
but just know that there's a fine line that
| | 02:53 | you have to walk between too much and too
little whitespace when it comes to the readability
| | 02:57 | and the efficiency of your code.
| | 03:00 | Now hopefully we understand that writing
clean code helps us in many ways, including file
| | 03:04 | size and readability, but it also helps
other people like consumers and developers
| | 03:09 | just as much as it helps us.
| | 03:11 | It's also good to note that once you've
developed a disciplined style of coding your CSS that
| | 03:16 | can be easily translated into other coding languages like
HTML and JavaScript or any other language for that matter.
| | 03:22 | In the end, writing clean code insures not
only that you're enhancing the end user and
| | 03:26 | developer experiences, but it also makes
other people and hopefully you, appreciate your
| | 03:31 | work more and will earn you some
serious respect for your efforts.
| | 03:36 |
| | Collapse this transcript |
| Exploring clean vs. messy style sheets| 00:00 | Now that we hopefully understand the importance of writing
quote-unquote clean code, let's take a look at
| | 00:04 | a couple of examples of clean code versus
some not so clean code and why one is more
| | 00:10 | readable and more useful that the other.
| | 00:12 | So I've got two documents here: one is
called Good CSS and one is called Bad CSS,
| | 00:17 | and I'm going to take a look at both of these.
| | 00:18 | We're going to explore exactly
what makes one good versus the other.
| | 00:21 | So I've got an opened bad.CSS here, and inside of
this document you can see it's not well organized at all.
| | 00:27 | I've got a header div that's declared up
here, and it's written out all in one line.
| | 00:33 | Then I've got the body tag defined, and it
goes line by line, but nothing is indented.
| | 00:36 | Then I've got the h1, h2, h3, and p tags
here all in separate lines, although they both
| | 00:43 | share some common things like the color,
which could have been put into a selector group.
| | 00:48 | I mean, there's all different types
of things that make this not readable.
| | 00:51 | Not to mention the fact that it's
not organized in any rhyme or reason.
| | 00:54 | For instance, the body
tag is here in the middle.
| | 00:56 | It needs to be towards the top.
| | 00:57 | There's no CSS reset present here which
means that the browser is going to be adding on
| | 01:01 | its own type of style.
So I haven't overwritten that at all.
| | 01:05 | Then nothing is really organized in any
way, shape, or form in this CSS document.
| | 01:10 | This unfortunately is how a lot
of people tend to write their code.
| | 01:14 | When a lot of people sit down to write out
their CSS, and this includes myself when I
| | 01:18 | first started writing CSS, I would just come
and just stream of consciousness write down
| | 01:23 | whatever came to mind or whatever I had in my
brain that I needed to do, and that's perfectly
| | 01:28 | fine when you're first developing
your CSS. That's perfectly okay.
| | 01:33 | This is your starting point. That's okay.
This should not be your end point, however.
| | 01:37 | What you need to do is take some time once
you have all of your ideas down inside of
| | 01:41 | this document and then reorganize it so that
it looks and feels a little bit better than
| | 01:46 | this, because if I came back into this a week
or a month later to make some changes I will
| | 01:49 | be searching for all of the values and all
of the different things that I needed to take
| | 01:54 | care of in here, and it would just be a big mess.
| | 01:57 | Whereas if I go over here into the good.CSS
document, you'll see here I have a very clean,
| | 02:00 | very well organized, very well commented
and documented bit of code here that I can
| | 02:05 | go through and take a look at.
| | 02:06 | So I've got--what website is this for--
okay, it's for the Roux Academy Blog.
| | 02:10 | This is their URL, here's the
author, and copyright information.
| | 02:14 | I've got a color guide here towards the top.
| | 02:16 | So it let's me know when I
see this color, it's that.
| | 02:18 | When I see this it's
that and so forth, and so on.
| | 02:21 | So I can relate these to actual colors
that I see throughout the CSS document.
| | 02:25 | I've got a nice table of contents here
that tells me oh, okay, so the first part that
| | 02:29 | I'm going to run into is the CSS reset which
affects all the files then number 1 is going
| | 02:34 | to be header, number 2 is going to be
body, 3 sidebar, 4 footer, 5 comments.
| | 02:38 | So if I need to find any of these like if I
need to find the header styles, I can just
| | 02:42 | scroll down, and I can find where that starts.
So header style starts right there.
| | 02:47 | Directly underneath that would be where the
header styles would be or if need to change
| | 02:51 | something in the CSS reset, I scroll
back up, okay, there's the reset and so there we go.
| | 02:56 | So having code that is organized, well
commented, and put into a structure of sorts is very
| | 03:03 | useful, because I could find one of these
section headings, look for the number that
| | 03:06 | I'm looking for, and then automatically
find the section that I need and then hopefully
| | 03:11 | target the elements that I'm looking to target a
little bit faster and a little bit easier by doing so.
| | 03:16 | Hopefully, these two documents give you a
better understanding of what makes good CSS
| | 03:21 | versus bad CSS, and I'm not necessarily
talking about how the code itself is written.
| | 03:25 | I'm just talking about from
an organizational perspective.
| | 03:28 | What makes it readable versus not readable?
So when I open up a document like this, very
| | 03:33 | easy to read, very fast for me
to find what I'm looking for.
| | 03:36 | Whereas if I open up a document like this,
I'm going to spend a lot of time using the
| | 03:40 | find and replace command as oppose to just being
able to scroll and fix whatever I came to fix.
| | 03:45 |
| | Collapse this transcript |
| The importance of the reset| 00:00 | One of the terms that you hear are often
talked about in CSS is something called the Reset,
| | 00:04 | or the CSS Reset, or event
sometimes known as the CSS Global Reset.
| | 00:09 | In this movie, we will be exploring the importance of the reset
and why it's useful to use this technique in your CSS coding.
| | 00:16 | The first thing we need to talk about is the
inconsistencies that browsers have just by nature.
| | 00:21 | By default, browsers automatically have
different margin dimensions around the edge of a site.
| | 00:26 | They also have borders that sometimes
magically appear around certain elements.
| | 00:30 | They give you oftentimes a default padding
added to your paragraph and heading tags.
| | 00:35 | They also have browser specific line
heights and they also have specific font sizes set
| | 00:39 | up for paragraph and header tags as well.
| | 00:42 | All of these elements put together make for a
very inconsistent look across the many spectrums
| | 00:47 | of browsers that we have to target.
| | 00:49 | Using a CSS Reset will actually strip out
the default styling from these browsers, and
| | 00:54 | it will give you a solid base in which to
build your site that is free of any interference
| | 00:59 | from the browsers so you can just go in,
write your own rules, and not have to worry about
| | 01:02 | anything being overwritten
by the browser itself.
| | 01:05 | This is going to save you a ton of time and alleviate a
lot of headaches when it comes to CSS development.
| | 01:11 | I can't tell you how many times when I first
started writing CSS, I was often frustrated
| | 01:15 | by the browser adding certain styles to the
elements that I was creating, because I didn't
| | 01:19 | yet know about a CSS reset.
| | 01:22 | So using a technique like a CSS reset is going to help
you get around those headaches before they even begin.
| | 01:27 | There are many different types of resets that are available
to you, and you can research all of these on the web.
| | 01:32 | The most popular of them is something called
Eric Meyer's Reset or just the Meyer's Reset.
| | 01:38 | I've actually included a copy of this
in the Assets folder for this course.
| | 01:41 | You can go in and look at that, and I'll
show it to you here in just a moment as well.
| | 01:44 | You can also look at the Siolon Global Reset,
Shaun Inman's Global Reset, and the Tripoli Reset.
| | 01:51 | The final reset is a custom reset,
one that you develop yourself.
| | 01:55 | Just realize that you will have to go
in and create this reset on your own.
| | 02:00 | This is going to be for anything that you
want it to be, so if you want strip out the
| | 02:03 | default styling from the header tags, the
paragraph tags, from the body, from the margins,
| | 02:08 | whatever it is you want to strip out.
| | 02:10 | That's what this is all about, creating your own
custom reset that suites your needs specifically.
| | 02:16 | Now let's get out of here and go over into
our coeditor and take a look at the Meyer reset.
| | 02:20 | As you can here at the top, there are
several different tags that are being targeted, and
| | 02:24 | it's basically the HTML, the body, the heading tags,
everything that is just the basic structure of any HTML page.
| | 02:30 | Then underneath that is the reset information.
| | 02:33 | Setting the margin to 0, the padding to 0,
the borders, outlines, font weights, all that
| | 02:37 | stuff just setting it to a normal setting
so that we have a blank canvas to work from
| | 02:43 | when we start developing our CSS.
| | 02:45 | You've also got some things
down here like focus styles.
| | 02:49 | So there's no outline on things like form
fields and things like that when you target
| | 02:52 | them or bring focus to them.
It also resets the line-height of the body.
| | 02:55 | It sets the background color to white.
It sets the font color to black.
| | 02:59 | It also strips out the styling from
the default list. It removes styles from tables.
| | 03:05 | All of these different things are an essential
part of anyone's workflow and yet the browser
| | 03:10 | automatically applies its own
styling to a lot of these different things.
| | 03:13 | So without this CSS reset being present you
would have to deal with that default browser
| | 03:17 | styling and have to find your own way around it.
| | 03:20 | Adding something like a CSS reset to your
CSS documents is a great way to ensure that
| | 03:24 | all of that information is
stripped out ahead of time.
| | 03:26 | I would also recommend that you add this as its own separate
CSS document and then import it into your HTML file.
| | 03:33 | Don't have this just sitting
at the top of your CSS document.
| | 03:37 | This allows you to have a separate place
for you to go and reference any of this reset
| | 03:40 | information, add and subtract things from
it, and then also allows you to build your
| | 03:44 | own separate CSS document without
all of this stuff cluttering up.
| | 03:48 | So in the end whether or not you decide to
use the Meyer reset or customize your own,
| | 03:52 | it's always a good idea to strip out as
much of the default browser styling as possible
| | 03:56 | so that you have a clean, nice canvas to
work from as you develop your own code.
| | 04:01 |
| | Collapse this transcript |
|
|
2. Organizing Your CodeDeveloping a CSS table of contents| 00:00 | One of the first things I do when developing
my own CSS documents is I automatically create
| | 00:05 | something known as a table of contents,
and this is going to help me organize my code
| | 00:09 | and keep my thoughts structured
as I start to create the CSS.
| | 00:12 | It also helps me separate different areas of my website
so that I can work on it in a very systematic approach.
| | 00:17 | In this movie I'm going to show my basic
system for building a table of contents which you
| | 00:21 | can use in your own projects and just add in
your own different parts and pieces as you see fit.
| | 00:27 | I'm going to create a
brand-new CSS document here.
| | 00:30 | When I first get the CSS document open, the
first thing I'm going to do is I'm going to
| | 00:33 | start typing out a comment, and I'm going
to do that just by typing out a slash and
| | 00:37 | then I'm going to add some asterisks to this.
| | 00:39 | You can add as many or as few asterisks as
you want, but in this case I'm going to make
| | 00:43 | it go almost all the way across.
| | 00:45 | Then after that I'm just going to hit Enter, and
I'm going to start typing out some information.
| | 00:50 | So now the first thing that I'm going to
work in here is going to be universal styles.
| | 00:54 | I'm going to do: number 1, Universal styles,
and I'll do things here like typography et cetera.
| | 01:03 | Number 2, header and nav styles.
Number 3, this is going to be main body content.
| | 01:14 | Number 4, this is going
to be for sidebar content.
| | 01:20 | Number 5, let's say we're working
with a CMS, I'll do widget content here.
| | 01:25 | 6 would be my footer content.
Then finally 7, we would do comments and forms.
| | 01:35 | To wrap up my table of contents, I'm simply
going to write out some more asterisks here
| | 01:40 | and then once I get all the way over to
the edge, I'll just type out a closing slash.
| | 01:46 | This is the basic structure for my document,
and as I continue to build upon this, I'll
| | 01:50 | use this table of contents to map
out each area as I start to style it.
| | 01:55 | So I'll start of with
number 1, the Universal styles.
| | 01:57 | This is where I define stuff like
the typography for the entire site.
| | 02:00 | This is where I define things like
the body style, all that kind of stuff.
| | 02:04 | Number 2, the header and navigation.
| | 02:05 | That's where I do things like the menu structure,
the lists, and the unordered and ordered lists
| | 02:09 | and things like that. Main body content.
| | 02:12 | That's for body paragraphs, image
styling, and all that good stuff.
| | 02:15 | Sidebar contents, stuff that goes on the right
hard side, adds, search bar, that kinds of thing.
| | 02:20 | Widget content much the same thing as
sidebar content, but this could be placed anywhere.
| | 02:23 | So I need to style those if I was
working with a CMS like WordPress for instance.
| | 02:26 | This is a very important section to style.
| | 02:29 | Footer content that's going to be things at the bottom
whether it be links, images, forms, Twitter, and Facebook icons.
| | 02:36 | Then finally comments if I'm working on a
blog or something like that or if this is
| | 02:40 | just a regular website, maybe there's a
contact form that I need to style up.
| | 02:44 | Maybe I just want to style all the form
elements or table elements for pricing tables.
| | 02:49 | In any case, developing a nice solid table of
contents that you can use each and every time
| | 02:53 | you start to develop CSS is a great way to insure order
and structure in your CSS documents going forward.
| | 02:58 |
| | Collapse this transcript |
| Creating section headings| 00:00 | Once you've thought out the structure of your
CSS document and the structure of your overall website,
| | 00:04 | it's time to start mapping out all
the different sections of your CSS document
| | 00:08 | using something called a Section Heading.
| | 00:11 | This is where we define all of the areas that
we've mapped out inside of our table of contents
| | 00:14 | and give them a specific are which we're
going to work on here inside of the CSS.
| | 00:19 | So the first thing I'm going to do
again is start off with a comment.
| | 00:21 | In this case I'm going to create a little bit of space
down from the bottom of this, maybe two to three lines.
| | 00:25 | You have to be careful not to create too
much whitespace here, because remember,
| | 00:28 | too much whitespace is not a good thing.
| | 00:30 | But in this case I think two spaces should
be enough, and I'm going to then map out a
| | 00:34 | smaller section heading something like this,
and we'll just do two lines of asterisks just
| | 00:39 | like this and then underneath there I'm going to type out
a number one, and I'm going type out Universal Styles.
| | 00:48 | Then I'll go underneath that, and I'll
type out a couple of more lines of asterisks.
| | 00:53 | Now this sort of defines that area for me, letting me
know that there is where that area starts and stops.
| | 01:00 | Then I could start declaring all of the
different items that go underneath that.
| | 01:04 | I can take this, and I can just copy it,
and I can go down, and I can paste that in and
| | 01:10 | then I can just change the number.
| | 01:11 | So I can do something like 2, and
that will be Header and Nav Styles.
| | 01:17 | Then I'll go down and paste.
This is going to be Main Body Styles.
| | 01:24 | Then we'll go down, paste, and we'll go back
up here to make sure we get everything right
| | 01:29 | there, number 4 is Side Bar
Contents. We'll change that.
| | 01:34 | Here we go and then 5. That will be Widget Content.
Then I'll go down and paste.
| | 01:46 | Then 6, this is going to be
our Footer. Then finally 7.
| | 01:53 | That is going to be our
Comments & Forms section.
| | 01:59 | Now I have all of these different areas set up
with section headings, and I can go underneath
| | 02:03 | each one of these, and I can start to type
out my CSS document for this theoretical
| | 02:09 | web page that I am working on.
| | 02:10 | This helps me keep my
content nice, ordered, and neat.
| | 02:13 | I have different sections separated with these
nice little comment declarations here letting
| | 02:18 | people know exactly where different areas
of my website start and stop making it easy
| | 02:22 | for me to find that area when I need to
come in and edit it and also making it easy for
| | 02:26 | other people who work with
me to come in and find it.
| | 02:29 | If I happen to be selling this as a
commercial WordPress theme or Drupal theme or whatever
| | 02:33 | it might be, then the end user who ever
purchases this can come into the CSS document,
| | 02:38 | and let's say I wanted to change a widget.
| | 02:39 | They can just come to the top, they
could say, okay, that's listed at number 5.
| | 02:43 | So I would just scroll down until I see a
number 5, and once I find that, oh, that's
| | 02:47 | where the widget content starts and then I
would begin my search for whatever it is
| | 02:50 | I'm looking for within that section.
| | 02:53 | When I got to the Footer content
that means oh, I've gone too far.
| | 02:56 | I need to go back up into that widget
content and find what I'm looking for.
| | 03:00 | So again, this is almost like making a roadmap
for you or for someone else who wants to view
| | 03:05 | your code and make changes in the future.
| | 03:10 |
| | Collapse this transcript |
| Indenting your code for readability| 00:00 | When it comes to readability one of the most
important things you can do in terms of CSS
| | 00:05 | code is to indent certain areas of your code to add a little
bit of distinguishing characteristics to that area of the code.
| | 00:11 | When we talk about CSS rules, what we need
to understand is that there's some sort of
| | 00:15 | an unwritten rule when it comes to
writing these and one I try to follow.
| | 00:19 | If there's only one rule in you CSS
declaration, you keep that on one single line.
| | 00:24 | However, if you have multiple rules, you
want to put that on multiple lines, and you also
| | 00:28 | want to make sure that you indent
the properties that you're working on.
| | 00:32 | So let's take a look at
how that works right now.
| | 00:34 | So I'm just going to go here underneath Universal Styles,
and I'm going to start off with a new declaration here.
| | 00:40 | I'm just going to type out
just a fictitious classname.
| | 00:43 | So I'll just type out .classname.
| | 00:45 | Let's assume that this one is going to
be just a one single line kind of thing.
| | 00:50 | So I'm just going to do open curly braces
there and a close curly brace and
| | 00:54 | in-between those we're going type out border, and we
are going to set it to 0 and semicolon like that.
| | 01:01 | Since there is only one rule here, I'm
going to keep that right there on one line.
| | 01:07 | However, let's say that I had another classname,
.classname2, and we'll do open curly braces here.
| | 01:15 | If I had more than one set of rules that were
going to be applied here, I would just create
| | 01:19 | a new line, and I would make sure
that the second line is indented.
| | 01:22 | In most modern code editors like Coda and others, they
will automatically indent this second line for you.
| | 01:28 | If they do not just press the Tab key over,
and you will be able to Tab over like this.
| | 01:33 | So I'll just type out something like Background,
and we'll make that white and then border set to 0.
| | 01:43 | Then let's just say the color was
something like that, and we have float left, margin
| | 01:52 | 0, and let's do padding 0.
So there's an example of how that would work.
| | 01:58 | So in this case we have classname with only
one rule so that gets put on one line with
| | 02:02 | no indent right there, but in this case look how much easier
to read this is right here. Everything is nice and concise.
| | 02:10 | It is in order, and I actually put all of
the different properties that I was working
| | 02:14 | on, I put those in order
as well as alphabetically.
| | 02:17 | So B for background, B for border,
C for color, F for float, et cetera.
| | 02:21 | I try to follow these unwritten rules to
make my code a little bit more readable to other
| | 02:26 | people, but also making sure that I use the
indentation for these, because making that
| | 02:31 | indent just lets me know, here is the start of this class,
and it doesn't stop until the outdent happens towards the end.
| | 02:38 | Everything that's indented now belongs to that
class and everything that's not indented does not.
| | 02:44 | This is a great way to help you distinguish
between blocks and declarations of CSS and
| | 02:48 | also a great way to help keep yourself
organized as you continue to create your CSS documents.
| | 02:53 |
| | Collapse this transcript |
| Best practices for class names| 00:00 | In this movie we're going to be discussing
Naming Conventions and how you should start
| | 00:04 | to rethink the way that you
name things in your CSS documents.
| | 00:08 | This is one of the more common questions that
I get from people who are just learning CSS.
| | 00:12 | They always ask, now, what
do you name these things?
| | 00:14 | How do you learn how to name these things?
It's really up to you how you name these things
| | 00:18 | and why you name things what you do, but
you do need to assume that this is going to be
| | 00:22 | edited at some point in the future
especially if you're doing client work.
| | 00:25 | Chances are they're going to come back with
suggestions for your work, and you want to
| | 00:29 | name things in such a way that lends
itself really well to future editing.
| | 00:34 | In this case I have to find two columns, and
that's here in the main body styles of the CSS document.
| | 00:40 | I've got column right and column left.
| | 00:43 | What if next year I have to come back in to
redesign this site, and I need to move that
| | 00:47 | left column to the right or that right column
to left? I shouldn't have to go in and rename
| | 00:52 | the element in my HTML code and in my
stylesheet as well just to change the position around.
| | 00:57 | Instead of using column right and column
left as my declarations here, what I should've
| | 01:02 | done is do something like
col-a and col-b for these.
| | 01:07 | That makes a little bit easier
for me to see col-a versus col-b.
| | 01:11 | It's not as absolute as right and left and
then all I have to do is come back in and
| | 01:14 | change the float right or the float left and then in
my HTML document I would already have col-a and col-b.
| | 01:20 | It wouldn't be as confusing if I had one
that was left, but it actually floats right and
| | 01:25 | one that's on the right
that actually floats left.
| | 01:27 | That can get really confusing.
| | 01:29 | You also need to be cognizant of the fact
that you need to be naming things based on
| | 01:34 | what they are and not what they look like.
| | 01:37 | So for instance, if you had a class
here that said something like comment-blue.
| | 01:43 | That's a very absolute thing, because the comment is supposed
to be blue in theory according to that declaration name.
| | 01:49 | However, that's a lot less versatile than
something like comment-footer or something like that.
| | 01:57 | Changing the name to comment-
footer is a little bit more broad.
| | 01:59 | It tells me where the comment is as opposed to
what it looks like and gives me the flexibility
| | 02:04 | to change the color property
anytime I want without any penalty.
| | 02:07 | The same holds true if I were
do something like post-largefont.
| | 02:13 | What if in the future I need to shrink the
size of that font, and it's not so large anymore.
| | 02:17 | A better title would be something like
post-title or post-body or something like that.
| | 02:24 | So name things according to what
they are, not what they look like.
| | 02:28 | I think this is a great technique to
follow and a great way to help you plan out your
| | 02:33 | CSS style names so that they are more
functional for you and also for the people who might
| | 02:38 | working on this document even after
you've produced it and set it up on the web.
| | 02:43 |
| | Collapse this transcript |
|
|
3. Commenting Your CodeWhat is a comment?| 00:00 | One of the easiest ways to let people
know exactly what's going on inside of your CSS
| | 00:04 | documents is to use something called a Comment.
| | 00:07 | And you might not know exactly what a
Comment is or how to write one, and so that's what
| | 00:11 | we're going to talk about in this movie.
| | 00:13 | What exactly is a Comment? So, I'm going to
start off with a black CSS document, so let's
| | 00:17 | go to File, New CSS, and you can create a
new CSS document in whatever code editing
| | 00:21 | application you happen to be using,
it doesn't have to be this exact one.
| | 00:24 | And so I'm just going to start off by typing
out the body tag here and then on the second
| | 00:29 | line I'm just going to define something like the font-size
and then after that we're going to do something like 62.5%.
| | 00:37 | And so, after I type out 62.5%, some people
might not understand exactly what that means.
| | 00:43 | 62.5% of what exactly are we defining here?
And so I need to put something in here that
| | 00:48 | explains to the layperson
exactly what this means.
| | 00:51 | And so in order to that I need to insert
something called a Comment, this is code that is not
| | 00:56 | going to be interpreted by the browser,
it's actually ignored by the browser, and it's
| | 01:01 | only visible to people who
view the CSS document itself.
| | 01:04 | And so, in this case, to start a comment you just
do a slash, and you do a little asterisk
| | 01:09 | like this, and you would do something like
1em is equal to 10px and then we'll close
| | 01:17 | that with an asterisk
and a slash like this.
| | 01:21 | And so basically, in this case, this comment
lets someone reading the CSS file know that
| | 01:25 | that particular line of CSS was intended
to allow free using ems to set the font size
| | 01:30 | later in the CSS in a more
intuitive base 10 type of way.
| | 01:35 | And so, hopefully somebody will understand that and will
read into that from that comment that I produced right there.
| | 01:40 | You can also do this for something like
colors as well, so if you wanted to define a color
| | 01:45 | for this text like #333, and if somebody
doesn't understand what color that is that's okay,
| | 01:51 | you can just do a slash, and you could
do something like dark grey just to let them
| | 01:59 | know what the color is and so if they chose
to change it, they would know, oh okay, I'm
| | 02:04 | changing the color from
dark grey to something else.
| | 02:07 | So these little comments are actually
very useful for determining things like this.
| | 02:13 | And so, in essence, when you work on comments,
this is a great way to sort of road map where
| | 02:17 | you're going and also a great way to add in
little bits of information regarding the code
| | 02:23 | that you've inserted into your CSS
documents and let people understand exactly what you
| | 02:28 | were going for in this markup.
| | 02:33 |
| | Collapse this transcript |
| Writing single-line comments| 00:00 | There are indeed many different ways to
write CSS comments, and in this movie I'm going to
| | 00:04 | explore how to write the
single line format of comments.
| | 00:08 | And there's actually a few
different ways that you can do that.
| | 00:10 | And so the first way to do that is just
the very basic way of putting a slash, adding
| | 00:16 | an asterisk, and then writing out your comment.
| | 00:20 | At the end of this, you want to close
it with an asterisk and another slash.
| | 00:25 | Now that's one way to do it.
| | 00:27 | This, however, sometimes doesn't get the attention of
everybody because there's not a whole lot going on here.
| | 00:32 | And so, another great way to do a single line
comment would be to add a few more asterisks to this.
| | 00:38 | So something like this, and then close it
with asterisks as well, something like that.
| | 00:46 | This gives it a little bit of more definition,
gives it a little bit more prominence in the
| | 00:50 | code and allows people to actually say oh,
okay there's something going on here that
| | 00:53 | I need to pay attention to.
| | 00:55 | In addition to asterisks, you could also use
dashes or hyphens, so you could do something like this.
| | 01:02 | Just make sure that when you're doing it
this way that you do not take away the leading
| | 01:07 | or the trailing asterisk at the front,
because that's what makes it a comment.
| | 01:11 | You have to have the slash asterisk
here and the asterisk and the slash here.
| | 01:15 | So either way it's fine, but this is the
way that I usually write single line comments.
| | 01:20 | I usually do either the hyphen way,
or I do the multiple asterisks way.
| | 01:24 | You can of course just do the
standard all two asterisk method.
| | 01:28 | That's totally up to you, but either way try
to find a way that works for you, a way that
| | 01:32 | you can do this quickly and a way that is
also going to draw attention to these comments,
| | 01:36 | because that's why we're putting them in
there so that people will read them, understand
| | 01:40 | them, and see exactly where we
were trying to go with our CSS
| | 01:45 |
| | Collapse this transcript |
| Creating multiline comments| 00:00 | If and when you need to insert multiple lines
inside of a comment, it's always a good practice
| | 00:06 | to do what I called creating separator lines
so that people understand that this is a huge
| | 00:10 | block of comment that they
need to pay attention to.
| | 00:13 | Now if you've already watched the movie on
Developing a CSS Table of Contents, you know
| | 00:16 | exactly know what I'm talking about here.
| | 00:18 | And there's a lot of different ways that
people do this, and I'm going to show you a couple
| | 00:21 | of those different ways now.
| | 00:22 | So, in order to start a comment, of course
you want to start with just a plain old basic
| | 00:27 | syntax for writing out your comments.
| | 00:29 | So you want to do the slash and then an
asterisk to start it off, but if you're
| | 00:33 | doing a multi-line comment, my suggestion is
to just keep the asterisks going across,
| | 00:39 | and I would suggest going about
halfway across the page if not more.
| | 00:43 | And then after that if you really want to
create some space in here you can add another
| | 00:47 | line of asterisks to this, this is really calling
attention to whatever it is you're putting in there.
| | 00:53 | And then you can start typing out your comments.
| | 00:54 | So if you've seen my Table of Contents document,
this is how I start off my table of contents
| | 00:59 | and then I come in and type out something like,
Section 1, header, Section 2, Body, et cetera.
| | 01:06 | To close up the multi-line comment, all you have
to do then is start typing out your asterisks
| | 01:12 | again, get that all the way there, and all the way
over like this, and once you get to the very end.
| | 01:20 | just close it with a trailing slash, like so.
| | 01:22 | So you can see this is a more prominent thing,
it also has a lot more space in the middle,
| | 01:26 | we can write out multiple lines of comments.
| | 01:28 | This is going to be for like big explanations
of what's going on, defining big areas of
| | 01:33 | content like headers, footers, bodies, defining
the table of contents, all that kind of stuff.
| | 01:37 | It can also be used as a declaration block
at the top of your CSS to do things like who
| | 01:42 | you are, so you could say something like,
Author, you put in something like your website
| | 01:49 | address, I mean all this different stuff,
attribution to yourself, basically is what this amounts to.
| | 01:55 | And so, this is really just going a long
way to calling attention to something and also
| | 01:59 | separating it out from the
rest of this information as well.
| | 02:02 | Now, if you don't like this way of commenting,
that's okay, you can also change it up a little
| | 02:08 | bit, as long as you do the slash asterisk
you could also do something like hyphens
| | 02:14 | for this, and so you could do something
like this, you go all the way across like that,
| | 02:21 | and then you could do something like,
This is my comment. Thanks for reading.
| | 02:27 | And then you can add some more
hyphens underneath there.
| | 02:33 | But just remember at the very end of this
you do have to close it with an asterisk
| | 02:37 | and a slash, something like that.
And so again, it's up to you how you do this.
| | 02:41 | In the end, I would recommend that you come
in and play with this and develop your own
| | 02:44 | style, but multi-line comments, things that
span multiple lines or multiple paragraphs
| | 02:49 | need to be well defined and they need to be
highlighted in such a way that people understand
| | 02:53 | exactly where they start and stop.
| | 02:55 | And so, using techniques like I've just
shown you here goes a long way towards doing that.
| | 03:00 |
| | Collapse this transcript |
|
|
4. Writing Clean CodeUsing font families| 00:00 | One of the ways in which we can improve
both the load times and the cleanliness of our
| | 00:04 | style sheets are to use something
that I call a reasonable font-family.
| | 00:08 | And what I am talking about here is the
fact that a lot of people sort of overload the
| | 00:12 | font families when they are declaring
them in their typography and their CSS.
| | 00:15 | So let us take a look here.
| | 00:16 | I am just going to create a new CSS document and
let us just say I am working on an h1 tag here.
| | 00:21 | And so generally, when we talk about font-families,
we are just talking about defining what font-families
| | 00:27 | are going to be present, and you are most
likely going to define one to sometimes three
| | 00:33 | font-families that you think you need in
order to create all these different fallbacks,
| | 00:38 | so if someone doesn't have a certain font
that falls back on another, if they don't have
| | 00:41 | that, it falls back on another,
and so forth, and so on.
| | 00:43 | But chances are, in today's modern web, you
can work with just one or two font-families.
| | 00:49 | You don't actually have to
include all these different ones.
| | 00:52 | And so I have seen people that do something
like, okay, I need a Palatino upfront, and
| | 00:55 | if they don't have that we want to go to
Georgia, and if they don't have that we're going to
| | 00:59 | go to Times, and if they don't have that,
then we are going to go to Times New Roman,
| | 01:05 | and if they don't have that, well, then we
will go to just a regular old Serif font,
| | 01:10 | something like that, and that's a really long
set of fonts that they are working with here.
| | 01:15 | And so chances are, you can get a way
with something like this, Palatino and serif.
| | 01:22 | Because chances are, if they don't have
Palatino they are going to have some sort of serif
| | 01:25 | font-family, and chances are it is going to be one
of Georgia, Times, Times New Roman, one of those.
| | 01:31 | So don't necessarily have to define all of
those different fallbacks, because this is
| | 01:35 | just more stuff that the browser has to read, and
thus it's going to increase the load time of the page.
| | 01:39 | It is also going to make this
appear to be very, very cluttered.
| | 01:43 | So unless you are using some sort of special
web font, wherein you have to go in and actually
| | 01:48 | tell that I want to use something like,
let's say you use Garamond Pro or something like
| | 01:55 | that, and you are defining it, then you
might have just a single fallback like Palatino,
| | 01:59 | and then you could say Serif, but only if
you are using a specialized font like that
| | 02:05 | somewhere in your document would
you need to define three or more.
| | 02:08 | In this case, I think as I said you could
get away with just a simple Palatino, Serif
| | 02:14 | declaration or maybe even like Arial, Sans Serif,
Helvetica, Sans Serif, whatever it might be.
| | 02:20 | So just shortening these down gives you a
much more concise list of fonts to work with,
| | 02:24 | it takes away some of the unnecessary
properties that you are defining which makes your pages
| | 02:28 | load faster and makes for an overall better
experience for your end-user and also better
| | 02:32 | experience for any developers that have to
dive in here and take a look at your code
| | 02:35 | later on as well, because nobody wants to
look at a laundry list of fonts, when they
| | 02:39 | are coming to clean up somebody else's code.
| | 02:44 |
| | Collapse this transcript |
| Avoiding unnecessary tags and classes| 00:00 | One of the things that get some people in
trouble when they are developing CSS is the
| | 00:03 | fact that they start to use unnecessary
classes when they are developing their CSS.
| | 00:09 | Chances are you are going to be doing things
that you are going to find, you use certain
| | 00:12 | styles that you are applying
over and over and over again.
| | 00:16 | For instance, you might have stuff that floats
to the left, or stuffs that floats to the right.
| | 00:20 | And chances are you are going to be declaring
different classes of items, and you are just
| | 00:24 | going to say okay, I want this to float left,
I want this to float left, I want this to
| | 00:26 | float right, and et cetera, et cetera.
| | 00:28 | But why not just develop your own set of
generic classes called .left, .right
| | 00:33 | or whatever, and then use those as a
secondary class when you are defining something.
| | 00:38 | So for instance, let us go in and create a new document
here, and I will show you exactly what I mean by this.
| | 00:43 | The first that people do when they start defining
stuff, so they will do something like button-left,
| | 00:49 | and then they will tell that to float:left.
| | 00:52 | And then they will do something like column-left,
and then they will tell that to float:left.
| | 01:00 | Again, it's just more redundancy that you don't need,
you don't necessarily need a column-left or a button-left.
| | 01:07 | You might need a button class,
you might need a column class.
| | 01:10 | You might also need a left or right class,
but you don't need individual columns for this.
| | 01:14 | Or you might even see people do something
like this, column-left-blue, or button-left-blue,
| | 01:19 | and you would see something that says
button-left-red, button-left-whatever.
| | 01:24 | And so you grind up with all of these unnecessary
classes where you could just do something like .button.
| | 01:30 | And so this could be something like, you know,
webkit-border-radius:6px, border-radius:6px
| | 01:43 | and six pixels for that.
And so that's just your button class.
| | 01:51 | And then you can have something here like generic classes
that will be like .green, which is background:green.
| | 02:01 | And then you can have something like .left
which you just float:left and then .right
| | 02:10 | which would just be float:right.
| | 02:14 | And so you can make up these generic classes
and then when you go in, and you are defining
| | 02:18 | something in HTML, let' just create a blank
HTML document, you would do something like
| | 02:22 | <div class= and you would just type out,
"button green left" > </div > just like that.
| | 02:32 | And so that way it absorbs the button class,
the green class, and the left class all at
| | 02:37 | one time, and you can also go back, and you
can make changes to the button class by itself.
| | 02:41 | You can make changes to the green class,
the left class or right class just makes it
| | 02:44 | a little bit more organized, keeps
these things as generic as possible.
| | 02:49 | Remember you want to design your CSS based
on what something is not what it looks like.
| | 02:54 | And so in this case, I am just defining the basic properties
of the border-radius to maybe a width and height value.
| | 02:59 | Whereas the green, the left, the right,
that's all controlled generically.
| | 03:02 | That way, if I wanted to have something later
on that's like a column, and we will do .column-a
| | 03:08 | here, and I can just say I want this to be
90% of the width, so let us do width:90%,
| | 03:16 | and then whether or not it floats left or
right is irrelevant, because I can then go
| | 03:19 | over to my HTML document, and I can say something like,
<div class="column-a, and we could set that to go to the right" > </div >.
| | 03:31 | So that way it is going to float right,
because it's adopting that right class, and inside
| | 03:36 | of here I have got .right.
So that's what I am defining right there.
| | 03:41 | It's using the column-a class it's also
using the right class, and I didn't have to tell
| | 03:45 | this to float right, I just said
to tell it how wide it needs to be.
| | 03:48 | So in this case, I am avoiding these
unnecessary tags by developing a set of generic tags that
| | 03:54 | I can then apply to different
classes in my HTML markup later on.
| | 03:58 | So go through, find some commonalities
between things, like whether or not it floats left,
| | 04:02 | it floats right, colors, et cetera.
| | 04:04 | Develop yourself some generic tags that
you put somewhere in your CSS document.
| | 04:08 | Maybe even have your own section of quote
generic tags, and so you use those generic
| | 04:12 | classes to apply them to different
things like buttons and columns and so forth.
| | 04:16 | I think you will find this as a great way
to help you keep yourself organized and a
| | 04:20 | great way to help avoid unnecessary class
creation and unnecessary tag usage as well.
| | 04:25 |
| | Collapse this transcript |
| Using CSS shorthand| 00:00 | In this movie we are going to be exploring
something called CSS shorthand, and when you
| | 00:05 | first read this, you might think that I am
getting ready to show you some sort of magical
| | 00:07 | trick to make your CSS
writing a little bit shorter.
| | 00:10 | And in fact I am going to show you a trick
to make it a little bit shorter, but it is
| | 00:13 | not necessarily something that
you haven't seen before probably.
| | 00:16 | But this might be something that you
haven't really adopted into your workflow per se,
| | 00:20 | so I want you to take a look at it
and see if it makes sense to you.
| | 00:22 | So what we are going to do, I am going to
go up to the File menu and just create a new
| | 00:25 | CSS document just a blank CSS document for now.
| | 00:28 | And so what I want to do is just start typing out
some sort of declaration, it doesn't matter what it is.
| | 00:32 | In fact, it could just be a plain old div, and once I
do that, I am going to start typing some things out.
| | 00:37 | So let's say normally, I would come in, and I would
start defining things like margins and padding for this.
| | 00:42 | So I could do something like margin-top is
equal to, let's say, 20 pixels and then margin-left
| | 00:50 | equal to 15 pixels and then margin-right is
equal to 15 pixels as well, and then margin-bottom,
| | 01:03 | and let's say that is 30 pixels,
something like that.
| | 01:06 | So, all of these are correct.
| | 01:08 | This is not written incorrectly whatsoever; however, it
is written unnecessarily in long form, if you ask me.
| | 01:15 | So this is way one to write
all of these different margins.
| | 01:19 | Let me show you a different way that is just
as effective and also saves you a lot of time.
| | 01:24 | So let's do div2, and let's go here.
| | 01:27 | So I could just do one margin property and
then instead of writing margin top, left,
| | 01:32 | right, and bottom, I could just do this, so
I could say, okay, I want 20 pixels for the top
| | 01:37 | and then after that we want 15 pixels for
the right, 30 pixels for the bottom and 15
| | 01:43 | pixels for the left, and so now I have in
one line declared all of those values that
| | 01:49 | I did up there, so this is
just a shorthand for that.
| | 01:52 | The same holds true for
something like padding as well.
| | 01:56 | So normally you would write padding-top,
padding-left, padding-right, et cetera.
| | 02:00 | Now you can just type out padding, if it is
all the way around, you can just do 5 pixels,
| | 02:06 | and that adds 5 pixels all the way
around, the object that you are declaring.
| | 02:10 | Or you can do something like okay, I want 5
pixels on the top, I want 10 pixels on the
| | 02:14 | right, 30 pixels on the bottom,
and I want 10 pixels on the left.
| | 02:20 | And so there is your padding declaration
all written out in one single line, as opposed
| | 02:25 | to all of these different lines right here.
| | 02:28 | In addition to using this form of shorthand,
you can also use shorthand for things like
| | 02:32 | colors, and so, whereas before I would
type out something like color and then I would
| | 02:37 | type out six zeros for black, I
could just type out three zeros for
| | 02:45 | black, and it automatically knows
that that's supposed to be black.
| | 02:47 | Or I could just type out black and in most
modern browsers it would automatically know
| | 02:52 | that that's what color I need it to be.
| | 02:54 | You can also type things out like white,
you can do things like blue, red, whatever the
| | 03:00 | color is as long as it is one of these basic
colors, you can define it in most modern browsers
| | 03:04 | to be able to pick up on that.
| | 03:05 | You can also do the hex code shortcut
for things like white, so just three fs.
| | 03:10 | You can do it for all of
the greys, so 333, 666, 999.
| | 03:17 | You can also do it for the letter codes for those,
so ccc, all of those different codes work just the same.
| | 03:23 | So remember, as you are starting to develop
your own writing style for CSS, try to pick
| | 03:28 | up on some of these shorthand ways of writing
out properties like margin, padding, and colors,
| | 03:34 | and you are going to save yourself both
some time and some space in your CSS documents,
| | 03:38 | making it easier for you to identify properties,
making it easy for you to change them in the
| | 03:42 | future and making it easier for other
people to read your code going forward.
| | 03:47 |
| | Collapse this transcript |
| Avoiding redundancy with selector groups| 00:00 | Another great way to avoid redundancy, and
also to save yourself a lot of time in writing
| | 00:05 | CSS is to use something called a Selector Group.
| | 00:07 | I've got open here the meyer_reset.css document
that's available to you in your Assets folder.
| | 00:12 | If you don't have access to that, that's
okay just take a look at what's on screen.
| | 00:15 | And so basically, what we have here, as you
can see is a bunch of different tags all grouped
| | 00:20 | together separated by a comma, and then a
declaration after that of all of these different
| | 00:25 | properties that all of these things share.
| | 00:27 | Now, I could have just written it out where
HTML would be its own tag, and it would have
| | 00:31 | all these properties, body be its
own tag, have all these properties.
| | 00:35 | But instead of writing all that out multiple
times and having redundant CSS in my document,
| | 00:41 | what I've done is created something called a
Selector Group, so all of these are selectors,
| | 00:45 | and this selector group now
shares all of these properties.
| | 00:48 | And since I've spelled them out, separated
them by a comma, and then I put the curly
| | 00:52 | brace up in front of them and a curly brace
after there, that just means that all of these
| | 00:56 | adopt all of these
different properties all together.
| | 00:59 | I don't have to separate them.
| | 01:01 | They all just take on this one set of
properties which is really, really handy.
| | 01:05 | So, let me show you a
real world example of this.
| | 01:07 | So, I'm just going to go ahead and close this document up
for now, and I'll create a brand new blank CSS document.
| | 01:13 | Let's assume that we are going to be
styling some headers for our blog, let's say.
| | 01:18 | And so, normally, what people do is they
come in and they say, okay, H1, we're going to
| | 01:22 | do the color, it's going to be black.
| | 01:25 | And after we type out the color, we're going
to say font-family, and we're going to call
| | 01:30 | this arial,helvetica,sans-serif,
something like that.
| | 01:38 | We're going to say font-size, and we'll make this 48 pixels,
and there's a bunch of different properties go into this.
| | 01:46 | So margin, let's put this at 0, and let's do 0,
5 pixels on the bottom, 0, something like that.
| | 01:54 | And so, all of these different properties
for the H1 tag, and then they would come down
| | 01:58 | and they would type out H2, and they would do
color:black, font-family:arial,helvetica,sans-serif.
| | 02:12 | You sort of get the idea here.
| | 02:13 | I'm just being redundant as I go through here,
creating a bunch of unnecessary lines in my CSS document.
| | 02:19 | Whereas, if I were to come up here and just
do this, where I eliminate anything that's
| | 02:23 | specific to just the h1, so like the font-size,
does not need to be in this declaration.
| | 02:29 | I'll just do this, h1, h2, h3, h4.
| | 02:34 | So all of these different tags are going to be
black, they're going to inherit the font-family
| | 02:38 | of Arial Helvetica or Sans-Serif, they
are going to have this margin applied.
| | 02:42 | And then after that, I
could type out h1, font-size:48.
| | 02:50 | Then I could go down, and I
could say h2, font-size:36.
| | 03:00 | Then go down h3, font-size:24, and then h4, font size:,
and let's do this at something like 18. There we go.
| | 03:17 | And so now, all of these different things
are being inherited up here, and then I'm
| | 03:20 | just defining the sizes
one at a time right there.
| | 03:23 | So, this Selector Group
includes all four of my headers.
| | 03:27 | They all are now black, they all have this
font-family, they all have this margin, and
| | 03:30 | then I have all their
individual sizes declared down here.
| | 03:34 | And so, what I've done is saved myself a lot
of time, I've saved myself a lot of writing
| | 03:38 | by typing out all this up here, and just
adding the selector group instead of actually adding
| | 03:42 | those individual properties to each one
of these different header declarations.
| | 03:46 | So, as you develop your CSS documents and
you find similarities between certain tags,
| | 03:53 | my recommendation is to create
yourself some selector groups.
| | 03:56 | And it's not just these default tags like
h1 and body, and things like that, you could
| | 04:00 | add divs into this, you could add classes
into this, you could add all different types
| | 04:04 | of things into this as long as it's separated
by a comma, and as long as they all share
| | 04:08 | those specific properties that you
define, everything should be cool.
| | 04:12 | So just as you move forward, try using these
Selector Groups to kind of compress your CSS,
| | 04:17 | and to have certain things share certain
properties so that it makes it easier on you, and easier
| | 04:21 | on the person who comes in and edit it later
on to find exactly what they're looking for.
| | 04:26 |
| | Collapse this transcript |
|
|
5. Useful TechniquesCreating a master color guide| 00:00 | One thing that I always found tricky when
it came it CSS was remembering all of the
| | 00:04 | different colors that I'd used throughout
my CSS documents and what exactly they were
| | 00:08 | and what the hex codes
meant and all that good stuff.
| | 00:11 | And so, what I started doing was developing
something that I call a universal color guide
| | 00:16 | that I'd create for each
individual CSS document that I have.
| | 00:19 | So, what this color guide enables me to do
is before I start out, chances are, I have
| | 00:23 | done a mock-up in Photoshop, or Fireworks,
or Illustrator or something, and I have got
| | 00:27 | all of the colors that are going to go
in to this design already planned out.
| | 00:31 | So what I do is I get the hex codes for those
or the RGBA values for those, and I go through,
| | 00:36 | and I map out a style guide at the very
top of my CSS document to let me know exactly
| | 00:41 | what colors I will be using, and then I put in there all
of the different names of those colors, whatever they might be.
| | 00:47 | So, I am going to show you
how I do that right here.
| | 00:49 | So, the first thing I do is I start off with
a comment, and that's just going to be just
| | 00:52 | a slash and an asterisk here.
| | 00:55 | And then, after that, you could put out
something like color guide or something.
| | 00:58 | So in this case, I am just going to create
a multiple line thing here just like this.
| | 01:06 | And then we are going to type
out COLOR GUIDE just like so.
| | 01:11 | And so, underneath that, I am going to type
out a pound symbol, and we are going to
| | 01:15 | type out something like Dark Grey.
| | 01:18 | And this is something that's going
to be applied to text in our document.
| | 01:21 | And then put that over, and so the dark grey
color that I am going to use for that is #333.
| | 01:26 | Then the next line,
that's going to be Dark Blue.
| | 01:30 | And this is something that's going to be
applied to headings and links, and so colon after
| | 01:36 | that, and so this color is going to be #000066.
| | 01:43 | And then we would type out something like Mid Blue, and
this is going to be used for only my header styles.
| | 01:51 | And so, this color is going to be #333399
and then we would do something like Light
| | 02:00 | Blue, and this is going to be for the top
navigation of my site, and we could do something
| | 02:06 | like #CCCCFF, and then finally we would do
something like Mid Grey, and this could be
| | 02:15 | just a universal color here, and so we could
do something like #666, and then at the end,
| | 02:22 | we would just close up the comments.
| | 02:24 | So we would just close it up just like this,
and then at the very end of course, we want
| | 02:31 | to close that with a trailing slash.
So, this is my color guide.
| | 02:34 | And so anytime I need to come back up here,
I can say, okay, now what was this color again, the 000066?
| | 02:41 | Okay, that's dark blue, and it should
only be applied to headings and links.
| | 02:44 | Mid-blue is this, and it should only be
applied to the header, and so forth, and so on.
| | 02:47 | It's a great way to organize all of the different
colors that you use throughout your CSS documents,
| | 02:52 | and you can go and
reference that anytime you need to.
| | 02:56 | And that way, you can easily do Find & Replace
for all these different colors, and you can
| | 02:59 | instantly update this, change it however
you see fit, and it just really saves me some
| | 03:04 | time and really, really saves me some
headaches when I am developing my CSS documents as well.
| | 03:09 |
| | Collapse this transcript |
| Creating a master typography guide| 00:00 | In addition to creating your own master color
guide, you can also create a master typography
| | 00:04 | guide if you wish as well.
| | 00:05 | This is going to be something that is really
helpful when you start to use web fonts, and
| | 00:09 | all different types of fonts that aren't
necessarily default inside of a browser.
| | 00:14 | And so, in order to do this just create
yourself a blank CSS document really quick, and you
| | 00:17 | can kind of see exactly
where I am going with this.
| | 00:19 | What we're going to do is first start off
by defining a comment, and I will just create
| | 00:23 | a little bit of a line here with some
asterisks and then directly underneath that some more.
| | 00:31 | This just creates a little bit
more space, and lets people know hey,
| | 00:34 | something is happening here, there is a heading.
| | 00:36 | So in this case, I am just going to type out
Typography Guide, and so we will do things like Headings.
| | 00:48 | And so, this will be something like, let's
say, Georgia, and we will do 14 pixels through
| | 00:55 | let's say 36 pixels for this.
| | 01:00 | Body, and this would be Arial,
and we'll do 12 pixels for this.
| | 01:09 | And then you could come through,
and you could do stuff like Quote.
| | 01:11 | So, if you are doing a blog, and you are using
block quote, you can do something like Georgia,
| | 01:18 | Italic, and then make this 12 pixels as well.
| | 01:24 | Basically, what you are doing is you are just
going through and defining all of the different
| | 01:27 | areas of your website, and all of the
different fonts you are going to be using.
| | 01:32 | Now, this is sort of a boring example
because I am just using Georgia and Arial, but if
| | 01:35 | you are using a bunch of let's say Google
Web Fonts, or if you are using Type Kit, for
| | 01:39 | instance, this would be a great thing to have
when you come in and you actually write down
| | 01:43 | what you're going to be using.
| | 01:44 | So like for your headings, if you are
using something like League Gothic for this.
| | 01:49 | And for your Body copy you were going to use
something like Nero Sans, and for your Quotations,
| | 01:55 | you were going to use
something like Courier new.
| | 01:58 | I mean, there are all different types of fonts
that you can use, and by creating this typography
| | 02:04 | guide, you enable people to know exactly
when they are looking at the site and they are
| | 02:08 | thinking they need to debug it or something like that.
| | 02:10 | They're saying, okay, these headings, I need
to change those from what font to what font,
| | 02:14 | or if something is missing for instance,
let's say they are looking at it, and then
| | 02:17 | they are like, you know what?
These headings just don't look right.
| | 02:19 | They can go in and say okay, the headings
are supposed to be League Gothic, but they
| | 02:21 | are showing up as Georgia, or they are
showing up just as a default Sans-Serif font.
| | 02:26 | So there is obviously something wrong with the way
I am importing my web fonts or something like that.
| | 02:30 | A Typography Guide really comes in handy
when that happens because then you can go back
| | 02:34 | and reference, see exactly
what is supposed to be where.
| | 02:38 | Then when you are looking at your site and
testing it in different browsers, you can
| | 02:41 | spot the differences between them.
| | 02:43 | You can also see where the problem areas lie, and you
can go in and fix those according to your Typography Guide.
| | 02:48 | When you finish your Typography Guide just close it
out with a couple of different asterisks lines here.
| | 02:54 | And so, we will just do this again,
and then go down to the very end.
| | 02:57 | And at the very end of it, you just have to
make sure that you end with a trailing slash
| | 03:02 | and that way, you can continue
writing just regular old CSS after the fact.
| | 03:08 | So again, to wrap up, writing out a
Typography Guide is a great way to define all of the
| | 03:13 | different areas of type on your website to
give people a blueprint for what is supposed
| | 03:16 | to go where so that you can diagnose any
problems that might arise with web fonts or any other
| | 03:21 | font that you might be using in your CSS.
| | 03:26 |
| | Collapse this transcript |
| Creating a structure template| 00:00 | As you continue to develop your CSS writing
style, and as you start to work on multiple
| | 00:05 | types of projects, inevitably you're going
to come across some things that you've done
| | 00:09 | in the past, and that you really wish
that you could speed up the workflow on.
| | 00:12 | And so that is why I suggest building something that I call
a Structure Template for different types of design processes.
| | 00:18 | So, when we're talking about a Structure Template,
I'm talking about things that you do repetitively.
| | 00:23 | Let's say that you're a theme
designer for a WordPress shop.
| | 00:26 | Well, chances are, you need to already
have laid out a Structure Template for the CSS
| | 00:31 | document that goes with your
new themes that you create.
| | 00:35 | And so, that's the process in which I'm going
to walk you through here, creating a Structure
| | 00:38 | Template for things that you do automatically each
and every time you start a certain kind of project.
| | 00:43 | So, for instance, when you start to
develop a WordPress theme, there is a declaration
| | 00:46 | that goes at the top of the WordPress theme that
the theme actually uses to get some information
| | 00:51 | about it so that when you install it into WordPress,
there's some stuff populated automatically into the back-end.
| | 00:57 | Stuff like the theme name, the theme URI, the
description, the version number, the author,
| | 01:00 | author URI, all of this stuff needs to be
inside of the CSS document because that is
| | 01:05 | read by WordPress and read by the search
engine that powers the WordPress theme directory
| | 01:09 | in order to list your theme in a proper way.
| | 01:12 | So, what I do is I save all these different
structure templates in a folder that I call
| | 01:15 | Assets somewhere on my hard drive.
| | 01:17 | Then I have stuff like WordPress assets, I
have Blog assets, I have restaurant website
| | 01:23 | assets, whatever different types of projects
that I work on, I save an Assets folder for it.
| | 01:28 | I try to be as generic as possible.
| | 01:30 | But in some cases, you do things so
repetitively in a niche market that you have to develop
| | 01:33 | Structure Templates for those as well.
| | 01:35 | But for WordPress, you can
be very broad about this.
| | 01:37 | So, in this case, I just make sure that all
of my information, my name, my website address,
| | 01:41 | all of that information is all there, that
I am included the license information that
| | 01:44 | kind of stuff, and then I always start with
the CSS reset, for this one specific purpose
| | 01:49 | of I just want to make sure that it's
there, and that I don't forget it later on.
| | 01:53 | Now, this is nothing big,
there's not a whole lot to this.
| | 01:56 | In fact, it's only 66 lines of code.
| | 02:00 | But the fact of the matter is these are 66
lines that I don't have to write each and
| | 02:04 | every time I start developing a WordPress theme.
| | 02:06 | Now, I could come in, and I could make up my
own table of contents, start writing things
| | 02:10 | after that, I can even come up with my own
basic structure for a WordPress theme if I
| | 02:14 | chose to do so, like I wanted a left column,
right column, all that kind of stuff, and
| | 02:18 | that kind of falls into my next little
structure template that I'm going to talk about.
| | 02:23 | This is a two-column layout.
| | 02:24 | So, I've got just a basic CSS reset
and some column styles basically to find.
| | 02:28 | So I am using the Meyer Reset of course, and
then down here towards the bottom, I've got
| | 02:31 | two columns defined, Column A, and Column B,
one 70% of the width, one is 30% of the width.
| | 02:36 | That's going to be good for responsive design.
One floats left, one floats right.
| | 02:39 | You could change the float of either one of these
depending on what the layout needs to look like.
| | 02:43 | You can also have 3 columns, column
A, B, and C, Column A, B, C, and D.
| | 02:48 | You can do all of these different things and
save them out as 2 column, 3 column, 4 column
| | 02:52 | layouts, whatever they might be.
| | 02:53 | In any case, you're saving
yourself in this case 70 lines of code.
| | 02:57 | In the WordPress case, you're saving 66
lines of code, stuff you don't have to write each
| | 03:01 | and every time you start a new project.
| | 03:03 | So, developing your own structure templates
as you move forward is going to be an important
| | 03:08 | piece of speeding up your workflow.
| | 03:10 | So, what I suggest you do is just
go and take out a sheet of paper.
| | 03:14 | Write down on the sheet of paper
the things that you do most often.
| | 03:16 | Do you develop a lot of WordPress themes, do you develop
a lot of Drupal themes, or do you develop Joomla themes?
| | 03:21 | Do you do a lot of 1 column, 2 column,
3 column layouts? What are your most common
| | 03:26 | projects that you work on? And then of
those common projects, what are the most common
| | 03:30 | elements that are shared between them? Is it
a left side bar, a right side bar, a header,
| | 03:34 | a footer, what? What are the most common elements?
Define those elements, come up with some sort
| | 03:39 | of structure for those elements that's
easily changeable like the 70%, 30% kind of thing.
| | 03:43 | I could come in and edit those anytime I
need to, I could change the floats, you want to
| | 03:47 | be as generic as possible with these things.
| | 03:49 | And then once you have all of that defined,
start saving these out to a folder, and then
| | 03:54 | use those as starting
points for your next project.
| | 03:56 | I think you'll be amazed at how much time
this saves you, and how much faster you get
| | 04:00 | in your overall development workflow.
| | 04:05 |
| | Collapse this transcript |
| Using a master CSS file| 00:00 | Many web designers and developers work in a
very strategic and structured way in which
| | 00:05 | they compartmentalize all of
the different things that they do.
| | 00:08 | And that is much the case with CSS as well.
| | 00:10 | So chances are, if you are developing your
own style, you're going to want to work in
| | 00:14 | such a way that you separate certain
things like your CSS Reset is separate from your
| | 00:18 | global CSS or your typography CSS, or stuff like that,
and you might even develop separate documents for this.
| | 00:25 | The problem with this is that you wind up
with a lot of different things in your mark-up
| | 00:28 | when you link to several different style
sheets in your HTML markup which just clutters it
| | 00:32 | up, makes it a little bit harder for it to read,
and it makes it a little bit slower as well.
| | 00:37 | And so, what I suggest you do is create
something called a master CSS document that you import
| | 00:41 | all of the other style sheets into, and then just
simply link to that one single document in your HTML.
| | 00:46 | Let me show you exactly what I mean here.
| | 00:48 | I'm going to open up a couple of files, and I'm
going to go out to my Assets folder and grab these.
| | 00:56 | So, I've got an HTML file here, and I've
got a CSS document here, and this CSS document
| | 01:00 | is just basically importing several
CSS documents into one CSS document.
| | 01:05 | So, I've got a import for my reset, I've got an import
for my global CSS, for my structure, and for my IE hacks.
| | 01:12 | So any hacks that we have to do that relate
to Internet Explorer which chances are we're
| | 01:15 | going to have a lot of them,
that's where that stuff is going to go.
| | 01:19 | And so, basically there's nothing in this
CSS document, nothing besides these imports,
| | 01:23 | there's no declarations, there's no
properties, nothing being controlled from here.
| | 01:26 | If I go into this HTML document, I am only
linking to this one Master CSS file right here.
| | 01:33 | If I go into my browser, and look at this,
you can see that there is something here,
| | 01:38 | there is a div being defined here
with a black background and so forth.
| | 01:41 | If I right-click on that and choose Inspect
Element, I can see here that it's a div ID
| | 01:44 | called box, and it is right here declared as a box,
width 500, height 500, and background set to black.
| | 01:51 | This is actually in the structure.css document.
| | 01:55 | And so what I've done here is I've reduced
how many links I've got to style sheets in
| | 01:59 | my HTML mark-up, and then in my Master CSS
document, I'm actually pulling this structure.css
| | 02:06 | file in here, and allowing it to become part of
the Master CSS for this website that I'm creating.
| | 02:12 | So, when you create yourself a Master CSS
document, this just enables you to work in
| | 02:16 | a very structured, and separate way in many
different forms like your reset, your globals,
| | 02:21 | your structures, your typography, all that
kind of stuff, and then pull them all back
| | 02:25 | together in one single Master CSS document.
| | 02:29 | It's a better way to work, it's a more structured
way to work, and I think you're going to find
| | 02:33 | that it saves you a ton of time and a
ton of headaches down the road as well.
| | 02:38 |
| | Collapse this transcript |
|
|
6. Speeding Up Your CodeRemoving unnecessary line breaks| 00:00 | One of the easiest ways to speed up your code
is to go through it and actually take inventory
| | 00:04 | of any unnecessary line breaks that might be present
in your code, and then simply remove those line breaks.
| | 00:10 | And so I have here the Meyer Reset, and
there's really not a whole lot wrong with this, but
| | 00:15 | there are some seriously unnecessary
line breaks going on in this document.
| | 00:19 | And so let's take a look some of them now.
| | 00:21 | For instance, the focus one here, I don't
necessarily need for this to be on three separate lines.
| | 00:26 | I can actually just make it like this.
| | 00:28 | Remember my rule, if it has
only got one rule, it is one line.
| | 00:32 | If it has got multiple rules, it lies on
multiple lines, and it has indentation.
| | 00:36 | But in this case, I think this is just fine to
have it just like this. Same holds true here.
| | 00:41 | I will just go through
and put that up like that.
| | 00:46 | Multiple rules here, multiple lines.
Multiple rules here, multiple lines.
| | 00:49 | Everything looks good.
In this case, I can remove this just like so.
| | 00:57 | Same thing holds true here.
I will back this up. There we go.
| | 01:03 | And I don't need to separate these.
| | 01:04 | If you think you need to separate these to
make it a little bit more readable, that's
| | 01:07 | fine but you are creating
unnecessary line breaks.
| | 01:10 | And so what I am doing is just basically
going through it at the end of the day, and I am
| | 01:13 | cleaning up the code to remove any
unnecessary line breaks from my code and chances are you
| | 01:17 | are going to find a lot of them.
| | 01:19 | Because as we start to develop CSS, the thing
that I do most often is I try to make it readable
| | 01:25 | for me as I am writing it, and that
oftentimes results in me hitting the Enter key one to
| | 01:29 | many times or just separating stuff out
for readability sake while I am developing.
| | 01:33 | Like that list-style: none for instance, I
want to be able to see that straight out,
| | 01:37 | but chances are, I only need it to be in that
one line, so shrinking that down as one last
| | 01:41 | line that your browser has to parse making
it faster on your page load times and making
| | 01:46 | a better experience for your end-user.
| | 01:48 | So at the end of the day, go through, take
inventory of your CSS, and see what types
| | 01:53 | of unnecessary line breaks you can remove.
I think you will be glad you did.
| | 01:58 |
| | Collapse this transcript |
| Simplifying comments| 00:00 | This is yet another housekeeping chore for
you at the end of the day when you get done
| | 00:03 | writing your CSS documents, and that's to
go through and simplify the comments that
| | 00:07 | you've put in to your document.
| | 00:09 | Now up until now I've been pretty much harping
on you to be a sort of a comment fiend going
| | 00:14 | through and commenting
everything that you need to.
| | 00:17 | And that's great during the development process
and also when you are working with other people,
| | 00:21 | but when you go to actually, let's say ship
this thing, if it's a WordPress theme or if
| | 00:25 | it's a production website that's going out,
chances are you can actually go in and eliminate
| | 00:29 | some of the unnecessary comments, and you
can also reduce the comments that are there
| | 00:33 | to smaller sizes so that they are easily more
readable, and that they process is faster in your browser.
| | 00:38 | And so, like for instance, this here in this Meyer
Reset here, remember to define the focus styles.
| | 00:43 | Well, I can actually just shrink that down and
just say focus styles or if this is something
| | 00:49 | that I don't see as being an absolute necessity,
in this case, I know what focus means.
| | 00:53 | I don't necessarily need a comment to tell me that,
I can just eliminate that, and that's just
| | 00:56 | one less line that has to be read
through as this CSS is being parsed.
| | 01:01 | Tables don't need cell spacing 0 in the mark
up, and so what I would need to do is leave
| | 01:07 | this in there, if I haven't already
defined that somewhere in my markup, but if I've
| | 01:11 | already defined this in my markup, I can go
through, and I can say, okay, I don't really
| | 01:14 | need that anymore, thanks for
the reminder but I don't need it.
| | 01:17 | And so I can go through, and I can remove
any unnecessary comments that I find throughout
| | 01:21 | my CSS making this a shorter document, which
thus makes it easier to read, which thus makes
| | 01:25 | it a little bit faster in the browser.
| | 01:27 | Now granted, it's not going to cut down your
load times a significant amount, but it will
| | 01:31 | make it just that much faster, and it will make
your code look just that much cleaner as well.
| | 01:36 | So eliminating unnecessary comments and
shrinking down comments that might be a little too long
| | 01:41 | is a great way to ensure nice, clean,
tidy code that also loads as fast as possible.
| | 01:46 |
| | Collapse this transcript |
| Removing unused selectors| 00:00 | Another great way to make sure that your CSS
is as clean and as tidy and as fast as it
| | 00:05 | needs to be is to remove
something called unused selectors.
| | 00:08 | And so, if you've developed a pretty long
CSS document, it might actually be a little
| | 00:12 | difficult to find an unused selector, and
exactly what is an unused selector? Well,
| | 00:17 | it's something like this right here on
line 70, where I have this class called button
| | 00:20 | and then after that
there's really nothing to find.
| | 00:23 | Either this means that I defined it
somewhere else, I put it in a selector group,
| | 00:27 | or it's just something that never really fully got
developed and didn't make it into the final
| | 00:30 | shipping version of the website.
| | 00:32 | Same thing holds true down here for the content h2. Maybe
I've fixed that somewhere else, the aside h3, same thing.
| | 00:37 | And so there's going to be all of these
different empty selectors throughout your documents
| | 00:41 | that you need to find and get rid of.
| | 00:43 | Why do you need to get rid of them? Because that's one
less line of CSS that has to be parsed by the browser.
| | 00:48 | And so what we are going to do is find all of
these, and we can do that by using a Find/Replace.
| | 00:53 | If your code editor does not support Find/Replace
just take this and paste it into a Word processing
| | 00:58 | program that does and then come
back and re paste it afterwards.
| | 01:01 | And so what we are going to be looking for,
the find part is we are going to be looking
| | 01:04 | for an open curly brace and a closed curly
brace, so just open and close, right next
| | 01:08 | to each other and then I'm going to
find the first one, oh okay, there we go.
| | 01:12 | And so I can just select that and remove
that line, and we'll go, we'll find another one.
| | 01:17 | Oh, okay, there it is. It highlights it
for me, and so we'll just back that up.
| | 01:20 | And I'm also going to remove any unnecessary
white space that might be around there, and
| | 01:24 | so let's go back here, yep, there's one more,
so we'll just select that and the unused line
| | 01:28 | above it and remove it, and there we go.
| | 01:31 | And so now that little noise means that I
can't find anymore so that means all of my
| | 01:36 | unused selectors have been eliminated.
And so from here all I would do is save this.
| | 01:41 | I have now eliminated three
unused and unnecessary selectors.
| | 01:44 | I've also remove some more lines of white space.
| | 01:46 | thus making this document load a little bit
faster and making my code look that much cleaner.
| | 01:51 |
| | Collapse this transcript |
| Using tools to minify your CSS| 00:00 | One of the best ways to speed up your CSS
code is to do something called minifying the CSS.
| | 00:06 | And so minifying is actually a process
where you take the CSS that you've written, and
| | 00:11 | you put it in to some sort of minification
or compression engine and then the CSS is
| | 00:16 | thus compressed all the unnecessary line breaks
and comments and things like that are stripped
| | 00:21 | out, and it just becomes this big
block of matrix-esque looking code.
| | 00:27 | And in a recent survey of top US websites,
CSS minification actually achieved about a
| | 00:32 | 21% size reduction on the CSS files that
where rendered through minification, and this can
| | 00:37 | allow for your website to
load up to about 85% faster.
| | 00:40 | So that's pretty crazy, and you can also save load times
for your pages and decrease bandwidth usage for your users.
| | 00:48 | Now should be noted here that minification
should only be performed once your website
| | 00:53 | is ready to quote unquote go live or go to production,
because you do not want to try to edit a minified
| | 00:59 | CSS document, and it should also be noted
that you should save a local version of the
| | 01:03 | unminified CSS that you can easily
edit the CSS and minify it again later.
| | 01:08 | So, once you have your CSS document written out,
I've got a long CSS document here for you.
| | 01:13 | It's the Bootstrap CSS from Twitter's
Bootstrap platform, which you can see more about in
| | 01:18 | our course here on lynda.com
called Up and Running with Bootstrap.
| | 01:21 | You can watch all about this, but
take a look at how long this document is.
| | 01:25 | It is actually over 6,000 lines of CSS.
| | 01:29 | And so what I want to do is I want to
take this, and I want to compress it.
| | 01:32 | So I'm going to select it All
and copy it to my clipboard.
| | 01:35 | Now, there are a couple of
different tools to do this online.
| | 01:37 | Two of my favorites are CSS
minifier and CSS compressor.
| | 01:41 | And so I'm going to show you CSS compressor
first, I like this one the best because it
| | 01:44 | gives me statistics afterwards telling me how much
it minified it and how much it took out of the CSS.
| | 01:50 | You have different compression modes
here, low, standard, high, and highest.
| | 01:52 | I mean, so if we do high that should be Okay.
| | 01:55 | You also have the option to compress colors,
what that's going to do is change the colors
| | 01:59 | from say RGB over to a HEX code it's also
going to compress the font-weights from, different
| | 02:04 | weights down to just bold or
bolder, something like that.
| | 02:06 | So I'm going to exclude that for now.
| | 02:09 | Also I may have done some special colors
in here, so I don't want to compress colors.
| | 02:13 | I do want to remove unnecessary back slashes and semicolons
and then we'll just go ahead and paste in the CSS.
| | 02:19 | And so you paste in all of your
CSS, and then you hit Compress.
| | 02:24 | And once it does its thing, it's going to
give you a report here to tell you different
| | 02:28 | things that it found that may or may not be
okay in your CSS and then afterwards you see
| | 02:32 | your compressed CSS and look how tight this
is and how hard that would be to read, that's
| | 02:37 | like I said, it's like Neo in the Matrix.
| | 02:40 | And so compression ratio here, you've compressed it
by about 30.4%, and you've taken out 37,749 Bytes.
| | 02:48 | And so you can select all of that, and you
can copy that and then paste it back in to
| | 02:53 | your code and then make that the
live code on your website if you choose.
| | 02:58 | The great part about this is, is that there
are tools out there that do this for you.
| | 03:02 | The bad part about it is chances are your
going to inevitably save over your original
| | 03:06 | CSS document, and that's going to be just
a really big pain, so always make sure that
| | 03:10 | you save a copy first somewhere else and then do
the CSS mininification and only do minification
| | 03:17 | when you are ready to take the site live, and
you're ready for it to just be a production powerhouse.
| | 03:22 | You don't want this to be anything that
you want to edit, because as you can see,
| | 03:25 | it would be very hard to read
any of this compressed CSS.
| | 03:29 | But again, this is going to take off
anywhere from about 20 to 30% off the size of your
| | 03:34 | CSS document, it's going to save load time,
it's going to save bandwidth for your user,
| | 03:38 | and it's going to make
your website just scream fast.
| | 03:43 |
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Well, we've come to the end of
our look at CSS Visual Optimization.
| | 00:05 | I hope that you enjoyed the course as much
as I enjoyed teaching it, and I hope by now
| | 00:08 | you have a better appreciation for what it
takes to write clean optimized CSS, and I
| | 00:13 | hope you understand the
importance of doing so as well.
| | 00:15 | If you're looking to take your CSS knowledge
to the next level, here are some great courses
| | 00:19 | from lynda.com online training library
that I would recommend.
| | 00:23 | If you're just getting started with CSS, you might want
to check out James Williamson's CSS Fundamentals Course.
| | 00:28 | This is a great course that takes you on a
high level overview of cascading style sheets,
| | 00:32 | and teaches you the basics of the CSS syntax.
| | 00:36 | Another great course for beginners is going to
be CSS Page Layouts, also by James Williamson.
| | 00:41 | In this course, James walks you through the
basic concepts of controlling layouts with CSS
| | 00:44 | and then shows you how to apply those
techniques to create fixed, fluid, and yes,
| | 00:49 | even responsive designs.
I highly recommend this one.
| | 00:54 | Finally, if you are a more advanced CSS user
looking to improve your skills set,
| | 00:58 | you might want to check out
CSS with LESS and Sass by Joe Marini.
| | 01:02 | This is a great course that teaches you the
ins and outs of both LESS and Sass and shows
| | 01:06 | you how to implement them into your workflow
and hopefully cut down the development time
| | 01:10 | of those really complex CSS documents.
| | 01:13 | Like I said before, it's been fun, and
I'm happy you joined me for this course.
| | 01:17 | Again, my name is Justin Seeley,
and I hope to see you again real soon.
| | 01:22 |
| | Collapse this transcript |
|
|
