Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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 of the easiest ways to speed up your code is to go through it and actually take inventory of any unnecessary line breaks that might be present in your code, and then simply remove those line breaks. And so I have here the Meyer Reset, and there's really not a whole lot wrong with this, but there are some seriously unnecessary line breaks going on in this document. And so let's take a look some of them now. For instance, the focus one here, I don't necessarily need for this to be on three separate lines. I can actually just make it like this. Remember my rule, if it has only got one rule, it is one line.
If it has got multiple rules, it lies on multiple lines, and it has indentation. But in this case, I think this is just fine to have it just like this. Same holds true here. I will just go through and put that up like that. Multiple rules here, multiple lines. Multiple rules here, multiple lines. Everything looks good. In this case, I can remove this just like so. Same thing holds true here. I will back this up. There we go.
And I don't need to separate these. If you think you need to separate these to make it a little bit more readable, that's fine but you are creating unnecessary line breaks. And so what I am doing is just basically going through it at the end of the day, and I am cleaning up the code to remove any unnecessary line breaks from my code and chances are you are going to find a lot of them. Because as we start to develop CSS, the thing that I do most often is I try to make it readable for me as I am writing it, and that oftentimes results in me hitting the Enter key one to many times or just separating stuff out for readability sake while I am developing.
Like that list-style: none for instance, I want to be able to see that straight out, but chances are, I only need it to be in that one line, so shrinking that down as one last line that your browser has to parse making it faster on your page load times and making a better experience for your end-user. So at the end of the day, go through, take inventory of your CSS, and see what types of unnecessary line breaks you can remove. I think you will be glad you did.
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.