Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Take a tour of a workflow that optimizes CSS code for easier navigation, organization, and readability. In this course, author Justin Seeley covers best practices for writing CSS in an easy-to-read format, commenting code, developing a table of contents, and adopting other methods that help produce "cleaner" code. The course also contains tips for speeding up development with some online tools and simplification techniques.
One thing that I always found tricky when it came it CSS was remembering all of the different colors that I'd used throughout my CSS documents and what exactly they were and what the hex codes meant and all that good stuff. And so, what I started doing was developing something that I call a universal color guide that I'd create for each individual CSS document that I have. So, what this color guide enables me to do is before I start out, chances are, I have done a mock-up in Photoshop, or Fireworks, or Illustrator or something, and I have got all of the colors that are going to go in to this design already planned out.
So what I do is I get the hex codes for those or the RGBA values for those, and I go through, and I map out a style guide at the very top of my CSS document to let me know exactly what colors I will be using, and then I put in there all of the different names of those colors, whatever they might be. So, I am going to show you how I do that right here. So, the first thing I do is I start off with a comment, and that's just going to be just a slash and an asterisk here. And then, after that, you could put out something like color guide or something. So in this case, I am just going to create a multiple line thing here just like this.
And then we are going to type out COLOR GUIDE just like so. And so, underneath that, I am going to type out a pound symbol, and we are going to type out something like Dark Grey. And this is something that's going to be applied to text in our document. And then put that over, and so the dark grey color that I am going to use for that is #333. Then the next line, that's going to be Dark Blue. And this is something that's going to be applied to headings and links, and so colon after that, and so this color is going to be #000066.
And then we would type out something like Mid Blue, and this is going to be used for only my header styles. And so, this color is going to be #333399 and then we would do something like Light Blue, and this is going to be for the top navigation of my site, and we could do something like #CCCCFF, and then finally we would do something like Mid Grey, and this could be just a universal color here, and so we could do something like #666, and then at the end, we would just close up the comments.
So we would just close it up just like this, and then at the very end of course, we want to close that with a trailing slash. So, this is my color guide. And so anytime I need to come back up here, I can say, okay, now what was this color again, the 000066? Okay, that's dark blue, and it should only be applied to headings and links. Mid-blue is this, and it should only be applied to the header, and so forth, and so on. It's a great way to organize all of the different colors that you use throughout your CSS documents, and you can go and reference that anytime you need to.
And that way, you can easily do Find & Replace for all these different colors, and you can instantly update this, change it however you see fit, and it just really saves me some time and really, really saves me some headaches when I am developing my CSS documents as well.
There are currently no FAQs about CSS: Visual Optimization.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.