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.
This is yet another housekeeping chore for you at the end of the day when you get done writing your CSS documents, and that's to go through and simplify the comments that you've put in to your document. Now up until now I've been pretty much harping on you to be a sort of a comment fiend going through and commenting everything that you need to. And that's great during the development process and also when you are working with other people, but when you go to actually, let's say ship this thing, if it's a WordPress theme or if it's a production website that's going out, chances are you can actually go in and eliminate some of the unnecessary comments, and you can also reduce the comments that are there to smaller sizes so that they are easily more readable, and that they process is faster in your browser.
And so, like for instance, this here in this Meyer Reset here, remember to define the focus styles. Well, I can actually just shrink that down and just say focus styles or if this is something that I don't see as being an absolute necessity, in this case, I know what focus means. I don't necessarily need a comment to tell me that, I can just eliminate that, and that's just one less line that has to be read through as this CSS is being parsed. Tables don't need cell spacing 0 in the mark up, and so what I would need to do is leave this in there, if I haven't already defined that somewhere in my markup, but if I've already defined this in my markup, I can go through, and I can say, okay, I don't really need that anymore, thanks for the reminder but I don't need it.
And so I can go through, and I can remove any unnecessary comments that I find throughout my CSS making this a shorter document, which thus makes it easier to read, which thus makes it a little bit faster in the browser. Now granted, it's not going to cut down your load times a significant amount, but it will make it just that much faster, and it will make your code look just that much cleaner as well. So eliminating unnecessary comments and shrinking down comments that might be a little too long is a great way to ensure nice, clean, tidy code that also loads as fast as possible.
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.