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.
Another great way to make sure that your CSS is as clean and as tidy and as fast as it needs to be is to remove something called unused selectors. And so, if you've developed a pretty long CSS document, it might actually be a little difficult to find an unused selector, and exactly what is an unused selector? Well, it's something like this right here on line 70, where I have this class called button and then after that there's really nothing to find. Either this means that I defined it somewhere else, I put it in a selector group, or it's just something that never really fully got developed and didn't make it into the final shipping version of the website.
Same thing holds true down here for the content h2. Maybe I've fixed that somewhere else, the aside h3, same thing. And so there's going to be all of these different empty selectors throughout your documents that you need to find and get rid of. 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. And so what we are going to do is find all of these, and we can do that by using a Find/Replace. If your code editor does not support Find/Replace just take this and paste it into a Word processing program that does and then come back and re paste it afterwards. And so what we are going to be looking for, the find part is we are going to be looking for an open curly brace and a closed curly brace, so just open and close, right next to each other and then I'm going to find the first one, oh okay, there we go.
And so I can just select that and remove that line, and we'll go, we'll find another one. Oh, okay, there it is. It highlights it for me, and so we'll just back that up. And I'm also going to remove any unnecessary white space that might be around there, and so let's go back here, yep, there's one more, so we'll just select that and the unused line above it and remove it, and there we go. And so now that little noise means that I can't find anymore so that means all of my unused selectors have been eliminated. And so from here all I would do is save this. I have now eliminated three unused and unnecessary selectors.
I've also remove some more lines of white space. thus making this document load a little bit faster and making my code look that much cleaner.
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.